【Cocoon】カスタマイズでパターン（再利用ブロック）の管理画面を追加する

2023年11月7日2023年11月13日

この記事では、パターン（旧再利用ブロック／ブロックパターン）の管理画面をWordPressの管理メニューに追加する方法について、くわしく解説していきます。

テーマはCocoonを対象としています。

「CTRL」＋「D」を押すだけで、当サイト【還じいブログ】の記事がブックマークできます！

一度作成したブロック（パターン）を他の記事でも使い回せるブロックを利用すると、記事を非常に効率よく書くことができて便利です。

使い回しができるブロックには、以下のものがあります。

「同期パターン」（旧再利用ブロック）
「非同期パターン」（ブロックパターンと同等）

要確認

【重要】「再利用ブロック」が「同期パターン」に変更されました（タップで詳細参照）

WordPress6.3から「再利用ブロック」は「同期パターン」に変更されました。
※ブロックパターンは「非同期パターン」と同等。

スクロールできます

	WordPress6.3から	WordPress6.2まで
同期	同期パターン	再利用ブロック
非同期	非同期パターン	パターン（ブロックパターン）

パターンを同期／非同期に統一

そして、パターン作成時に「同期／非同期」を選択できるようになりました。

同期／非同期パターンには管理画面がありますが、WordPressの標準状態ではメニューにこの管理画面が表示されません。

別な手順でパターンの管理画面を開くことになるので、ちょっと面倒なんですね。

還じい

管理画面開きたいだけなのに、ちょっと面倒なんです～
1. 適当な投稿編集画面を開く。
2 右上の三点リーダーを押す。
3. メニューから「パターンの管理」を選択。

Cocoonは、管理画面に関してはWordPress標準のままなので、メニューからパターンの管理画面を開くことができません。
※SWELLは独自実装によりメニューから開くことが可能。

この記事では、Cocoonでカスタマイズを行い、メニューにパターンを追加することで簡単にパターン管理画面が開けるようにします。

また、ショートコードが利用できるカスタマイズも同時に行います。

Cocoonで同期／非同期パターンの管理画面を開くのが簡単になるので、使い回しのブロックをよく使っている人は、ぜひ参考にしてください！

ブロックエディタ関連

ブロックエディタを使いこなして記事作成の時間を短縮！

ショートカットで効率UP: ブロックエディタのショートカットまとめ（早見表PDFあり）
「＋」ボタンを使わずに簡単にブロック挿入する方法
パターンで使い回しを効率化: 同期パターンと非同期パターンの違い
 同期パターン／非同期パターンの使い方
 ブロックパターンの使い方（Cocoon編）

子テーマのphpファイルをカスタマイズ

パターンのリンクをメニューに表示させるコードと、ショートコードが使えるようにするコードを、子テーマのfunctions.phpに追加していきます。

管理画面メニュー「外観」の「テーマファイルエディタ―」（①）をクリック。

「Cocoon Child」（①）が選択されていることを確認し、「Theme Functions」（②）をクリック。

まず、以下をタップしてカスタマイズコードをコピーします。
次に、エディタ画面の最後に貼り付けて「ファイルを更新」をクリック。

カスタマイズコード（タップで展開）

↓のコードをドラッグしてコピー

// パターン（同期／非同期パターン）の管理画面をメニューに追加する
add_action( 'admin_menu', function () {
  add_menu_page(
    'パターン',               	    // ページタイトル
    'パターン',               	    // メニュータイトル
    'manage_options',               // 管理者メニューに表示（権限付与）
    'edit.php?post_type=wp_block',  // 管理メニュー表示用スラッグ（アクセス用URL）
    '',                             // コンテンツ表示用の呼び出し関数（なし）
    'dashicons-image-rotate',       // メニューの表示アイコン（矢印回転アイコン）
    21                              // メニューの表示順番（固定ページの下）
  );
});

// パターンのショートコードが利用できるようにする
//   ■ショートコード（例） → [pat-block id="128"]
add_shortcode('pat-block', function ($atts){
  $pat_block = get_post($atts['id']);
  $pat_block_content = apply_filters( 'the_content', $pat_block->post_content);
  return $pat_block_content;
});