基金訓練(Webデザイン・プログラミング科)の74日目に行ってまいりました。
74日目は、WordPressの実習です。
デフォルトのテンプレート(twentyten)をカスタマイズして、トップページを固定ページにしたサイトを作成していきます。
72日目その２と74日目の内容は下記のとおりです。
１．固定ページのテンプレート作成(テンプレートですが、各々の固定ページの専用テンプレートになります。)
- ￥wordpress￥wp-content￥themes￥twentyten フォルダ内のindex.phpを固定ページの数だけ同じフォルダにコピーします。
- それぞれ、top.php、info.phpなどのファイル名に変更します。
- テキストエディタで開いて、上部のコメント(／＊＊～＊／の部分)をすべて削除し、top.phpの場合は、
／＊＊
＊Template Name: TOP
＊／
に置き換えます。TOPの部分がテンプレート名になるので、info.phpの場合は、その部分をINFOにします。 - それぞれのphpファイルの
<div id="content" role="main">～</div><!– #content –>
をすべて消し、前に準備しておいたHTMLの<div id="c_contents">～</div>部分をペーストします。 - 1カラムにする時は、
<?php get_sidebar(); ?>
を削除します。 - 編集したphpファイルをUTF-8Nで保存します。
(前回書き忘れましたが、header.php、footer.phpもUTF-8Nで保存しておきます。)
２．管理画面で固定ページの作成
- WordPressのダッシュボードのメニューから、ページ→新規追加 を選択すると、「新規ページを追加」画面になります。
- タイトルを「トップページ」と打ち込み、右の「ページ属性」の「テンプレート」で、「TOP」を選択します。
- タイトルの下の「パーマリンク」の編集ボタンを押し、「トップページ」を半角英字の「top」に変更して、OKボタンを押します。
- 右の公開ボタンを押すと、ページの追加が確定します。
- 同様に、2ページ目以降の固定ページもページ追加していきます。
- ブログページも新規ページとして固定ページと同様に追加しますが、｢テンプレート｣は｢デフォルトテンプレート｣にします。
３．トップページをフロントページに設定
- WordPressのダッシュボードのメニューから、設定→表示設定 を選択すると、「表示設定」画面になります。
- ｢フロントページの表示｣項目で、｢固定ページ｣を選択します。
- ｢フロントページ｣項目で、｢トップページ｣(先ほど作ったページのトップページのタイトル)を選択します。
- ｢投稿ページ｣項目で、｢ブログ｣(先ほど作ったページのブログのタイトル)を選択します。
- 変更を保存ボタンを押して確定します。
４．ブラウザで確認しながらcssファイル、phpファイルを修正
- グローバルナビなどのページへのリンクのパス名は、
<?php bloginfo( ‘url’ ); ?> /パーマリンクで設定した文字(トップページの場合はtop)
にします。 - ブラウザで各ページを確認しながら、￥wordpress￥css￥c_style.cssや、
￥wordpress￥wp-content￥themes￥twntyten￥style.cssを修正して、表示を整えて完成です。
