WordPressで再利用ブロック(パターン)をショートコードで表示する方法

※当サイトは、Google Adsense、Amazonアソシエイト、各種アフィリエイト広告を利用しています。また、製品PRを行っている場合があります。

WordPressの再利用ブロック(パターン)は、functions.phpにコードを追加することでショートコード化して出力できます。

ブロックエディタで構築したい箇所があっても、
テーマの仕様などによっては、
そのエリアはブロックエディタを扱うことが出来ないというときがあります。

例えば、ウィジェットだけ
クラシックウィジェットになってるテーマとか
TCD系のテーマは、トップページは、
型に沿った構築しかできず
独自のエディタ機能しか使えないものなどがあるとか
クラシックエディタしか扱えなかったりする場合があります。

例:
・クラシックウィジェットしか使えないテーマ
・TCDテーマのトップページ
・クライアントが編集できないエリア
・定期更新パーツ(バナー・お知らせなど)

そんな時に、再利用ブロックで出力したいものを作成して
それをショートコード化して
クラシックウィジェットやクラシックエディタで
そのショートコードで出力してあげることで
再現することが出来ます。

再利用ブロックは内部的には「wp_block」という投稿タイプとして
保存されているため、その内容を取得して出力する仕組みが可能なのです。

ただし、欠点として、
ブロックエディタ用のCSSは、表示場所によっては読み込まれないため、
ショートコードで出力するとスタイルが適用されない場合があります。

CSSが反映されない場合は、テーマ側のCSSを追加するか、追加CSSでスタイルを上書きしてください。

簡単なものであれば特に問題はないですが、
複雑なものの場合、そこの手間がかかります。

それでも、クライアントのご要望などで
どうしても再現しなければならない時などは
この方法が重宝します。

① functions.phpにコード追加
② 再利用ブロックのIDを確認
③ ショートコードで呼び出し

それでは、実際の手順を順番に見ていきます。

再利用ブロック(パターン)が表示されていない場合

再利用ブロック(パターン)が、管理画面に表示されていない場合、
function.phpに、以下コードをコピペして保存&反映することで表示されます。

function my_add_reuse_list_admin_menu() {
  add_menu_page( '再利用ブロック', '再利用ブロック', 'manage_options', 'edit.php?post_type=wp_block', '', 'dashicons-screenoptions', 20 );
}
add_action( 'admin_menu', 'my_add_reuse_list_admin_menu' );

ちなみに再利用ブロック(パターン)は、投稿または固定ページの編集画面内
右上の縦の「…」をクリックして「パターンの管理」より
開くことが出来ます。

あるいは、管理画面の「外観>パターン」から開くことが出来ます。

再利用ブロック(パターン)のIDを確認する

続いて、再利用ブロック(パターン)より、
新規追加で専用のパターンを作成します。

とりあえず適当に作って保存します。

そして、そのページのアドレスを確認し
記事IDをメモしておきます。

「post=●●」または「postId=●●」の●●のところの数字が
記事IDです。

再利用ブロック(パターン)をショートコード化設定

function.phpにて、下記コードをコピペ&保存して反映することで
再利用ブロック(パターン)がショートコードで出力することが出来るようになります。

function my_reuse_block_shortcode($atts){
  $atts = shortcode_atts([
    'id' => ''
  ], $atts);

  if(empty($atts['id'])) return '';

  $reuse_block = get_post($atts['id']);
  if(!$reuse_block) return '';

  return apply_filters('the_content', $reuse_block->post_content);
}
add_shortcode('reuse-block','my_reuse_block_shortcode');

ショートコードで再利用ブロック(パターン)を出力してみる

あとは、クラシックエディタなどで、
下記のようなショートコードを張り付けてあげることで
再利用ブロック(パターン)で作ったものが出力されるようになります。

[reuse-block id="3440"]

IDの部分は、ご自身のものと変えてください。

もしこれでデザインが崩れるようであれば、
再利用ブロック(パターン)で作成したデザインが反映するよう
CSSで調整してください。

この方法を使うと、例えば、定期的に変更したい内容を
再利用ブロック(パターン)で必要箇所を修正することで
メインページをいじらずにそのパーツだけ変更できるので
そのページ全体のレイアウトを壊されずに
必要箇所だけ調整できるので良かったりします。

「テーマの制約でブロックが使えない」と諦めていた部分も、この方法で柔軟にカスタマイズできます。

よくあるミス

もしうまくいかない場合は、以下をチェックしてみてください。

・IDを間違えている
・functions.phpの保存ミス
・キャッシュが残っている(表示されない場合)

お試しください。

\応援ありがとうございます🌿/
各種ブログランキングに参加しています✨

アバター画像

Hiro先生

おかげさまで豊かさに満たされた日々を
今、素敵に生きています
感謝の種まきによって人生が根底から変わることを知って
素敵なご縁の輪を広げながら、
望む未来を叶える、奇跡を起こし続けるお手伝いをしています。

記事本文: 357