Google AdSense広告をH2上に遅延挿入するWordPress実装法

2026.01.13

Google AdSenseが使えるようになってから自動広告を利用していました。自動広告にしておけば間違った広告の表示の心配がなく、規約違反の恐れがないからです。

しかし、広告を表示しているページをPageSpeed Insightで計測するとCLSの値が悪いページがありました。CLS(Cumulative Layout Shift)とは、ページの表示が完了するまでにレイアウトが変化することです。CLSの値が良くない原因はGoogle AdSenseを遅延読込しているせいでした。

ページに訪れてくれた方が、続きを読もうとしてスクロールする時点で初めてGoogle AdSenseを表示するコードが読み込まれまれ、広告が表示されます。スクロールした瞬間に広告が表示されるのは避けなければなりません。

そこで、遅延読み込みは維持してもファーストビューに広告を表示させないように、自動広告を辞めることにします。広告はH2タグの上に表示させます。

AdSenseをH2の上に表示させるには
AdSenseからコードを取得する
ページの読み込み速度対策で遅延読み込みさせる
functions.phpに追加するコード
- 広告を挿入する見出しについて

AdSenseをH2の上に表示させるには

2番目と最後のH2の上に表示させる。
ディスプレイ広告と記事内広告を使う。
スクロールで読み込ませる。（遅延読み込み）

各ページに広告を表示させるためのコードを書き加えるのは手間がかかります。そこで今回はfunctions.phpに追加するコードで広告を一括挿入します。挿入する場所は見出し「H2」の上とし、2番目と最後の見出しの上、2箇所に広告を表示させます。自分で指定する場合は、同じ広告が続かないように、ディスプレイ広告と記事内広告を交互に表示させると良いそうですが、今回は2箇所に表示させるので各1つを表示させます。

AdSenseのコードはスクロールによって読み込ませます。容量の大きな広告用のコードはページ表示の後回しにします。この時、1番目の見出しがファーストビュー内に表示される可能性があるので2番目と最後のH2の上に広告を表示させます。該当する見出しがない場合はエラーが出ないように処理します。

AdSenseからコードを取得する

まずは自動広告の中から投稿記事内に表示される広告を非表示にするよう、ページ内フォーマットに含まれる設定をオフに変更します。次に広告ユニットからディスプレイ広告と記事内広告のコードを取得します。

どちらの広告形式も下の画像のようなコードが表示されるのでこれを保存します。

上の画像のコードに含まれるの上のコードは、スクロールイベントによる遅延読み込みをさせます。このコードは広告が複数ある場合でも1回読み込ませれば良いです。また、自動広告を表示させるコードと同じものです。の下のコードをfunctions.phpのコードでH2の上に挿入します。

ページの読み込み速度対策で遅延読み込みさせる

下のコードをscriptタグで囲んでfootr.phpの1番下に加えるか、.jsの拡張子で保存してdefarで読み込ませます。ファイルに保存して読み込めば非同期で読み込めます。

var lazyloadads=!1;
window.addEventListener("scroll",(
    function(){
        (0!==document.documentElement.scrollTop && !lazyloadads || 0!==document.body.scrollTop && !lazyloadads) && (function() {
            var e = document.createElement("script");
            e.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXXXXXXX",
            e.crossOrigin = "anonymous";
            var t = document.getElementsByTagName("script")[0];
            t.parentNode.insertBefore(e,t);
        }(),
        lazyloadads = !0
        )
    }
),!0);

functions.phpに追加するコード

下のコードをfunctions.phpに追加します。

<?php
function add_ad_before_the_h2($content) {
    // 広告コードの定義
$ad = <<<EOF
//ディスプレイ広告
EOF;

$ad1 = <<<EOF
//記事内広告
EOF;

    // 投稿ページの場合、広告コードを挿入
    if(is_single()) {
        $h2s = array();
        preg_match_all('/<h2.*?>(.*?)<\/h2>/is', $content, $h2s);
            if (!empty( $h2s[0] )) {
            if (isset( $h2s[0][1] )) {
                $content = str_replace($h2s[0][1], $ad.$h2s[0][1], $content);
        }
     
        $last_h2 = $h2s[0][count( $h2s[0] ) - 1];
        $content = str_replace($last_h2, $ad1.$last_h2, $content);
            }
        }
        return $content;
}

// フィルターフックの追加
add_filter('the_content', 'add_ad_before_the_h2');
?>

EOFの間にはAdSenseのコードを加えます。上でも書きましたがの下のコードを下のように追加します。

$ad1= <<<EOF
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-XXXXXXXXXXXXXXXXXXX" data-ad-slot="XXXXXXXXXXX" data-ad-format="auto" data-full-width-responsive="true"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
EOF;

広告を挿入する見出しについて

2番目に広告を挿入するコードは下のものです。

if (isset($h2s[0][1])) {
         $content = str_replace($h2s[0][1], $ad . $h2s[0][1], $content);
  }

$h2s[0][1]だと2番めになり、$h2s[0][0]の場合は1番目になります。0が1番目、1が2番目で以降同じ法則です。これで、スクロール発火の遅延読み込みで、指定したH2の上にGoogle AdSenseによる広告が表示されるようになります。

今すぐ使えるかんたん　WordPress　やさしい入門［6.x対応版］

桑名由美著

AmazonスマイルSale

最後までお読みいただき、誠にありがとうございます。