ガジェットやアプリの紹介/webディレクター向けのナレッジを発信するブログです。

WordPressでGoogle Adsense広告を記事一覧ページに差し込む方法。

2021年05月09日 2021年05月09日

Google Adsense広告を記事一覧ページで、数記事置きに差し込む方法をまとめておきます。
例えばWordpressの目次テンプレートにあたるindex.phpやfront-page.phpには、記事の一覧表示的なものがあると思います。その中にGoogle Adsenseの広告を入れ込む方法です。

コードとしてはこんな感じ。

<?php
$ads_infeed = '5'; //何番目に表示したいか
$ads_infeed_count = '1';
?>

<?php
  if (have_posts()):
    while (have_posts()):the_post();
?>

<?php
if($ads_infeed_count%$ads_infeed == 0){
?>

<div class="wrap-ads">
<!-- Adsense広告タグ -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
     data-ad-format="fluid"
     data-ad-layout-key="XXXXXXXXXXXXXX"
     data-ad-client="ca-pub-XXXXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXXXXXXX"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!--/Adsense広告タグ -->
</div>

<?php
}
$ads_infeed_count++;
?>

<!--ここにメインループで表示するコンテンツを書く -->

<?php
        endwhile;
    endif;
?>
<!-- Adsense広告タグ -->
<!--/Adsense広告タグ -->

まず、このコメントで囲まれた部分が、Google Adsenseで発行した広告タグ部分です。
これを書くだけだと、記事の目次ページで

  • 記事
  • 広告
  • 記事
  • 広告
  • 記事
  • 広告
  • 記事
  • 広告
  • 記事
  • 広告

となってしまうので流石に邪魔くさいですね。

なので5記事おきくらいに広告を差し込んでいます。

  • 記事
  • 記事
  • 記事
  • 記事
  • 記事
  • 広告
  • 記事
  • 記事
  • 記事
  • 記事
  • 記事
  • 広告

という感じにしたいわけです。

それを設定しているのが

<?php
$ads_infeed = '5'; //何番目に表示したいか
$ads_infeed_count = '1';
?>

ここと

<?php
if($ads_infeed_count%$ads_infeed == 0){
?>

ここと

<?php
}
$ads_infeed_count++;
?>

ここです。

やりたいことは、

記事一覧の記事が5つ表示されたら次は広告を差し込む。

ということです。

$ads_infeedには固定の変数として数字の5を代入しておきます。

次に、$ads_infeed_countというphpの変数を用意して、Wordpressのメインループが回るたびに、$ads_infeed_countのカウントを1プラスします。

なので、$ads_infeed_countは、メインループが回るたびに
1,2,3,4,5,6,7・・・
と値が増えていくわけですね。

その上で

<?php
if($ads_infeed_count%$ads_infeed == 0){
?>

ここでやっているのが、$ads_infeed_countを$ads_infeed(5という数値固定)で割ったあまりがゼロのとき、という条件に合致したら、広告のタグを表示する、ということをしています。

特に特別なルールとかそういうものでなく、シンプルなphpのコードで広告タグをphp内で呼ぶ呼ばないを決めているだけですね。

今回は備忘として、「Google Adsense広告を記事一覧数記事置きに差し込む方法」をまとめておきました。