WordPressのブロック出力のカスタマイズ

書籍P.113～で紹介したフィルターフックの仕組みを活用して、WordPressのブロック出力をカスタマイズしてみます。

ブロックのカスタマイズをしたいが、独自ブロックを作るほどではない、といった場合に役立ちます。

フックを探す

WordPress では、WP_Block クラスが用意されています。WP_Block クラスの中をフックを探していきましょう。フィルターフックは、apply_filters、アクションフックは _do_action_を探していきます。

そうすると、WP_Block::render の中に、

		$block_content = apply_filters( 'render_block', $block_content, $this->parsed_block, $this );

と、

		$block_content = apply_filters( "render_block_{$this->name}", $block_content, $this->parsed_block, $this );

が見つかりますね。これらを使うと、ブロック出力をカスタマイズできます。

ブロックごとのフィルターフックでカスタマイズする例

ブロックごとのフィルターフックでカスタマイズする場合は、WP_Block::render の中のフィルターフック

		$block_content = apply_filters( "render_block_{$this->name}", $block_content, $this->parsed_block, $this );

をつかいます。{$this->name} のところは、ブロック名になります。例えば core/image ブロックであれば、render_block_core/image となります。

↓ core/image ブロックに、class=“imageblock” を追加する例

// core/imageブロックにdiv追加
function ounziw_add_div_coreimage( $block_content ) {
	$format = '<div class="imageblock">%s</div>';
	return sprintf( $format, $block_content );
}

add_filter( 'render_block_core/image', 'ounziw_add_div_coreimage', 10, 1 );

元のブロック出力が $block_content です。sprintf()関数を使って、divタグをラップします。フィルターフック render_block_core/image で実行するので、core/image ブロックにのみ適用されます。

add_filter の3つ目の引数10は優先順位(少ないものから実行される。デフォルトは10)です。4つ目の引数1は、フックで実行する関数(ここではounziw_add_div_coreimage())に渡す引数の数です。

多くのブロックに一度にカスタマイズする例

出力をカスタマイズしたいブロックが少ない場合は、個別にブロック指定するほうが楽でしょう。一方、たくさんのブロックの出力をカスタマイズしたい場合は、この方法だと大変です。

多くのブロックに一度にカスタマイズするには、render_block フィルターフックが役立ちます。

WP_Block::render の中の

		$block_content = apply_filters( 'render_block', $block_content, $this->parsed_block, $this );

を見ると、最後の $this がブロックのデータが格納されているオブジェクトになっています。この中からブロック名を取得できます。

// ブロックにdiv追加
function ounziw_add_div( $block_content, $this_parsed_block, $this_block ) {
    $blockname = $this_block->name; // ブロック名
	$format = match ( $blockname ) { // ブロック名により振り分け　※ match はPHP8以降
		'core/image' => '<div class="image">%s</div>',
		'core/paragraph' => '<div class="paragraph">%s</div>',
		default => '%s',
	};
	return sprintf( $format, $block_content );
}

add_filter( 'render_block', 'ounziw_add_div', 10, 3 );

add_filter の4つ目の引数が3になっていますが、フックで実行する関数(ここではounziw_add_div())に渡す引数が3つだからです。

ounziw_add_div()関数は引数3つで、それぞれ render_block フィルターフックの $block_content, $this->parsed_block, $this に対応します。※$this->parsed_block は $this_parsed_block に、$this は $this_block に置き換えています($thisをそのままパラメータ名に使うのは不可)。

$this_block->name でブロック名を取得できます。matchはPHP8以降で使用できる構文です。if文のように振り分けできます。if文よりもスリムに書けることが多いです。

もし if を使った場合は以下のようになります。

if ( $blockname === 'core/image' ) {
    $format = '<div class="image">%s</div>';
} elseif ( $blockname === 'core/paragraph' ) {
    $format = '<div class="paragraph">%s</div>';
} else {
    $format = '%s';
}

match を使うと、振り分けルールが増えた場合でも、1項目1行ずつ記述すればOKです。(ifだと、elseif { … } を書く必要がある)

match の最後の default は、if構文のelseに相当するものです。どれにも当てはまらなかった場合に default が適用されます。

更新日: 2024年03月03日