WordPress5.0から変更となった投稿編集画面の動作。ブロックエディタといって、基本的にプレビューすることなくページを作るために採用された、使ってみると本当に便利なエディタです。
また、テーマやプラグインではブロックを使った編集に対応するため、より便利なブロックが簡単にできるような機能が追加されていたり、追加することができます。
しかしながら、テーマやプラグインによって追加される便利なブロック(カスタムブロック)は、当然ながらそれに対するデザイン要素であるCSSや何かの動きを加えるJSなどがページの読み込みと同時に追加で読み込まれることになります。
それらは、どのページでも問題なく動作するよう、使用しているかどうかに関わらず、すべてのページで出力されます。
さらにCSSやJSの内容、ブロックの数によっては結構な処理を行うものがあり、実際にそのページで使用していない処理をさせることで、表示速度を低下させたり、サーバーの負荷を上げたりする原因になることもあります。
本ページでは、これを回避させるため、「〇〇のブロックを使っていたら..」という条件を加えて、不要な処理や読み込みを制御する方法を紹介します。
ちなみにブロックエディタ以前でよく使われていて、ブロックエディタでも使えるようになっているショートコードがあるかないかを判別して処理を分ける場合は、特定のショートコードが本文内にあるかどうかによって処理を分岐する方法で紹介していますので、そちらもぜひ一読ください。
本ページ掲載のコードを使用するときは
本ページで掲載しているコードは、以下に了承した上で使用ください
- コードは商用・非商用問わず自由に使っていただいて構いませんが、コード追加による不具合やトラブルが発生しても当方では一切責任を負いません
- コードは有効化しているテーマのfunctions.php、style.cssなどへ追加することで機能します。それらのファイルへの変更を行うことに不安のある方は使用しないでください
- コードは本ページの公開日時点で私の環境において動作したものです。WordPressバージョン他環境の違いによって動作しないことがあります
- コードは、セキュリティ、コードの正確さなどにおいて完全なものではありません。中には紹介するコードを簡略化するために省略している部分があるものもありますので、ご自身でコードを十分に検証し、必要な部分の編集を行った上で使用するようにしてください
- 掲載しているのは参考コードです。自身の環境に合わせるための編集はご自身で対応いただく必要があります(コメント欄等から質問いただいても基本回答は致しません)
- 掲載しているコードの転載を禁じます(SNSで紹介いただいたり、本ページへのリンクを張っていただくことは大歓迎です)
特定のブロックが存在するかどうかでの処理分岐方法
条件分岐するブロックの名前(ネームスペース/ブロック名)を調べる
ブロックの判別をするためには、ブロックのネームスペースとブロック名を調べる必要があります。
これは、単純にプラグインを使うのがベストでしょう。
おすすめは、Find My Blocksです。
インストールと有効化したら、「ツール」→「Find My Blocks」を開くと、あらかじめWordPressに備わっている以外のブロックの一覧がずらっと表示されます。
その中から、制御の必要なブロックのネームスペース/ブロック名をどこかにコピーしておきましょう。
「has_block」関数を使った一番簡単な条件分岐方法
WordPressの機能である「再利用ブロック」を使わないサイトでの条件分岐はここで紹介するコードで実現できます。
逆に「再利用ブロック」内のブロックも含めて条件分岐する場合には、後述する方法を用いてください。
「再利用ブロック」を使わない場合には以下のコードをテーマのfunctions.phpへ挿入し、必要に応じて変更していきます。
function ユーザー定義関数名(){
if ( has_block( 'ネームスペース/ブロック名' ) ) {
//ブロックが存在する場合の処理
}else{
//ブロックが存在しない場合の処理
}
}
ユーザー定義関数は他の文字列と重複しない半角英数字と「_」を使った任意の名前を付けます。
ネームスペース/ブロック名は前述の方法で調べたものを入れます。
例として、ブロックがない場合に特定のスクリプトとCSSを読み込まなくするコードを紹介しておきます。
function ユーザー定義関数名(){
if ( has_block( 'ネームスペース/ブロック名' ) ) {
//ブロックが存在する場合の処理
}else{
//ブロックが存在しない場合の処理
wp_dequeue_script('スクリプトのID');
wp_dequeue_style( 'CSSのID' );
}
}
add_action('wp_enqueue_scripts','ユーザー定義関数名');
スクリプト・CSSのIDは、出力されているページのソースを開いて調べてください
再利用ブロックにあるブロックも含めて条件分岐する方法
こちらは結構複雑なコードで、実際は公式ページhas_blockに掲載されていたもののユーザー定義関数名を変更しただけのものになります。
以下のコードをテーマのfuncitons.phpへ追加します。
/***** 特定のブロックが存在するか *****/
/* if(ha_enhanced_has_block('ブロック名'))で条件分岐 */
function ha_enhanced_has_block( $block_name ) {
if ( has_block( $block_name ) ) {
return true;
}
if ( has_block( 'core/block' ) ) {
$content = get_post_field( 'post_content' );
$blocks = parse_blocks( $content );
return ha_search_reusable_blocks_within_innerblocks( $blocks, $block_name );
}
return false;
}
/* 再利用ブロックを含めてブロックを探す */
function ha_search_reusable_blocks_within_innerblocks( $blocks, $block_name ) {
foreach ( $blocks as $block ) {
if ( isset( $block['innerBlocks'] ) && ! empty( $block['innerBlocks'] ) ) {
habone_search_reusable_blocks_within_innerblocks( $block['innerBlocks'], $block_name );
} elseif ( 'core/block' === $block['blockName'] && ! empty( $block['attrs']['ref'] ) && has_block( $block_name, $block['attrs']['ref'] ) ) {
return true;
}
}
return false;
}
コード追加後、以下のようにして、条件分岐を行います。
function ユーザー定義関数名($content){
if(ha_enhanced_has_block( 'ネームスペース/ブロック名' )){
$find_block = 'ブロックはあります';
return $find_block . $content;
}else{
$no_block = 'ブロックは存在しません';
return $no_block . $content;
}
}
add_filter('the_content','ユーザー定義関数名');
上記のコードで、適当なユーザー定義関数名を与え、ネームスペース/ブロック名を指定すれば、指定したブロックが存在する投稿・固定ページでは本文冒頭に「ブロックはあります」と表示され、なければ「ブロックは存在しません」と表示されるようになります。
上に記載したコードで条件判別用の「ha_enhanced_has_block」という独自関数を作り、下のコードにあるようにif(ha_enhanced_has_block( ‘ネームスペース/ブロック名’ ))で条件分岐をするといった形で使用します。
一旦別の関数(ha_enhanced_has_block)にするのは、通常の「has_block」関数では再利用ブロックまでを参照してくれないので、一旦再利用ブロックまでを含めてページ内のブロックを調べ、改めて関数(ha_enhanced_has_block)にして作り直すということが必要があるためです。
現時点でもっと簡単に分岐できるようにという予定はないようですので、この方法で行うしかなさそうですが、一度作っておけば「ha_enhanced_has_block」は使いまわしができますから、追加しておいて損はないと思います。