BLOG

  1. HOME
  2. ブログ
  3. WEB制作・デザイン
  4. WordPress・その他CMS
  5. WordPressで固定ページの階層に合わせてテンプレートを読み込む方法
by ウラカワ ウラカワ

WordPressで固定ページの階層に合わせてテンプレートを読み込む方法

WordPressで固定ページの階層に合わせてテンプレートを読み込む方法

こんにちは、ウラカワです。

今回はWordPressの固定ページテンプレートに関するカスタマイズです。

通常、固定ページに別々のデザインのテンプレートを適用させる場合、デフォルトだと以下のテンプレートのどれかで対応することになります。

  1. {custom}.php
  2. page-{slug}.php
  3. page-{id}.php

ページ数が少なければ特に問題はないのですが、ページ数が多い場合や階層が深い場合が問題です。
1つ1つカスタムテンプレートを紐付けるのはかなり手間ですし、階層化しているとスラッグが同じになることもあります。

URL https://magnets.jp/●●●/■■■/▲▲▲
TEMPLATE page/●●●/■■■/▲▲▲.php

出来ればこんな感じで階層(URL)に合わせてテンプレートを読み込んでくれると良いと思いませんか?

これを実現するのに便利なフィルターがWordPress 4.7.0から追加されています。

{type}_template_hierarchyというフィルターフック群で、今回は固定ページ用のpage_template_hierarchyというフィルターフックを利用します。

URL https://magnets.jp/●●●/■■■/▲▲▲
TEMPLATE page/●●●/■■■/▲▲▲.php
  • テンプレートが存在する
  • URLがエンコードされない(例:スラッグが日本語)
  • カスタムテンプレートが紐付けられていない

上記の構造と条件に一致する場合読み込まれるようになりました。

ディレクトリを深くしたくない、という場合は階層分アンダースコア等で繋いでみるという手もあります。

URL https://magnets.jp/●●●/■■■/▲▲▲
TEMPLATE page-●●●__■■■__▲▲▲.php

ディレクトリが深くならない代わりに階層分名前が長くなります。

ついでにCSSも階層に合わせて読み込むようにしてみます。

URL https://magnets.jp/●●●/■■■/▲▲▲
CSS assets/css/page/●●●/■■■/▲▲▲.css

これでCSSもテンプレートと同様の構造で読み込まれるようになります。

今回はどの方法もURLがエンコードされるような場合は無視し、ファイルが存在したら読み込むようになっています。

命名法則やディレクトリ構造は好みの分かれる部分なので、プロジェクトに合わせてカスタマイズしてくださいね。

それではまた。

ページの先頭に戻る