WordPressにアドセンスのインフィード広告を設置する方法

少し前からアドセンスにインフィード広告という新しい形式が追加されました

下記の記事も見た気もするのですが、その時はなぜかスルーしてしまっていました

最近になって多くのブログのトップページの記事一覧リスト間に挿入されている広告を見た時に　何これ？　と思い調べるとインフィード広告という形式が7月ごろから使えるようになっていたのですね　(^_^;)

AdSense ネイティブ広告のご紹介

Google AdSense （グーグルアドセンス）の公式ブログです。

Inside AdSense

インフィード広告

インフィード広告がどのようなものなのかはグーグルのサイトを見ていただければと思います

インフィード広告 – AdSense ヘルプ

インフィードは、フィードの内部に広告を表示してサイトの収益とユーザーエクスペリエンスを向上するフォーマットです。たとえば、フィードに

support.google.com

カスタマイズやコードの設置方法も詳しく書いてあるので、これに沿って作業すれば設置できるようになっています

WordPress を使ってブログを書いている方にとって、このインフィード広告を使うにはご使用中のテーマのテンプレートファイルをカスタマイズする必要があります

設置すればこんな感じで投稿リストの途中に挿入することができます

記事一覧の中に広告が自然に挿入されます

テンプレートファイルを直接書き換えるというのは、ちょっと面倒だなと思われるかもしれませんが、インフィード広告は投稿の一覧リストの途中に挿入する形式のものなので、従来のアドセンス広告を配置するのに使用していたウィジェット等を利用したやり方が出来ません

そこで、どうせ書き換えなければならないなら広告コードを直接テンプレートファイルへ書き込むよりもう少し応用範囲の広がる書き方を紹介します

WordPress アクションフックを使った広告の設置方法

テンプレートファイルのカスタマイズ

とりあえずお使いのテンプレートでサイトのホームページを表示しているテンプレートを探して下さい

多くの場合 home.php か front-page.php だと思いますが、さらにそこから部分的なテンプレートファイルを呼び出している場合もあります

テーマごとに異なるのでケースバイケースなのですが、多くのテーマで使われている次のようなwhile で囲まれたループ処理の記述部分を探します

while (have_posts())
　投稿記事の抜粋やサムネイル表示
endwhile

変更するテンプレートファイルが判ったら、直接編集するより子テーマで行ったほうが良いのでとりあえず子テーマを作成してください
※子テーマの作成方法はここでは説明しませんので各自調べてみて下さい

子テーマを作成したら特定したテンプレートを子テーマにコピーしてカスタマイズします

ここでは私の公開している Celtis製テーマの home.php を例に説明します

追加が必要なのは2か所です

while の前にリスト位置を判定する為のカウンタ $count を設置して初期化
while ループ中 do_action でアクションフックを設置

以下のような感じになります（追加コード１，２の部分）
※見やすくするために一部コードを省略しています

<div id="home" class="content-area grid grid-8">
    <div id="content" class="site-content home-content">
    <?php if (have_posts()) {
        global $paged;
        global $celtis_s_theme_options;
        $paged = ($paged <= 1)? 1 : $paged;
        $home_list = array();

        //（追加コード１） リスト位置カウント初期化
        $count = 0; 
        //（追加コード１終了）

        ob_start();
        ?>
        <nav id="home-list"> 
            <?php while (have_posts()) : the_post(); ?>
                <div id="post-<?php the_ID(); ?>" <?php post_class('clearfix'); ?>>
                    <?php celtis_s_post_card(); ?>
                </div>
                <?php 
　　　　　　　　　　　//（追加コード2） リスト間コード挿入用アクションフック
　　　　　　　　　　　do_action( 'celtis_home_infeed', ++$count );
　　　　　　　　　　　//（追加コード2終了）
　　　　　　　 ?>
            <?php endwhile; ?>
        </nav>
        <?php
            celtis_s_pagination(); 
            $html = ob_get_clean();
        }  
        echo $html;
    } else { 
        get_template_part( 'template-parts/content', 'none' );
    } ?>  
    </div>
</div>

アクションフック名はなんでも構いませんが、ここでは celtis_home_infeed としています。またリスト位置のカウンタ値を渡すためにループごとにインクリメントした $count を渡します

home.php テンプレート側で必要なカスタマイズは以上です

function.php のカスタマイズ

子テーマの function.php にインフィード広告挿入用の処理を追加します

function celtis_ads_infeed_code_home( $count ) {
    if($count % 5 === 0){   //5個目毎にインフィード広告を挿入
// ?> と <?php の間にインフィード広告コードを張り付ける       
?>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display: block;" data-ad-format="fluid" data-ad-layout-key="-e9+4q-20-dz+18z" data-ad-client="ca-pub-xxxxxxxxxxxx" data-ad-slot="xxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<?php
	}
}
add_action('celtis_home_infeed', 'celtis_ads_infeed_code_home', 10, 1);

※ご自身の client ID を含むカスタマイズコードを張り付ける必要があります。カスタマイズ内容により style 内のデータがかわります

ここでは $count % 5 という条件（５個毎に挿入）で判定していますが、ここを書き換えれば３個毎に挿入したり、３番目に１回だけ挿入したりとテンプレートをいじらずに簡単に条件を変更することが出来ます

広告以外に特定の位置へ定型文を挿入する等の応用も効くのでこのようにテンプレートと function.php に処理を分けておくことがお勧めの方法です

インフィード広告の表示エリアの幅や高さ、マージンなどの調整が必要な場合は style.css に記述して調整します

以上、アドセンスのインフィード広告の設置方法について紹介しました

ちなみに Celtis製テーマでは、カスタマイズしなくても簡単にインフィード広告を使用できるように、この機能を Celtispack-Addon に盛り込みます　(^^)

WordPressAdSense, Celtispack, Celtis_s, インフィード広告