IMUZA.com

Xserver<<WordPress(ConoHa)<<はてなブログ

ホーム / Google / WordPress:ブロックエディタ記事にAdSenseを入れる

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

2023/06/7 Google, Wordpress

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

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

render_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”] の値です。

AdSense の挿入

ということであれば、$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 となっています。

すいか 完熟 高級 赤秀Sランク1玉 約1.2kg~1.8kg ※野菜ソムリエ監修 熨斗対応可能 (旬の時期に合わせて地域...

すいか 完熟 高級 赤秀Sランク1玉 約1.2kg~1.8kg ※野菜ソムリエ監修 熨斗対応可能 (旬の時期に合わせて地域…

Amazon
WordPress:リビジョン削除、回数制限
WordPress:the_date()で日付が表示されない
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/09/14

GDPRを設定する

2023/08/30

scroll-behavior:smoothは履歴に残る

2023/08/22

要素がトップにきたことを感知する-IntersectionObserver

2023/08/8

ホームページとは別に投稿一覧ページをつくる方法-WordPress

2023/07/28

WordPress:シングルページにループはいらない

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ215
  • WebTips110
  • javascript100
  • Joomla!88
  • Wordpress78
  • Windows68
  • CSS64
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Google36
  • Plamo33
  • はてなプラグイン25
  • php23
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • Git入門6
  • ConoHa WING6
  • genesis6
  • Python5
  • Android5
  • PC全般4
  • Facebook4
  • スマートフォン4
  • Xserver3
  • Firefox3
  • 静的サイトジェネレーター3
  • SSD3
  • Docker3
  • Blankslate3
  • Twitter2
  • Mactype2
  • GitHub2
  • youtube1
  • はてなブクマ1
  • rails入門1
  • 映画1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Related Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2023 · IMUZA.com