Embed Size (px)
Citation preview
WordPressもくもく勉強会 at コエド第6回 15.04.12
WordPressテンプレート階層を理解する。 ー テーマカスタマイズに必要な5つのポイント！ ー
TickleCode. Yoshinori Kobayashi 1
2
生まれは 奈良県 です
小林由憲（こばやしよしのり） Twitter: @AsbyuKobayashi
ブログ: In Advance Only
WordPress テンプレート階層
http://wpdocs.sourceforge.jp/wiki/images/wp-template-hierarchy.jpg
3
WordPress Codex日本語版 テンプレート階層
4
テンプレート階層のデモ
GitHub： https://github.com/YoshinoriKobayashi/150412wpmoku
簡単なテーマでテンプレート階層の仕組みを理解する。
5
Point1.テンプレート階層の見方
404エラーページ 404.php
Exp:404（Not Found）ページの場合
index.php
・URLが存在しないとき、404.phpを探す。
※404.phpがあれば、ここでテンプレートの検索は終了！ ・404.phpがあれば、HTMLに展開してブラウザへ返す。
テンプレートを探すルール。
・404.phpがなければ、index.phpからHTMLに展開してブラウザへ返す。
404.php がないとき
6
Point2.サイトのフロントを固定ページにしたい
・フロント用の固定ページを作る。
・page.php を用意、なければ index.php が使われる。
サイトフロントページ
（固定）ページを表示
index.php ページテンプレート page.php
あと１つ設定が必要・・・
サイトフロントページ
（固定）ページを表示
7
Point2.サイトのフロントを固定ページにしたい
index.php ページテンプレート page.php
・フロントを固定ページに切り替える。
[設定]→[表示設定]→[フロントページの表示]→[固定ページ]にチェック→[フロントページ]で固定ページを選択。
切り替えが必要！
8
Point3.ブログ一覧（/blog）を作る。
・まずは、ブログ一覧を表示するための固定ページを作る。
※必要なのはタイトルとURL（パーマリンク）のみ。 ※ページの投稿内容は使われない。
フロント（トップ）とは別に、ブログ一覧ページを作りたい。
9
Point3.ブログ一覧（/blog）を作る。
サイトフロントページ 投稿を表示 index.php home.php
[投稿ページ]に先ほど作成した固定ページを設定する。
上記の設定で、次のようにテンプレートが選択される。
※home.php で投稿一覧を表示。なければ、index.phpを使用。
10
Point4.固定ページでテンプレート（デザイン） を選べるようにする。
・まずは、（自由な名前）.php でphpファイルを作る。
・コメントで、「Template Name：（管理画面で表示したい名前）」を追加する。
・固定ページの投稿内容で、サイドバーあるなし、グリッドレイアウトするしない、写真の表示方法、フッターありなしなどを選びたい。
11
Point4.固定ページでテンプレート（デザイン）を選べるようにする。
個別ページ 固定ページ
$cutom.php
上記の設定で、次のようにテンプレートが選択される。
カスタムテンプレート
page.php index.php
固定ページでテンプレートが選べるようになる。
※$cutom は名前を自由に付けてよいことを示す。
12
Point5.サイトフロントだけを特別なデザインに！ フロント（トップ）だけを別のデザインにしたい。
サイトフロントページ front-page.php
・front-page.php のファイルがあれば適用される。
※home.php などの如何なる設定よりも優先されて適用される。
page.php
index.php
home.php
◆WordPressをカスタマイズするなら絶対覚えておきたいテンプレートファイルの使い方｜Webデザインレシピ
WordPressテンプレート階層を理解する上で、 参考になるサイトと書籍
◆WordPress Codex日本語版 テンプレート階層
13
◆WordPressのフロントページを設定してサイト型表示にする方法｜バズ部
[書籍]WordPressユーザーのためのPHP入門 はじめから、ていねいに。 水野史土著
ご清聴ありがとうございました。
14
