1. ゼロからつくるWordPressテーマ#5
テンプレート階層を理理解する（前編）
http://hitsuji.me

2. ⽬目次
前編
1. テーマファイル⼀一覧
1. 前回までに作成したもの
2. 第5回で作成するもの
2. 今回のポイント
3. テンプレートを決定する仕組み
後編（次回Up）
4. ファイルの編集
5. まとめ＆次回予告
ゼロからつくる WordPress テーマ #5 http://hitsuji.me 2

3. 1-‐‑‒1.前回までに作成したもの
ファイル名 役割や特徴 ファイルの種類
index.php Webページ⽣生成に使⽤用する基本となる テンプレート
ファイル
header.php htmlヘッダーやサイト名などを部品化し パーツテンプレート
たもの。 ※index.phpのようなテ
content.php 記事出⼒力力部分を部品化したもの。ループ ンプレートから呼び出さ
内で使⽤用する。 れて使われる
footer.php コピーライト表⽰示など、Webページフッ
ター部分を部品化したもの。
style.css デザインを指定する スタイルシート
screenshot.jpg ダッシュボードの「テーマ管理理」で表⽰示 テーマのサムネイル画像
される画像
darkred_**.png ⾒見見出しの先頭に使⽤用している画像
【補⾜足】
“パーツテンプレート”の名称は、WordPressフォーラムで度度々使われているので、ファイルの種類名
として採⽤用しました。ここでは、index.phpのようなファイルを単にテンプレートと呼び、パーツテ
ンプレートと区別することにします。
ゼロからつくる WordPress テーマ #5 http://hitsuji.me 3

4. 1-‐‑‒2.第5回で作成するもの…home.php & single.php
ファイル名 役割や特徴 ファイルの種類
home.php トップページ表⽰示⽤用のテンプレート テンプレート
single.php 個別投稿記事表⽰示⽤用のテンプレート
今回のキーワード
index.php トップページと単⼀一投稿記事以外のペー
ジを表⽰示する⽤用のテンプレート
header.php htmlヘッダーやサイト名などを部品化し パーツテンプレート
たもの。 ※index.phpのようなテ
content.php 記事出⼒力力部分を部品化したもの。ループ ンプレートから呼び出さ
内で使⽤用する。 れて使われる
footer.php コピーライト表⽰示など、Webページフッ
ター部分を部品化したもの。
style.css デザインを指定する スタイルシート
screenshot.jpg ダッシュボードの「テーマ管理理」で表⽰示 テーマのサムネイル画像
される画像
darkred_**.png ⾒見見出しの先頭に使⽤用している画像
ゼロからつくる WordPress テーマ #5 http://hitsuji.me 4

5. 2.今回のポイント
編集前のテーマ
ü テンプレートは、index.phpのみ
編集後のテーマ
ü テンプレートは、index.php,
home.php,
single.phpの3種類
ポイント
3種類のテンプレートは、どのように使い分けられるのか？
※ここでの「テンプレート」は、4ページで紹介したファイルの種類を指します
ゼロからつくる WordPress テーマ #5 http://hitsuji.me 5

6. 3.テンプレートを決定する仕組み
⽬目次
1. Webページを表⽰示する動き
2. Webサーバ内の動き
l テンプレート決定フロー概要
l 例例1. トップページ
l 例例2. 個別ページ
3. テンプレート階層とは？
ゼロからつくる WordPress テーマ #5 http://hitsuji.me 6

7. 3-1.Webページを表⽰示する動き
①Webブラウザに
③依頼されたアドレス
アドレスを⼊入⼒力力
②hitsuji.me/の
を⾒見見て、トップページ
http://hitsuji.me/⏎
データを送るよう
を表⽰示すると判断
依頼する
WWW Webサーバ
Webブラウザ @hitsuji.me
④WPテンプレートで
⽣生成したトップページ
⑤届いたデータを使って
のデータを送る
ブラウザがWebページを
表⽰示する
疑問：④で使われるテンプレートは、どのように決まるのか？
ゼロからつくる WordPress テーマ #5 http://hitsuji.me 7

8. 3-‐‑‒2-‐‑‒1.テンプレート決定フロー概要
1. 表⽰示するWebページのアドレスを⾒見見て、
ページの種類を判断する
トップページor個別記事orカテゴリor存在しないページ…etc
2. テーマフォルダに⼊入っているテンプレー
トのうち、ページの種類に最適なテンプ
レートを選択する
トップページ home.php
個別記事 single.php
ゼロからつくる WordPress テーマ #5 http://hitsuji.me 8

9. 3-‐‑‒2-‐‑‒2.Webサーバ内の動き 例例1.トップページ表⽰示
“http://hitsuji.me/”
を表⽰示せよ
上記アドレスを⾒見見て、トップ
ページを表⽰示すると判断
トップページの表⽰示設定を
ダッシュボード＞設定＞表⽰示設定
確認する で設定できる
※今回は「最新の投稿」であると仮定
テンプレートファイルに、
home.phpがあるかどうか確認
ある ない
home.phpに従って
index.phpに従って
最新投稿記事のhtml 最新投稿記事のhtml
ソースを⽣生成する ソースを⽣生成する
ゼロからつくる WordPress テーマ #5 http://hitsuji.me 9

10. 3-‐‑‒2-‐‑‒3.Webサーバ内の動き 例例2.個別記事表⽰示
“http://hitsuji.me/?p=256”
を表⽰示せよ
上記アドレスを⾒見見て、ある投稿記
事のパーマリンクであると確認
※記事のステータスが「公開」になっている
＆カスタム投稿ではないと仮定する
テンプレートファイルに、
single.phpがあるかどうか確認
ある ない
single.phpに従って
index.phpに従って
p=256の投稿記事の p=256の投稿記事の
htmlソースを⽣生成する htmlソースを⽣生成する
ゼロからつくる WordPress テーマ #5 http://hitsuji.me 10

11. 3-‐‑‒3.テンプレート階層とは？
テンプレートファイル名の優先順位のこと
テンプレート階層（⼀一部抜粋）
ページの種類 優先度度:⾼高 低
トップページ(最新投稿) home.php
個別記事 single-­‐{post_type}.php single.php
固定ページ custom.php page-­‐slug.php page-­‐ID.php page.php index.php
category-­‐ category-­‐
カテゴリ表⽰示 category.php
slug.php ID.php archive.php
⽇日付別表⽰示 date.php
ページの種類ごとに、テーマフォルダに存在するテンプレートファイルの中から、
最も左側にあるファイル名のテンプレートが選択される
※slug,
ID,
post_typeなどの詳細は別の機会に紹介します。
ゼロからつくる WordPress テーマ #5 http://hitsuji.me 11

12. 第5回前編 まとめ＆後編予告
n まとめ
l ページの種類ごとにテンプレート階層と呼ばれる
テンプレートファイル名の優先順位がある。
l Webページを⽣生成するときは、テーマフォルダ
の中から、テンプレート階層の優先順位が⾼高いテ
ンプレートが選択される。
l 選択されたテンプレートからhtmlを⽣生成する。
n 後編予告
l home.phpとsingle.phpを作成して、前編で説明
したことの動作を確認します！
ゼロからつくる WordPress テーマ #5 http://hitsuji.me 12

13. Appendix
n WordPress公式ページの関連記事
l http://wpdocs.sourceforge.jp/テンプレート階層
※11ページで紹介したテンプレート階層の
フルバージョンが掲載されています
ゼロからつくる WordPress テーマ #5 http://hitsuji.me 13