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