ゼロからつくるWord pressテーマ第5回

ゼロからつくるWordPressテーマ#5

テンプレート階層を理理解する（前編）

http://hitsuji.me

⽬目次

前編
1.  テーマファイル⼀一覧
1.  前回までに作成したもの
2.  第5回で作成するもの
2.  今回のポイント
3.  テンプレートを決定する仕組み

後編（次回Up）
4.  ファイルの編集
5.  まとめ＆次回予告
ゼロからつくる WordPress テーマ #5 http://hitsuji.me 2

1-‐‑‒1.前回までに作成したもの

ファイル名役割や特徴ファイルの種類
index.php Webページ⽣生成に使⽤用する基本となるテンプレート
ファイル
header.php htmlヘッダーやサイト名などを部品化しパーツテンプレート
たもの。 ※index.phpのようなテ
content.php 記事出⼒力力部分を部品化したもの。ループンプレートから呼び出さ
内で使⽤用する。れて使われる

footer.php コピーライト表⽰示など、Webページフッ
ター部分を部品化したもの。
style.css デザインを指定するスタイルシート
screenshot.jpg ダッシュボードの「テーマ管理理」で表⽰示テーマのサムネイル画像
される画像
darkred_**.png ⾒見見出しの先頭に使⽤用している画像

【補⾜足】

“パーツテンプレート”の名称は、WordPressフォーラムで度度々使われているので、ファイルの種類名
として採⽤用しました。ここでは、index.phpのようなファイルを単にテンプレートと呼び、パーツテ
ンプレートと区別することにします。


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 ⾒見見出しの先頭に使⽤用している画像


2.今回のポイント
編集前のテーマ

ü  テンプレートは、index.phpのみ

編集後のテーマ

ü  テンプレートは、index.php,
home.php,
single.phpの3種類

ポイント

3種類のテンプレートは、どのように使い分けられるのか？

※ここでの「テンプレート」は、4ページで紹介したファイルの種類を指します

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

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


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

①Webブラウザに
③依頼されたアドレス
アドレスを⼊入⼒力力
②hitsuji.me/の
を⾒見見て、トップページ
http://hitsuji.me/⏎
データを送るよう
を表⽰示すると判断

依頼する

WWW Webサーバ

Webブラウザ @hitsuji.me

④WPテンプレートで
⽣生成したトップページ
⑤届いたデータを使って
のデータを送る
ブラウザがWebページを
表⽰示する

疑問：④で使われるテンプレートは、どのように決まるのか？

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

1.  表⽰示するWebページのアドレスを⾒見見て、
ページの種類を判断する
トップページor個別記事orカテゴリor存在しないページ…etc

2.  テーマフォルダに⼊入っているテンプレー
トのうち、ページの種類に最適なテンプ
レートを選択する

トップページ home.php

個別記事 single.php


3-‐‑‒2-‐‑‒2.Webサーバ内の動き　例例1.トップページ表⽰示

“http://hitsuji.me/”

を表⽰示せよ

上記アドレスを⾒見見て、トップ
ページを表⽰示すると判断

トップページの表⽰示設定を
ダッシュボード＞設定＞表⽰示設定

確認するで設定できる

※今回は「最新の投稿」であると仮定

テンプレートファイルに、

home.phpがあるかどうか確認

あるない

home.phpに従って
index.phpに従って

最新投稿記事のhtml 最新投稿記事のhtml
ソースを⽣生成するソースを⽣生成する


3-‐‑‒2-‐‑‒3.Webサーバ内の動き　例例2.個別記事表⽰示

“http://hitsuji.me/?p=256”

を表⽰示せよ

上記アドレスを⾒見見て、ある投稿記
事のパーマリンクであると確認
※記事のステータスが「公開」になっている

＆カスタム投稿ではないと仮定する

テンプレートファイルに、

single.phpがあるかどうか確認

あるない

single.phpに従って
index.phpに従って

p=256の投稿記事の p=256の投稿記事の
htmlソースを⽣生成する htmlソースを⽣生成する


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などの詳細は別の機会に紹介します。


第5回前編まとめ＆後編予告

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

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


Appendix

n  WordPress公式ページの関連記事

l  http://wpdocs.sourceforge.jp/テンプレート階層

※11ページで紹介したテンプレート階層の

フルバージョンが掲載されています


ゼロからつくるWord pressテーマ第5回

More Related Content

What's hot (20)

Similar to ゼロからつくるWord pressテーマ第5回 (20)

ゼロからつくるWord pressテーマ第5回