Lazy Blocksで勝手に出力されるdivを制御する(消す)方法について、色々試してみた

2021.05.11

PHP/WordPress/プラグイン

(追記 2022.2.9)めちゃくちゃ簡単にできるコードが見つかりました。

コードを探しているだけなら、こちらの方が参考になります。

Lazy Blocksで勝手に出力されるdivをまとめて消す(改)

Lazy Blocksのdiv

Lazy Blocksでは何も指定しないとLazy Blocksで作ったコンテンツを表示させる時、独自にdivで囲ってきます。
前回のLazy Blocksの解説でもさらっと触れています。(Lazy Blocksの使い方 vol.3

今回はこのdivを消す方法をいくつか考えてきました。
独自で考えたものなので、効率とかそういうのはご了承ください。

Lazy Blocksの標準出力

さて、Lazy Blocksでは独自にdivで囲ってくると言いましたが、実際どうなっているのか見てみましょう。

勝手に出力されるdivの画像

まぁ、、ぶっちゃけこのままでもほとんど問題ないんですけどねぇ。。

できれば無駄な出力をしたくない!

そこで色々考えてきました。

Lazy Blocks公式仕様のdivの消し方。

まずは公式が提示しているやり方。

functions.php

add_filter( 'lazyblock/スラッグ名/frontend_allow_wrapper', '__return_false' );

これは前回のLazy Blocks解説でも触れました。

公式ドキュメントでの紹介ページ

div削除前後比較

すごく簡単だと思います。

が!ここで問題が出てきます。

(これ、Block増やすたびに違うスラッグ入れないといけないの?)

functions.php

add_filter( 'lazyblock/スラッグ名1/frontend_allow_wrapper', '__return_false' );
add_filter( 'lazyblock/スラッグ名2/frontend_allow_wrapper', '__return_false' );
add_filter( 'lazyblock/スラッグ名3/frontend_allow_wrapper', '__return_false' );
add_filter( 'lazyblock/スラッグ名4/frontend_allow_wrapper', '__return_false' );
.
.
.

これはちょっと嫌ですね。。といっても公式的にはまとめてやるやり方は提示していないわけですから、追加するたびに行うのがベストなんだと思います。

まぁスラッグ名を新規配列にいれて回す方法など工夫の仕方もあると思います。

でも人間は楽したい生き物です。できるならまとめて消したい。

まとめてdivを消す方法その1:投稿単位で消す

ここからは自作のコードです。自己責任でお願いします。

functions.php

if(!is_admin()) {
  function remove_lazyblocks_div(){
    $args = array(
      'posts_per_page' => -1,
      'post_status' => 'publish',
      'post_type' => 'post' //ここを各自変更します。複数やpage属性設定可
    );
    $all_posts = get_posts($args);
    foreach( $all_posts as $single_page ) {
      if (has_blocks( $single_page->post_content )){
        $single_page = parse_blocks( $single_page->post_content );
        $block_arr = array_unique($single_page);
        foreach($block_arr as $content){
          add_filter( $content['blockName'] . '/frontend_allow_wrapper', '__return_false' );
        }
      }
    }
  }
  add_action('wp','remove_lazyblocks_div');
}

さて、これは前回も解説させていただきました。

投稿や固定ページ、カスタム投稿など全てのブロックを持つページからブロックのスラッグを取得し、公式が紹介したフィルターをスラッグごとに適用させています。

これはスラッグがいくら増えようが、勝手にフィルタリングしてくれます。

しかしデメリットもあります。
カスタム投稿を増やした場合そのカスタム投稿のスラッグを新たに指定しないと新規カスタム投稿では使えません。

カスタムブロックのスラッグを全て追加していくよりはましですが。。

まとめてdivを消す方法その2:名前とスラッグを一緒にする

詳しい話はデータベースを絡めて説明しないといけないので割愛します。

簡単に説明するならLazyBlocksは新しいブロックを保存した時、スラッグ名をシリアライズ化するため、データベースからスラッグの取得は不可能です。
しかし、名前(データベース内ではpost_title)は保存されるため、それらをスラッグ名と同じにした上で全て取得し、繰り返しフィルターをかけてやればまとめてdivが消せるという寸法です。

functions.php

if (!is_admin()) {
  function remove_lazyblocks_div(){
    $args = array(
      'post_type' => 'lazyblocks',
      'posts_per_page' => -1,
    );
    $the_query = new WP_Query($args);
    if ($the_query->have_posts()){
      while ($the_query->have_posts()){
        $the_query->the_post();
        $slug_name = get_the_title();
        add_filter( 'lazyblock/'. $slug_name .'/frontend_allow_wrapper', '__return_false' );
      }
    }
  }
  add_action('wp','remove_lazyblocks_div');
}

get_the_title()を使って、Lazy Blocksのタイトル名を取得できます。

「ブロック名とスラッグ名一緒にするだけじゃん!簡単じゃん!」と思われそうですがこれにもデメリットがあります。

スラッグ名には日本語が使えません。そうするとブロック名にも日本語が使えず、ブロック選択画面では英単語が並ぶことになります。

英語が並んだブロック製作画面

個人で製作する分では何も問題ないのですが、クライアントさんが自分たちも使うとなったら日本語名のブロックでないと色々面倒臭いですね。。
(日本語使えないんすよ〜と言ってしまうのはアリかもしれない)

まとめてdivを消す方法その3:プラグイン内部の関数を使っちゃう

どれもデメリットはありますね。。そこで!内部の関数を使ってしまう方法です!

プラグイン内部の関数を使うことになるので、アップデートなどで使えなくなる場合があります。またちょっとだけクラス構文にも触れます。

functions.php

if (!is_admin()) {
  function remove_lazyblocks_div(){
    $lzb = new LazyBlocks_Blocks();
		$lzb = lazyblocks()->blocks()->get_blocks();
		foreach ($lzb as $value){
			add_filter( $value["slug"] . '/frontend_allow_wrapper', '__return_false' );
		}
  }
  add_action('wp','remove_lazyblocks_div');
}

簡素になりましたね。ちょっとだけ解説します。

LazyBlocks_Blocksというクラスを初期化します。

$lzb = new LazyBlocks_Blocks();

ブロック情報を取得します。

$lzb = lazyblocks()->blocks()->get_blocks();

取得したスラッグを全てフィルターにかけます。

foreach ($lzb as $value){
  add_filter( $value["slug"] . '/frontend_allow_wrapper', '__return_false' );
}

LazyBlocks_Blocksというクラスってなんやねんという話になるわけですが、プラグイン内部を覗くとわかります。

plugins/lazy-blocks/classes/class-blocks.php

プラグインの中身

この中にget_blocks()という、Lazy Blocksのブロックたちの情報を得ることのできるメソッドが存在します。それを利用するためのLazyBlocks_Blocksです。

ちなみにlazyblocks()->blocks()->get_blocks()としているのは、内部的にもこのように取得しているので拝借しました。

get_blocks()だけだとjsonを配列形式に直したものを取得できます。しかし連想配列名にコロンが含まれているため、直したりするのは面倒臭すぎますね。。

最後に

今回はLazy Blocksで勝手に出力されるdivを制御する(消す)方法について、色々検証してみました。

どれも一長一短という感じですかね。サイトの見栄えに問題がないのなら好きな消し方で大丈夫だと思います。
というかそもそも消さないという手段でも問題ないと思います。

最後のやり方に関しては、勝手にクラス使っていいのか疑問が残りますが、セキュリティ的に問題がなければヨシ!。。。とはいきませんね。。
必ず自己責任でお願いします。

一応、Lazy Blocksの作者的には「まぁ、いつかその機能つくるかもね〜」と発言してた(と思う)のであんまりいじりたくない人は、ゆっくり待ってましょう。