Googleアドセンス広告を記事と一緒に一覧表示させる方法！

Googleアドセンスと言えば、基本的に、

記事上
記事中
記事下
サイドバー上

あたりに設置すると思いますが、中には、「ネイティブアドのように、一覧記事の中に一緒に表示させたい！」という方もいるかと思います。

そこで今回は、使っているテーマに関係なく、簡単に記事一覧の中にアドセンス広告を表示させる方法をご紹介します。

CAUTION

WordPressメインのカスタマイズです！バックアップを取ってからお試しください！

1
指定した場所に表示させる方法
2
記事一覧の中でランダム表示させる方法
3
PC・タブレットとスマホでコードを変える方法
4
まとめ

指定した場所に表示させる方法

まずは、指定した場所にアドセンス広告を表示させる方法です。

記事を一覧表示しているphpファイルを修正します。例えば、下記のようなファイルですね。

トップページの新着記事（index.phpか、home.php）
サイドバーの新着記事（sidebar.php）
関連記事（single.phpか、related-post.phpなどの名称のファイル）

やり方は基本的にすべて同じです。

ループ開始のコードの修正

下記の「記事のループを開始するコード」を探します。（テーマによっては、若干コードが違います）

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

それを、このように修正します。

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

後ろに「$count」という変数を追加し、それを「++」でループ毎に1つずつ増やしていくという意味です。

ループ終了のコードを探す

下記の「記事のループを終了するコード」を探します。

<?php endwhile; else: ?>
<p>記事がありませんでした</p>
<?php endif; ?>

テーマによっては、コードや文字が違っていたり、文字がなかったりしますが、「こんな感じのコード」があるはずです。

一緒にループさせるコードの追加と順番の指定

先ほどの「記事のループを終了するコード」の上に下記のコードを追加します。

<?php if ( $count == 何番目の記事の後に表示させるか指定 ) :  ?>
 アドセンス広告のコード（ウィジェットで管理してもOK）
<?php endif; ?>

重要なのは、1番上のコードです。

例えば、

「$count == 4 」なら、4番目の記事の後ろ（5番目）
「$count == 1 」なら、1番目の記事の後ろ（2番目）

に表示されます。

サンプルコード

上記のコードをまとめると、このようになります。これで、指定した場所にアドセンス広告が表示されます。

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

 <article class="article-list">
 メインの記事をループ
 </article>

 <?php if ( $count == 3 ) : ?>
 <div class="ad article-list">
 アドセンスのコード（この場合は3番目の記事の後に表示される）
 </div> 
 <?php endif; ?>

<?php endwhile; else: ?>
 <p>記事がありませんでした</p>
<?php endif; ?>

ポイント

このカスタマイズのポイントは、「アドセンス広告を表示させる要素」と「他の記事」のクラス名を同じにすることです。

そうすることで、

余白（padding、margin）
下線（border-bottom）
背景色（background-color）

などの設定をする必要がなく（cssにコードを追加する必要がない）、他の記事と上手く馴染ませることができます。

記事一覧の1番前と1番後ろに表示させたい場合

念のため、補足しますが、記事一覧の1番前と1番後ろにアドセンス広告を表示させたい場合、コードを修正する必要はありません。

ただ単純に、下記のようにコードを追加するだけでOKです。

1番前に表示させたい→ループ開始コードの前にアドセンスのコードを貼り付け
1番後ろに表示させたい→ループ終了コードの後ろにアドセンスのコードを貼り付け

記事一覧の中でランダム表示させる方法

次は、指定した場所ではなく、ランダムに表示させる方法です。これは、先ほどのコードを少し修正するだけでOKです。

ループ開始のコードを修正

ループ開始のコードを、

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

このように修正します。

<?php if ( have_posts() ) :$rand = rand(1, 9); while ( have_posts() ) : the_post(); $count++; ?>

新しく、$rand = rand(1,9)というコードが追加されましたが、これは「1〜9までの数字をランダムに変数$randに代入する」という意味です。

このrand()の中の数字は、サイトに表示されている一覧記事の数に合わせて変更してください。

例えば、一覧に20記事表示させている場合は、rand(1,19)にします。

順番を指定するコードを修正

何番目の記事の後に表示させるか指定していたコードを、下記のように修正します。

<?php if ( $count == $rand ) :  ?>

$randには、どの数字が入るかわからないからランダムで表示されるという仕組みです。

サンプルコード

<?php if ( have_posts() ) :$rand = rand(1, 9); while ( have_posts() ) : the_post(); $count++; ?>

 <article class="article-list">
 メインの記事をループ
 </article>

 <?php if ( $count == $rand ) : ?>
 <div class="ad article-list">
 アドセンスのコード（ランダム表示）
 </div> 
 <?php endif; ?>

<?php endwhile; else: ?>
 <p>記事がありませんでした</p>
<?php endif; ?>

PC・タブレットとスマホでコードを変える方法

最後は、デバイス別（画面幅別）にアドセンスのコードを変える方法です。

PC・タブレットでアクセスがあった場合は「アドセンス広告A」を表示
スマホでアクセスがあった場合は「アドセンス広告B」を表示

ということができます。

条件分岐のコード

条件分岐のコードはこちら。修正箇所は「アドセンスのコードを貼る部分」です。

<?php if(is_mobile()) { //スマホ表示の場合 ?>
 スマホで表示させるアドセンスのコード
<?php } else { //PC表示の場合 ?>
 PC・タブレットで表示させるアドセンスのコード
<?php } ?>

サンプルコード

<?php if ( have_posts() ) :$rand = rand(1, 9); while ( have_posts() ) : the_post(); $count++; ?>

 <article class="article-list">
 メインの記事をループ
 </article>

 <?php if ( $count == $rand ) : ?>
 <div class="ad article-list">
  <?php if(is_mobile()) { //スマホ表示の場合 ?>
   スマホで表示させるアドセンスのコード
  <?php } else { //PC表示の場合 ?>
    PC・タブレットで表示させるアドセンスのコード
  <?php } ?> 
  </div> 
 <?php endif; ?>

<?php endwhile; else: ?>
 <p>記事がありませんでした</p>
<?php endif; ?>

動作しない場合はfunctions.phpをチェック

先ほどのコードで、上手く動作しない場合は、下記のコードがfunctions.phpにない可能性があるので、コピペしましょう。

function is_mobile(){
 $useragents = array(
 'iPhone', // iPhone
 'iPod', // iPod touch
 'Android.*Mobile', // 1.5+ Android *** Only mobile
 'Windows.*Phone', // *** Windows Phone
 'dream', // Pre 1.5 Android
 'CUPCAKE', // 1.5+ Android
 'blackberry9500', // Storm
 'blackberry9530', // Storm
 'blackberry9520', // Storm v2
 'blackberry9550', // Storm v2
 'blackberry9800', // Torch
 'webOS', // Palm Pre Experimental
 'incognito', // Other iPhone browser
 'webmate' // Other iPhone browser
 );
 $pattern = '/'.implode('|', $useragents).'/i';
 return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}