カスタム投稿タイプを用いて「テンプレート機能」をWordPress標準化する方法

はじめに

以下の質問に回答します。

テンプレート機能の編集画面、使用可能機能について

テンプレート機能を活躍していきたいのですが、記事の編集画面とあまりに操作感が乖離していて使いづらいです。 記事の編集画面と近い画面、かつ使用可能な機能(リストなど)も同等にすることは難しいでしょうか？

wp-cocoon.com

Cocoonのテンプレート機能（Cocoon設定→テンプレート）は独自画面と独自テーブル（wp_cocoon_function_texts）で管理されています。

テンプレート文（定型文）を登録して使い回す方法

テーマ内に定型文を登録してショートコードで何度でも使い回す方法です。

wp-cocoon.com

一方、パターンはカスタム投稿タイプ（wp_block）で、WordPress標準の投稿一覧などから管理できます。

そこで、テンプレート機能もカスタム投稿タイプ（my_template）として、WordPress標準で管理するように変更します。

この記事では、この方法について説明します。

完成

使用方法

以下にショートコードを示します。

[my_template]

実装手順

以下のコードをfunctions.phpに追加します。

// カスタム投稿タイプを追加
add_action('init', function () {
  register_post_type('my_template', [
    'label'        => 'テンプレート',
    'public'       => false,
    'show_ui'      => true,
    'show_in_rest' => true,
    'supports'     => ['title', 'editor', 'revisions'],
    'show_in_menu' => false,
  ]);
});


// 管理画面にメニューを追加
add_action('admin_menu', function () {
  // 不要なサブメニューを削除
  remove_submenu_page('theme-settings', 'theme-func-text');

  // Cocoon設定にテンプレート一覧を登録
  add_submenu_page(
    'theme-settings',
    'テンプレート',
    'テンプレート',
    'manage_options',
    'edit.php?post_type=my_template'
  );
}, 20);


// 管理画面一覧にカラムを追加
add_filter('manage_my_template_posts_columns', function ($columns) {
  // サムネイル列を削除してショートコード列を追加
  unset($columns['thumbnail']);
  $columns['shortcode'] = 'ショートコード';

  return $columns;
});


// 管理画面一覧のカラムにデータを表示
add_action('manage_my_template_posts_custom_column', function ($column_name, $post_id) {
  if ($column_name !== 'shortcode') {
    return;
  }

  // ショートコードを設定
  $shortcode = '[my_template id="' . $post_id . '"]';
  ?>
  <input type="text" value="<?= esc_attr($shortcode); ?>" readonly onclick="this.select();" style="width: 100%; max-width: 160px; box-sizing: border-box;">
  <?php
}, 10, 2);


// ショートコードを追加
add_shortcode('my_template', function ($atts) {
  // 属性からテンプレートの投稿IDを取得
  $atts = shortcode_atts([
    'id' => 0,
  ], $atts);

  $id = intval($atts['id']);

  // IDなしは処理対象外
  if (!$id) {
    return '';
  }

  // テンプレート投稿を取得
  $post = get_post($id);

  // 対象外の投稿は処理対象外
  if (!$post || $post->post_type !== 'my_template') {
    return '';
  }

  $content = $post->post_content;

  // 自己参照するショートコードを置換
  $pattern = '{\[my_template[^\]]*?id=[\'"]?' . $id . '[\'"]?[^\]]*?\]}i';
  $content = preg_replace($pattern, '', $content);

  $content = shortcode_unautop($content);

  return do_shortcode(apply_filters('the_content', $content));
});

さいごに

今回紹介した方法を使えば、Cocoon独自のテンプレート機能をカスタム投稿タイプとしてWordPress標準の管理画面に統合でき、編集・管理の自由度を大きく向上させられます。

ただし、WordPress 6.5以降では「パターン（再利用ブロック）」機能が強化され、Cocoon 2.7.1からはpatternショートコードもサポートされるようになりました。
そのため、今後はテンプレート機能よりも、Gutenbergエディターが使えるパターン機能の活用を強くおすすめします。

本記事の方法はあくまで参考として、Cocoonの仕組み理解やカスタマイズ検証用途として活用してみてください。

なお、同様の仕組みでaffiショートコードにも対応可能です。
その際は、wp_cocoon_affiliate_tagsテーブルが使用されます。