WP_HTML_Tag_Processorの使い方

2023 12/18

2023年12月18日

実際に使用した商品をレビューしています。アフィリエイト広告リンクを含みます。

初心者

WP_HTML_Tag_Processorって何？
どんなことができるの？
コードの書き方を知りたい…

そんな疑問に答えます。

WP_HTML_Tag_ProcessorはWordPress6.2に実装予定の新機能です。GitHubを眺める限り、正規表現を書かずに出力HTMLを書き換えることができるらしく、かなり便利そうだなと感じました。

WordPress6.2-beta2環境でWP_HTML_Tag_Processorを使ってみた感想と、サンプルコードをいくつか紹介します。

この記事を書いた人

IT業界24年のベテランエンジニア
WordPressで企業サイトの構築しています
取り扱いWordPressテーマは300個オーバー

SWELLマニアのかんたです

【概要】WP_HTML_Tag_Processorのサンプルコード

現時点では公式サイトにマニュアルがないので、「こんな感じでコードを書いたら動いたよ」程度の内容をシェアします。

環境

WordPress：6.2-beta2
テーマ：無料テーマArkhe

クラスの追加＆削除

指定の要素に任意のクラスを追加するといったケースのカスタマイズです。

クラスの追加コード

カバーブロックのインナー（wp-block-cover__inner-container）に新規クラス（new-test）を追加する場合の書き方です。

function add_test_class_to_block( $block_content, $block ) {
  if ( 'core/cover' === $block['blockName'] ) {
		$w = new WP_HTML_Tag_Processor($block_content);
		$w->next_tag(
			array(
				'tag_name'   => 'div',
				'class_name' => 'wp-block-cover__inner-container',
				)
			);
			$w->add_class('new-test');
	
	return $w->get_updated_html();
	  
  }
  return $block_content;
}
add_filter( 'render_block', 'add_test_class_to_block', 10, 2 );

WP_HTML_Tag_Processor部分の解説です↓

//↓$block_contentを対象にする
$w = new WP_HTML_Tag_Processor($block_content);

//↓div要素でwp-block-cover__inner-containerクラスのものを指定
$w->next_tag(
			array(
				'tag_name'   => 'div',
				'class_name' => 'wp-block-cover__inner-container',
				)
			);

//↓処理。このサンプルではnew-testクラスを追加
$w->add_class('new-test');

//↓$block_contentを上書き
return $w->get_updated_html();

next_tag()はクラス名を指定せず、要素だけを指定することも可能です↓

$w->next_tag('div');
$w->next_tag('img');
$w->next_tag('video');

クラスの削除コード

カバーブロックのインナー（wp-block-cover__inner-container）のクラスを削除する書き方です。

function add_test_class_to_block( $block_content, $block ) {
  if ( 'core/cover' === $block['blockName'] ) {
		$w = new WP_HTML_Tag_Processor($block_content);
		$w->next_tag(
			array(
				'tag_name'   => 'div',
				'class_name' => 'wp-block-cover__inner-container',
				)
			);
			$w->remove_class('wp-block-cover__inner-container');
	
	return $w->get_updated_html();
	  
  }
  return $block_content;
}
add_filter( 'render_block', 'add_test_class_to_block', 10, 2 );

属性の追加＆削除

指定の要素に任意の属性を追加したり、属性を削除するといったケースのカスタマイズです。

属性の追加コード

カバーブロックのアウター（wp-block-cover）に、id='test'を設定する書き方。

function add_attribute_to_block( $block_content, $block ) {
  if ( 'core/cover' === $block['blockName'] ) {
		$w = new WP_HTML_Tag_Processor($block_content);
		$w->next_tag(
			array(
				'tag_name'   => 'div',
				'class_name' => 'wp-block-cover',
				)
			);
			$w->set_attribute('id', 'test');
	
	return $w->get_updated_html();
	  
  }
  return $block_content;
}
add_filter( 'render_block', 'add_attribute_to_block', 10, 2 );

属性の削除コード

カバーブロックの背景に動画を設定した場合、video要素からloop属性を削除する書き方。

function remove_attribute_to_block( $block_content, $block ) {
  if ( 'core/cover' === $block['blockName'] ) {
		$w = new WP_HTML_Tag_Processor($block_content);
		$w->next_tag('video');
		$w->remove_attribute('loop');
		return $w->get_updated_html();  
  	}
  return $block_content;
}
add_filter( 'render_block', 'remove_attribute_to_block', 10, 2 );

videoからloop属性を削除することで、動画のリピートが停止されます。

【応用編】汎用テーマでのカスタマイズ

Web制作事業者だと、SWELLやArkhe、Snow Monkeyといった汎用テーマでサイト制作をすることがあります。汎用テーマでWP_HTML_Tag_Processorを使う場合のサンプルコードをいくつか紹介します。

カスタムブロックのHTMLを編集する方法

カバーブロックなどのコアブロックではなく、テーマに内包されているカスタムブロックについてです。

例えば人気テーマSWELLにはFAQブロックというカスタムブロックがあります。その名の通り、よくある質問を作成する機能です。このブロックのHTMLを書き換えるといったケースにもWP_HTML_Tag_Processorが利用できます。

カスタムブロックのHTML構造

まずはSWELLのFAQカスタムブロックの出力です。

<dl class="swell-block-faq" data-q="col-text" data-a="col-text">
	<div class="swell-block-faq__item">
		<dt class="faq_q">質問</dt>
		<dd class="faq_a"><p>回答</p></dd>
	</div>

	<div class="swell-block-faq__item">
		<dt class="faq_q">質問</dt>
		<dd class="faq_a"><p>回答</p></dd>
	</div>
</dl>

簡単な例ですが、dl.swell-block-faqにtestクラスを設定します。

<dl class="swell-block-faq" data-q="col-text" data-a="col-text">
 
//↓testクラスを追加
<dl class="swell-block-faq test" data-q="col-text" data-a="col-text">

’test’クラスを追加するコード

function render_swell_faq( $block_content, $block ) {
    if ( 'loos/faq' === $block['blockName'] ) {
		$w = new WP_HTML_Tag_Processor($block_content);
		$w->next_tag(
			array(
				'tag_name'   => 'dl',
				'class_name' => 'swell-block-faq',
				)
			);
			$w->add_class('test');
	
	return $w->get_updated_html();
	  
  }
  return $block_content;
}
add_filter( 'render_block', 'render_swell_faq', 10, 2 );

テンプレートの内容を書き換えるフィルターフックのとの併用

Snow MonkeyやArkheといったテンプレートの内容を書き換えるフックがあるテーマでのカスタマイズです。Snow Monkeyならsnow_monkey_template_part_render、Arkheならarkhe_partと併用することで対象のテンプレートを指定して処理をすることができます。

かんた

無料テーマのArkheを例にカスタマイズのサンプルコードを紹介します。

新規クラスを追加するコード

post_list/style/normal.phpテンプレートを指定して、クラス名がp-postList__bodyのdiv要素にwp-fooクラスを付ける場合の書き方です。

//↓ Arkhe固有のコードです。カスタマイズ対象のテンプレートを指定しています
add_action('arkhe_part__post_list/style/normal',function ($parts_content) {


//↓ アーカイブページなら～の条件です
	if ( is_archive() ){　


//↓ 書き換えるHTMLを定義
		$w = new WP_HTML_Tag_Processor($parts_content);
		$w->next_tag(
			array(
				'tag_name'   => 'div',
				'class_name' => 'p-postList__body',
			)
			);

//↓ 処理内容。今回はwp-fooクラスを付ける
		$w->add_class( 'wp-foo' );
	
//↓ 出力HTMLを更新
	return $w->get_updated_html();
	} 

}, 10, 2 );

特定のクラス名のあるブロックのみを対象にする場合

「特定のブロック」かつ「特定のクラス名を持っている」という条件付きで処理するケースです。

例えば、「h2見出しブロック」かつ「test」というクラス名を持っているブロックのみを対象にして、wp-block-headingクラス名を削除するといったカスタマイズをするには次のように書きます↓

サンプルコード

function customize_heading_block_output($block_content, $block) {
    if($block['blockName'] === 'core/heading'  && isset( $block['attrs']['className'] ) && 'test' === $block['attrs']['className']  ) {
		 $w = new WP_HTML_Tag_Processor($block_content);
		 $w->next_tag ('h2');
		 $w->remove_class('wp-block-heading');
		return $w->get_updated_html();  
  	}
  return $block_content;
}
add_filter('render_block', 'customize_heading_block_output', 10, 2);