WordPress：ブロックエディタ記事にAdSenseを入れる

ブロックエディタで書かれた記事にフィルターフック render_block_{$this->name} を使って AdSense を挿入します。

• render_block_{$this->name}
• AdSense の挿入

01render_block_{$this->name}

これまではフィルターフック the_content を使って全コンテンツから hタグを検索してその前に AdSense を挿入していたんですが、ブロックエディタで書かれた記事であれば、render_block_{$this->name} を使えば簡単に AdSense のコードを挿入できます。

• render_block_{$this->name}

apply_filters( "render_block_{$this->name}", string $block_content, array $block, WP_Block $instance )

このフィルターフックは、{$this->name} で指定する単一ブロックにフィルターをかけられます。$this->name はブロック名です。hタグの場合は、core/heading となります。

パラメータの $block_content は指定したブロックの文字列、$block はブロックのデータを配列で持っています。例えば画像であれば、

array(5) {
  ["blockName"]=>
  string(10) "core/image"
  ["attrs"]=>
  array(3) {
    ["id"]=>
    int(7470)
    ["sizeSlug"]=>
    string(5) "large"
    ["linkDestination"]=>
    string(4) "none"
  }
  ["innerBlocks"]=>
  array(0) {
  }
  ["innerHTML"]=>
  string(327) "
<figure class="wp-block-image size-large"><img src="http://localhost:8000/wp-content/uploads/2023/05/hamon-1024x576.jpg" alt="" class="wp-image-7470"/><figcaption class="wp-element-caption"><a rel="noreferrer noopener" href="https://hamon-movie.com/" target="_blank">波紋 ／ 監督：荻上直子</a></figcaption></figure>
"
  ["innerContent"]=>
  array(1) {
    [0]=>
    string(327) "
<figure class="wp-block-image size-large"><img src="http://localhost:8000/wp-content/uploads/2023/05/hamon-1024x576.jpg" alt="" class="wp-image-7470"/><figcaption class="wp-element-caption"><a rel="noreferrer noopener" href="https://hamon-movie.com/" target="_blank">波紋 ／ 監督：荻上直子</a></figcaption></figure>
"
  }
}

というデータを持っています。$block_content の方は、配列の [“innerHTML”] の値です。

02AdSense の挿入

ということであれば、$block_content の前に AdSense のコードを挿入すればいけるのではないかということでやってみました。

function imz_insert_adsense( $block_content, $block ) {
	$ads = <<< EOM
<div class="ads-before-h2">
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-1635719600228159" data-ad-slot="4785084320" data-ad-format="auto" data-full-width-responsive="true"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>
EOM;		
	$content = $ads . PHP_EOL . $block_content;
	return $content;
}
add_filter( 'render_block_core/heading', 'imz_insert_adsense', 10, 2 );

これで hタグの前に AdSense のコードが挿入されます。もちろん Javascript は別途 headタグ内などで読み込んでおく必要があります。また、h2タグに限定したい場合などは、配列 $block の [“attrs”][“level”] の値を読んで判定すればいいです。h3タグは 3 となっています。