こんにちは。今回は「テンプレート階層」について取り扱います。前回まではindex.phpを用いてWebページを生成してきましたが、WordPressにはページの種類ごとにテンプレートファイルを切り替える仕組みがありますので、第5回で勉強していきたいと思います。今回の記事はその前編です。

以下は、スライド内のスクリプトです。
ゼロからつくるWord pressテーマ第5回 — Presentation Transcript

1. ゼロからつくるWordPressテーマ#5 テンプレート階層を理解する(前編)

2. 目次

前編
1.テーマファイル一覧
1-1.前回までに作成したもの
1-2.第5回で作成するもの
2.今回のポイント
3.テンプレートを決定する仕組み
後編(次回Up
4.ファイルの編集
5.まとめ&次回予告

3. 1-1.前回までに作成したもの

index.php Webページ⽣成に使⽤する基本となるテンプレートファイル。テンプレート
header.php htmlヘッダーやサイト名などを部品化したもの。パーツテンプレート
content.php 記事出⼒部分を部品化したもの。ループ内で使⽤する。パーツテンプレート
footer.php コピーライト表⽰示など、Webページフッター部分を部品化したもの。パーツテンプレート
style.css デザインを指定する。スタイルシート
screenshot.jpg ダッシュボードの「テーマ管理」で表示される画像。テーマのサムネイル画像
darkred_**.png ⾒出しの先頭に使⽤している画像
【補足】 “パーツテンプレート”の名称は、WordPressフォーラムで度々使われているので、ファイルの種類名 として採⽤しました。ここでは、index.phpのようなファイルを単にテンプレートと呼び、パーツテンプレートと区別することにします。

4. 1-2.第5回で作成するもの…home.php&single.php

home.php トップページ表⽰用のテンプレート
single.php 個別投稿記事表⽰用のテンプレート
テンプレートは、index.php, home.php,single.phpの3種類
→ポイント 3種類のテンプレートは、どのように使い分けられるのか?
※ここでの「テンプレート」は、4ページで紹介したファイルの種類を指します

6. 3.テンプレートを決定する仕組み

目次
1.Webページを表⽰示する動き
2.Webサーバ内の動き
2-1 テンプレート決定フロー概要
2-2 例1.トップページ
2-3 例2.個別ページ
3.テンプレート階層とは?

7. 3-1.Webページを表示する動き

#1 Webブラウザにアドレスを⼊力(ex. http://hitsuji.me/)
#2 hitsuji.me/のデータを送るよう依頼する
#3 依頼されたアドレスを見て、トップページを表示すると判断
#4 WPテンプレートで生成したトップページのデータを送る
#5 届いたデータを使ってブラウザがWebページを表示する
疑問:#4で使われるテンプレートは、どのように決まるのか?

8. 3-2-1.テンプレート決定フロー概要

1. 表示するWebページのアドレスを⾒て、ページの種類を判断する
トップページor個別記事orカテゴリor存在しないページ…etc
2.  テーマフォルダに⼊入っているテンプレー トのうち、ページの種類に最適なテンプレートを選択する
トップページ –>> home.php
個別記事 –>> single.php

9. 3‒2‒2.Webサーバ内の動き

例1.トップページ表示
“http://hitsuji.me/”を表⽰せよ
上記アドレスを⾒て、トップページを表示すると判断
テンプレートファイルに、home.phpがあるかどうか確認
ある–>>home.phpに従ってhome.phpに従って最新投稿記事のhtmlソースを生成する
ない–>>index.phpに従ってhome.phpに従って最新投稿記事のhtmlソースを生成する

10. 3-2-3.Webサーバ内の動き

例2.個別記事表示
“http://hitsuji.me/?p=256”を表⽰せよ
上記アドレスを見て、ある投稿記事のパーマリンクであると確認
テンプレートファイルに、single.phpがあるかどうか確認
ある–>>single.phpに従ってp=256の投稿記事のhtmlソースを⽣成する
ない–>>index.phpに従ってp=256の投稿記事のhtmlソースを⽣成する

11. 3‒3.テンプレート階層とは?

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

12. 第5回前編 まとめ&後編予告

まとめ
ページの種類ごとにテンプレート階層と呼ばれるテンプレートファイル名の優先順位がある。
Webページを生成するときは、テーマフォルダの中から、テンプレート階層の優先順位が高いテンプレートが選択される。
選択されたテンプレートからhtmlを生成する。

後編予告
home.phpとsingle.phpを作成して、前編で説明したことの動作を確認します!

13. Appendix

WordPress公式ページの関連記事
http://wpdocs.sourceforge.jp/テンプレート階層
※11ページで紹介したテンプレート階層のフルバージョンが掲載されています

 

「WordPressテーマ講座:旧版」の記事