【WordPress】 個別投稿のカテゴリーでテンプレートを自動切り替えする方法

本ブログはアフィリエイト広告を利用しています

WEB / アプリ
WEB / アプリ
この記事は約5分で読めます。

とっちゃん@nyanco! です。

今回はWordPressで個別投稿のカテゴリーごとにテンプレートを自動で切り替える方法の覚書というお話です。

肉玉にゃんこ

本記事では例としてCocoon(コクーン)でやってますが、他テーマでも切り替えできるはずですにゃ~

スポンサーリンク

個別投稿のカテゴリーごとに自動でテンプレートを切り替える方法

Step0. 事前準備

  • 子テーマを作成する
  • 子テーマフォルダの第一階層に親テーマの「single.php」ファイルをコピーしておく
肉玉にゃんこ

Cocoonの子テーマは公式サイトで用意されてるのでダウンロードしてインストールするのが確実ですにゃ~

テーマのダウンロード
Wordpressテーマ「Cocoon」の親テーマと子テーマのダウンロードページです。

Step1. カテゴリー作成

▼Wordpress管理画面の「カテゴリー」メニューから任意のカテゴリーを作成します。

▼今回は例として「ニュース」というカテゴリーを作成しました。

ここで重要になってくるのがスラッグです。この「スラッグ」はURLの一部にもなったりするので半角英数字と記号(ハイフン、アンダーバー)のみで設定しましょう。

Step2. テンプレートファイルをリネーム

Step0. でコピーした「single.php」を複製し、以下の形式でリネームします。

single-category-【カテゴリーのスラッグ】.php

Step1. で例として設定した「news」だと以下のようになります。

single-category-news.php

Step3. テンプレートファイルを編集

Step2. で作成したテンプレートファイルを編集していきますが、とりあえず一旦は超簡単なカスタム(適当な場所にテキストを追加する程度)に留めておき、テンプレートの自動切り替えが確認できたら(Step5.)作り込みしていくのをオススメします。

肉玉にゃんこ

その際、テキストはテンプレートファイル名にしておくと確認時に分かりやすいですにゃ~

Step4. functions.phpに関数を追加

▼子テーマ内の「functions.php」に以下のコードを追記します。

function custom_single_template($single_template) {
    global $post;
    
    $categories = get_the_category($post->ID);
    if ($categories) {
        foreach ($categories as $category) {
            $template = locate_template("single-category-{$category->slug}.php");
            if ($template) {
                return $template;
            }
        }
    }
    
    return $single_template;
}
add_filter('single_template', 'custom_single_template');

こちらのコードをざっくり解説すると、個別投稿のカテゴリーのスラッグを取得してそのスラッグ名が末尾についたテンプレートファイルを探し見つかった場合はそのファイルを使用する、みたいな感じです。

肉玉にゃんこ

スラッグは記事から取得されるので、カテゴリーを増やしてもコードは修正不要ですにゃ~

注意点
・WordPressはsingle-category-【カテゴリーのスラッグ】.phpよりもsingle-【post-type】.phpを優先します。カスタム投稿タイプを使用している場合はこの点に注意
・複数のカテゴリーに属している投稿の場合、最初に見つかったカテゴリーのテンプレートが使用される(基本はスラッグのアルファベット順【例】「news」「test」「blog」なら「blog」が使用される)
・多数のカテゴリー別テンプレートを作成すると、サイトのパフォーマンスに影響を与える可能性がある。必要最低限で!

Step5. 記事を作成・公開してテンプレートファイルの切り替えを確認

Step1.で作成したカテゴリーをつけた個別投稿の記事(ダミー記事でOK)を作成・公開し、ブラウザで確認します。

テンプレートファイルが切り替わっているのが確認できればOKです!

テンプレートファイルが切り替わっているのかが分かりづらい場合
Step3. で前述したようにテンプレートファイルに分かりやすいテキストを追加し表示されていれば切り替わったと判別できる
プラグイン「Show Current Template」を使う。こちらをインストールし、Wordpressにログインした状態でページを見ると画面上のツールバーで現在のページのテンプレートファイルが確認できる

肉玉にゃんこ

確認ができたらあとはテンプレートファイルを自分好みにガシガシカスタマイズしていきますにゃ~

多くのテーマファイルは「single.php」から他のテンプレートファイルを読み込んでいることが多いので、実際にカスタマイズするテンプレートファイルは別であることが多いです。
参考までにCocoon(コクーン)だと、「single.php」→「tmp/single-contents.php」→「temp/content.php」が投稿記事内容を出力しているテンプレートファイルとなります。

おわりに

本記事がどなたかの参考になれば幸いです。

今回は以上となります。
最後まで読んでいただきましてありがとうございました!
それではまた〜✧٩(ˊωˋ*)و✧

コメント