カスタム投稿タイプの記事を複数テンプレートで出し分ける

TOPICS:

Posted By: nishida 2020年10月7日

WordPress のカスタム投稿タイプを使って記事を作成しているようなよくあるサイトで、

  • テンプレートを出し分けたい
  • 使うテンプレートはラジオボタンで選択したい

という要望があったので対応しました。
一般的な方法だけでは実現が難しかったので、その対応方法を記載していきます。

概要

項目 内容
カスタム投稿タイプ sat_labo（名前：SATラボ）
テンプレートの種類 SATラボテンプレートA
SATラボテンプレートB
SATラボテンプレートC

※記事のため、仮の設定値としています。

カスタム投稿タイプの作成

「sat_labo」という投稿タイプを作成します。
プラグインで作成したり、ソースコード書いたり、やり方は一つではないのですが、私はいつもソースコードで書いてます。

functions.php に以下記載します。

add_action('init', 'add_satlabo_post_type');
function add_satlabo_post_type() {
    $params = array(
        'labels' => 'SATラボ',
        'public' => true,
        'supports' => array(
            'title',
            'author',
            'thumbnail',
        ),
    );
    register_post_type('sat_labo', $params);
}

カスタムフィールドの作成

こちらもやり方はいくつかあるのですが、バリデーションチェックなどの手間を考えるとプラグイン使ったほうが楽です。私はいつも「Advanced Custom Fields」を使ってます。
プラグインの使い方については割愛します。

項目 内容
name sat_template
ラジオボタン選択肢 1 : SATラボテンプレートA
2 : SATラボテンプレートB
3 : SATラボテンプレートC

テンプレート作成

テーマフォルダの下にそれぞれのテンプレートを作成します。本記事ではそれぞれ以下のようにします。

テンプレート パス
SATラボテンプレートA ~/theme/sat/satlabo-template-a.php
SATラボテンプレートB ~/theme/sat/satlabo-template-b.php
SATラボテンプレートC ~/theme/sat/satlabo-template-c.php

各テンプレートには、先頭に以下のようなコメントを記載しておきます。

/**
 * Template Name: SATラボテンプレートA
 * Template Post Type: sat_labo
 */

Template Name：テンプレート名を記載します。
Template Post Type：使用するカスタム投稿タイプを記載します。

あとは自由に作ってください。

記事保存時にラジオボタンで選択されたテンプレートを適用させる

functions.php に以下記載します。

/**
 * 記事保存後に独自の操作をする
 */
add_action('save_post', 'custom_save_post');
function custom_save_post($post_id) {
    remove_action('save_post', 'custom_save_post');
    // カスタム投稿タイプ
    global $post_type;
    if ($post_type == 'sat_labo') {
        // ラジオボタンで選択したテンプレートを取得
        $template = get_post_meta($post_id, 'sat_template', true);
        $templates = array(
            1 => 'satlabo-template-a.php',
            2 => 'satlabo-template-b.php',
            3 => 'satlabo-template-c.php',
        );
        if ($template && array_key_exists($template, $templates)) {
            $templateName = $templates[$template];

            // ここでテンプレートを選択したものに更新する
            if (!add_post_meta($post_id, '_wp_page_template', $templateName, true)) {
                update_post_meta($post_id, '_wp_page_template', $templateName);
            }
        }
    }

    add_action('save_post', 'custom_save_post');
}

早速記事を作成する

ここまでやって、早速記事を作って保存します。
記事画面を見てみると、選択したテンプレートで表示されているはずです。