【WordPress】 子テーマを使ったカスタマイズについて(テンプレートファイル編)

「style.css」、「functions.php」に続いては、「テンプレートファイル」の親子関係について調べました。

まずテンプレートファイルの構成について見てみましょう。

スポンサーリンク

1.テンプレートファイルってなに?

まずテンプレートファイルとは何でしょうか?
記事一覧やカテゴリーアーカイブなどのページを生成するファイルです。

では、どんなファイルがあり、どのページを生成しているのでしょうか?
TwentyTwelveの主なテンプレートファイルは以下のとおりです。

404.php : 404エラーページ
search.php : 検索結果ページ
category.php : カテゴリーアーカイブページ
tag.php : タグアーカイブページ
author.php : 投稿者アーカイブページ
archive.php : アーカイブページ(カテゴリー、タグ、日付など全てのアーカイブ)
single.php:個別記事ページ
front-page.php:トップページ(固定ページを設定した場合のみ)
index.php : 全てのテンプレートファイルの機能を持ったファイル

通常これらのページで構成されていますが、カスタムをするとさらにテンプレートファイルが増えます。
どのような優先順位で読み込まれるかは下図の通りです。

テンプレート階層(WordPress Codexより)

Template_Hierarchy

例えば、カテゴリーアーカイブの表示させるには、左の「どのページ?」からスタートして始めに存在したテンプレートファイルを使います。

Template_Hierarchy_02d

順を追って見てみると、

どのページ?

アーカイブページ

カテゴリーアーカイブ

category-$slug.php : 特定スラッグのカテゴリーアーカイブ/デフォルトでは未使用

category-$id.php : 特定IDのカテゴリーアーカイブ/デフォルトでは未使用

category.php : カテゴリーアーカイブ

archive.php : アーカイブ(カテゴリー、タグ、日付など全てのアーカイブ)

index.php : 上記ファイルが存在しない時はアーカイブとしても機能する

このように流れ、デフォルト状態では始めに存在するファイルである「category.php」が使用されています。

2.いろいろ試してみた

モノは試し、「category.php」を削除してみました。
消す前のカテゴリーアーカイブの表示はこちら。

template_file_01b

「category.php」を削除して、「archive.php」が機能している場合はこうなりました。

template_file_02b

見出しが「アーカイブ」に変わっただけで、きちんとカテゴリーアーカイブを表示しています。

ではさらに「archive.php」も削除してみましょう。
これでカテゴリーアーカイブを選ぶと「index.php」が機能するようになります。

template_file_03b

「アーカイブ」の文字も消えました。
しかしカテゴリーアーカイブとして表示されています。

つまり「index.php」の機能を 「archive.php」→ 「category.php」と分割してると考えればいいようです。

なるほど。

3.カスタマイズ対象のテンプレートファイルを調べる

では、カテゴリー/タグ/作成者/日付のアーカイブページをカスタマイズしたい時はどうしたらいいでしょうか?
※テンプレートファイルを構成する部品「モジュールテンプレート」で対応できる内容ではないと仮定します。
例えば各アーカイブに合ったヘッダーに変更するとか。

template_file_04

このフローを見ると対象となるファイルは「category.php」「tag.php」「author.php」「date.php」だということが分かります。

がしかし、TwentyTwelveのデフォルトでは「date.php」は存在しません。
つまり日付アーカイブは「archive.php」で表示させていたのです。

このため正解は「category.php」「tag.php」「author.php」「archive.php」ということになります。

もしくは混乱しないために「date.php」を作ってしまうという手もあります。

4.親子関係と階層を考慮すると

ずいぶん寄り道しましたが話を親子関係に戻します。

上記の階層の優先順位と親子関係をまとめるとこうなりました。

child_theme_10b

つまり、親テーマのcategory.phpの内容を変更したいときには、子テーマにそのままコピーをして変更していけば良いということになります。

5.まとめ

同じ名前のテンプレートファイルがある場合、子テーマが優先されて親テーマは無視される。
このため変更したいテンプレートファイルを親テーマから子テーマへコピーしてカスタマイズする。

テンプレートファイルには同じ機能を持ったファイルがあり、優先順位に沿って使われている。
このためカスタマイズしたい内容がどのファイルで生成されているのかを正確に把握しなくてはいけない。
「なんかそれっぽいコードがあったから直してみた」はNG

アップデート時のトラブルを避けるため、親テーマのテンプレートファイルは直接変更しないこと。
カスタマイズは子テーマ内で完結させること。

懸念点としては、子テーマに追加したテンプレートファイルはアップデートの影響を受けないため、セキュリティー対策などが必須事項が盛り込まれたときにこの対策が反映しないことになる。
(あまりないとは思いますが)
アップデートがあった際には、どのファイルにどのような内容が盛り込まれたのかを知る必要がある。

これまたややこしいな・・・。

残りはモジュールテンプレートですね。


スポンサーリンク
  • このエントリーをはてなブックマークに追加

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA