macoblog

「ゲーム × プログラミング」で生きていく

アプリ検索ツール(β版)を公開

【WordPress】固定ページの階層化+テンプレート(子)の適用

WordPress

WEB制作担当者

WEB制作担当者
「事業内容ページは固定ページで用意して、その下に飲食事業と食品事業を、、、ってどうやって下階層に用意するんだ?」

こんな疑問に答える記事になります。

本記事では、「固定ページの階層化」+「下階層の子ページに専用のテンプレートファイルを適用させる方法」について解説しています。

固定ページの階層化が分からない方、階層化は出来たけどテンプレートファイルが適用されない事でお悩みの方は参考にどうぞ。

「page-スラッグ.phpの落とし穴」

この記事で出来るようになること

  • 固定ページの階層化(例:○○.com/固定ページ/固定ページ(子)
  • 固定ページ(子)に専用のテンプレートファイルの適用

これらはWordPressでサイト制作する上で必須レベル、2分もあれば読める記事なのでサクッとインプットしちゃいましょう。

目次【本記事の内容】

固定ページの階層化

事業ページがあって、その下に各事業の詳細ページを実装する場合、WordPressではどうやって実装すればいいのか。

事業ページを固定ページ(service)で作ったとする、その下に各事業詳細ページ(▲▲▲)を作るとなるとリンクは[macoblog.com/service/▲▲▲]となる。

これを実装するには、固定ページを階層化させるにはどうすればいいか、これは管理画面から簡単に設定できるようになっている。

固定ページの階層化

まず親となる固定ページを作成する、ここでは事業ページ(service)で作成、スラッグの設定を忘れずにしよう。

親となる固定ページの作成

事業ページの下階層になる固定ページ(子)を作成する、ここでは飲食事業ページ(food)とする。

子となる固定ページの作成

これだけでは2つのページが独立している状態です、子ページに親子関係を設定してあげることで階層化させる事ができる。

固定ページの属性から「親」を「事業ページ」にします、すると、リンクが自動的に階層化されていることが分かります、超簡単ですね。

固定ページの属性から階層化の設定ができる

固定ページ(子)に専用テンプレートを適用させる

固定ページを簡単に階層化させることができました、次はテンプレートファイルを適用させてみましょう。

固定ページの下階層でもテンプレートファイルの命名規則は同じです、[page-スラッグ.php]で用意しましょう。

これを飲食事業ページにあてはめてみると、スラッグが[food]なのでファイル名は[page-food.php]になります、ヘッダーとフッターを読み込ませて中身を作れば完成ですね。

ファイル名から階層関係を把握しづらいのでちょっとモヤモヤします、個人的には[page-service__food.php]で作りたい、、、仕様なので我慢。

上手くいかない方には

原因不明の問題でテンプレートファイルが適用されない、、、なんて方には管理画面からテンプレートファイルを選択できるようにする方法があります。

適用させたいテンプレートファイルの一番上に下記のコードをコピペしてください。

/**
 * Template Name: 飲食事業ページのテンプレート
 */

これで管理画面から固定ページ(飲食)を編集画面を見てみると、テンプレート項目が追加され選択できるようになっています、どうしても適用されないという方はこの方法をお試しください。

固定ページにテンプレートファイルを管理画面から適用させる

以上になります。

おまけ:テンプレートを階層化に合わせる

固定ページを階層化させてもテンプレートファイルの命名規則は変わらない、なんかもやもやしませんか?

事業ページ(service)は[page-service.php]、その下階層の飲食事業ページは[page-food.php]って、ファイル名から親子関係が分からない、下手するとファイル名が被りかねないと思うんです。

階層に合わせたテンプレートファイルを作りたい、ってことで新たに命名規則を作ってしまいましょう。

下記のコードをfunctions.phpにコピペしてください。

add_filter('page_template_hierarchy', 'my_page_templates');
function my_page_templates($templates) {
    global $wp_query;

    $template = get_page_template_slug();
    $pagename = $wp_query->query['pagename'];

    if ($pagename && ! $template) {
        $pagename = str_replace('/', '__', $pagename);
        $decoded = urldecode($pagename);

        if ($decoded == $pagename) {
            array_unshift($templates, "page-{$pagename}.php");
        }
    }

    return $templates;
}

これで期待するような動きになるかと、下階層はアンダーバーで繋ぐことでテンプレートファイルとして認識されるようになります。

新固定ページ命名規則 = page-親スラッグ__子スラッグ.php

事業ページの下階層だった飲食事業ページ、[page-food.php]ではなく[page-service__food.php]にすることで読み込まれるようになります。

飲食事業ページの下に固定ページ(〇〇)を作るならファイル名は[page-service__food__〇〇.php]となります。

複数人でWEB制作する場合なんかはファイル名から親子関係が分かる方がいいと思うので、個人的にはかなりオススメです、是非お試しください。

・参考にした記事(ありがとうございました)
WordPressで固定ページの階層に合わせてテンプレートを読み込む方法