基金訓練に行ってきました。(74日目)


基金訓練(Webデザイン・プログラミング科)の74日目に行ってまいりました。
74日目は、WordPressの実習です。
デフォルトのテンプレート(twentyten)をカスタマイズして、トップページを固定ページにしたサイトを作成していきます。

72日目その2と74日目の内容は下記のとおりです。

1.固定ページのテンプレート作成(テンプレートですが、各々の固定ページの専用テンプレートになります。)

  • ¥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で保存しておきます。)

2.管理画面で固定ページの作成

  • WordPressのダッシュボードのメニューから、ページ→新規追加 を選択すると、「新規ページを追加」画面になります。
  • タイトルを「トップページ」と打ち込み、右の「ページ属性」の「テンプレート」で、「TOP」を選択します。
  • タイトルの下の「パーマリンク」の編集ボタンを押し、「トップページ」を半角英字の「top」に変更して、OKボタンを押します。
  • 右の公開ボタンを押すと、ページの追加が確定します。
  • 同様に、2ページ目以降の固定ページもページ追加していきます。
  • ブログページも新規ページとして固定ページと同様に追加しますが、「テンプレート」は「デフォルトテンプレート」にします。

3.トップページをフロントページに設定

  • WordPressのダッシュボードのメニューから、設定→表示設定 を選択すると、「表示設定」画面になります。
  • 「フロントページの表示」項目で、「固定ページ」を選択します。
  • 「フロントページ」項目で、「トップページ」(先ほど作ったページのトップページのタイトル)を選択します。
  • 「投稿ページ」項目で、「ブログ」(先ほど作ったページのブログのタイトル)を選択します。
  • 変更を保存ボタンを押して確定します。

4.ブラウザで確認しながらcssファイル、phpファイルを修正

  • グローバルナビなどのページへのリンクのパス名は、
    <?php bloginfo( ‘url’ ); ?> /パーマリンクで設定した文字(トップページの場合はtop)
    にします。
  • ブラウザで各ページを確認しながら、¥wordpress¥css¥c_style.cssや、
    ¥wordpress¥wp-content¥themes¥twntyten¥style.cssを修正して、表示を整えて完成です。





関連記事

カテゴリー:職業訓練
タグ: , ,

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください