アドセンス広告のコードを取得する

WordPressに限らず、WEBサイトにGoogleアドセンスの広告を貼り付けるには申請を行う必要があります。

申請方法はそれほど難しくありませんが、広告を貼り付けるWEBサイトの質をGoolgeは見ています。基準を満たさないWEBサイトにはアドセンス広告のタグが発行されません。

申請は以下の記事が参考になりますので、まだの方は参考にして見てください。

https://affiliate150.com/adsense-primary-audit
https://affiliate150.com/adsense-second-screening

アドセンス広告の設置規定

Googleアドセンスにはいくつかの規定が存在します。貼り付ける前に確認しておかないと、後から予想外の挙動や広告配信停止になる可能性もあります。必ず確認をしましょう。

設置できる広告の数

GoogleアドセンスではWEBサイトに貼り付けることができる広告の数が決まっています。1ページにつき3つの広告を貼り付けることができ、それ以上貼り付けると4つ目以降の広告は表示されません。

スマートフォンでの広告の配置

スマートフォン表示の場合、1つのビューあたり1つの広告のみ表示可能です。つまり、スクロールしないで1ページに表示させることができる広告は1つとなっており、1つのビューに複数の広告を表示させることはできません。

2.bp.blogspot.com

ソースコードに広告設置の記述をする

スマホ表示とPC表示を条件分岐する

近年ではスマートフォンでWEBサイトを閲覧する人が増え、WEBサイトを運営する側もそれに対応することが必須となっています。

スマホ表示とPC表示の条件分岐はPHPのソースコードで行いますが、PHPを理解していなくてもソースコードをコピペするだけで実装できます。以下にそのコードを記述しておきます。

1.個別ページなら広告を表示

<!--?php if ( is_single() ) : ?-->
アドセンス広告のコード
<!--?php endif; ?-->

2.スマートフォン（モバイル）ページなら広告を表示

<!--?php if (wp_is_mobile()) :?-->
アドセンス広告のコード
<!--?php endif; ?-->

3.PCページだけ広告を表示（スマートフォンでは非表示）

<!--?php if (!wp_is_mobile()) :?-->
アドセンス広告のコード
<!--?php endif; ?-->

4.PCページとスマートフォンページでサイズを分ける場合

<!--?php if (wp_is_mobile()) :?-->
スマートフォン用のアドセンス広告のコード
<!--?php else: ?-->
PC用のアドセンス広告コード
<!--?php endif; ?-->

アドセンス広告以外にもこの条件分岐は使用することができます。興味のある方はPHPの理解にも挑戦してみてください。

個別ページの記事下にアドセンスを入れる

個別ページの記事下にアドセンスを入れていきます。設置内容は以下の通り。

• PCページ：記事下に2つ
• スマホページ：記事下に1つ

記述していくファイルは「single.php」か「content.php」です。どちらでも表示されますが、テーマによって表示がずれる場合があります。ほとんどの場合”single.php”に記述しておけば問題ないと思います。以下では両方の記述方法を紹介していますので、どちらかを参考にしてください。

content.phpの設置箇所

content.phpファイルの終わりの部分、”entry-content”の部分に記述していきます。

<!-- .entry-content -->

single.phpの設置箇所

single.phpファイルの以下のコードの下に記述していきます。

<!--?php the_content(''); ?-->

設置するソースコード

コードが見つかったら、以下のコードをコピペします。

<!--?php if ( is_single() ) : ?-->
 


スポンサーリンク

  
<!--?php if (wp_is_mobile()) :?--></pre>
<div class="ad-bottom-sm">スマートフォン用広告(300×250)</div>
<pre>  
<!--?php else: ?--></pre>
<div>1つ目のPC用広告</div>
<div>2つ目のPC用広告 </div <!--?php endif; ?--> <!--?php endif; ?--></div>

広告のタグを囲むタグにclassをつけて、位置情報を細かく調整することができます。表示位置が満足いかない場合は修正しましょう。

今回はスマートフォン用の広告のサイズを300×250にしています。こちらも表示サイズを変えたい場合は修正してください。

固定ページの記事下に広告を入れる

固定ページの記事下に広告を入れていきます。設置内容は個別ページの時と同様です。

設置するファイルは”content-page.php”です。

content-page.phpの設置箇所

content-page.phpファイルの終わりの部分、”entry-content”の直前に記述していきます。

<!-- .entry-content -->

設置するソースコード

コードが見つかったら以下のコードを記述していきます。

スポンサーリンク

 
<!--?php if (wp_is_mobile()) :?--></pre>
<div class="ad-bottom-sm">ここにスマートフォン用の広告のコード</div>
<pre><!--?php else: ?--></pre>
<div class="ad-bottom">ここにPC用の広告コード１つ目</div>
<div class="ad-bottom">ここにPC用の広告コード２つ目</div>
<pre><!--?php endif; ?-->

トップページの記事下に広告を入れる

トップページの記事下に広告を入れていきます。設置内容は個別ページの時と同様です。

設置するファイルは”index.php”です。

index.phpの設置箇所

content-page.phpファイルの終わりの部分、”#content”の直前に記述していきます。

<!-- #content -->

設置するソースコード

コードが見つかったら、以下のコードを記述していきます。

スポンサーリンク

 
<!--?php if (wp_is_mobile()) :?--></pre>
<div class="ad-bottom-sm">ここにスマートフォン用の広告のコード</div>
<pre><!--?php else: ?--></pre>
<div class="ad-bottom">ここにPC用の広告コード１つ目</div>
<div class="ad-bottom">ここにPC用の広告コード２つ目</div>
<pre><!--?php endif; ?-->/



スポンサーリンク

 
<!--?php if (wp_is_mobile()) :?--></pre>
<div class="ad-bottom-sm">スマートフォン用広告のコード</div>
<pre><!--?php else: ?--></pre>
<div class="ad-bottom">ここにPC用の広告コード１つ目</div>
<div class="ad-bottom">ここにPC用の広告コード２つ目</div>
<pre><!--?php endif; ?-->

記事本文中にアドセンスを設置する

記事下にアドセンスを入れる場合、各ファイル（single.php、content.php、content-page.php、index.php）を編集することで挿入できました。

しかし、記事の本文中にアドセンスを挿入するとなると、本文の内容は記事によって変わりますので、これまでの貼り方ではうまくいきません。

ここでは、アドセンスのコードが書かれた別ファイルを作成し、毎回記事の指定した箇所に表示されるようにfunction.phpを編集する方法を紹介します。

ファイルを作成する

なんでも良いのでsublimetextなど、お使いのエディターに以下のコードを貼り付けて”ad-article.php”と名前をつけて保存してください。

スポンサーリンク</pre>
<div class="mid-ad"><!--?php if (wp_is_mobile()) :?--> スマートフォン用のサイズのアドセンス広告のコード <!--?php else: ?--> PC用のアドセンス広告コード <!--?php endif; ?--></div>
<pre>

このファイルを記事中で読み込むことで、自動で全ての記事中にアドセンスを表示させることができます。

FTPソフトでファイルをアップロードする

先ほど作成した”ad-article.php”をFTPソフトでアップロードします。アップロードする箇所は「wp-content」>「themes」>「”有効化しているテーマ名”」です。

function.phpを編集する

最後にfunction.phpを編集します。今回は最初の見出しの下にアドセンスを表示させていきます。

//H2見出しを判別する正規表現を定数にする
define('H2_REG', '/<h2.*?>/i');//H2見出しのパターン
   
//本文中にH2見出しが最初に含まれている箇所を返す（含まれない場合はnullを返す）
//H3-H6しか使っていない場合は、h2部分を変更してください
function get_h2_included_in_body( $the_content ){
  if ( preg_match( H2_REG, $the_content, $h2results )) {//H2見出しが本文中にあるかどうか
    return $h2results[0];
  }
}
  
function add_ads_before_1st_h2($the_content) {
  if ( is_single() ) {//固定ページも表示する場合はis_singular()にする
    ob_start();//バッファリング
    get_template_part('ad-article');//広告貼り付け用に作成したテンプレート
    $ad_template = ob_get_clean();
    $h2result = get_h2_included_in_body( $the_content );//本文にH2タグが含まれていれば取得
    if ( $h2result ) {//H2見出しが本文中にある場合のみ
      //最初のH2の手前に広告を挿入（最初のH2を置換）
      $count = 1;
      $the_content = preg_replace(H2_REG, $ad_template.$h2result, $the_content, 1);
    }
  }
  return $the_content;
}
add_filter('the_content','add_ads_before_1st_h2');

これで記事中のアドセンス表示は完了です。

スマートフォンのヘッダーにモバイル広告を入れる

ここまで設置した内容ではスマホページに1つしかアドセンスを表示させていません。記事説明文の下にもう1つ追加で表示させることもできます。

ここに表示させる広告は320×100の大きめのサイズの広告です。ここで注意したいのは、レクタングル広告など大きいサイズの広告を設置すると、本文内容を押し下げる広告としてGoogleから低評価を受け検索順位を下げる要因になることもあります。

コードが見つかったら、以下のコードを記述していきます。

設置するファイルはテーマによって異なりますが、”header.php”です。

header.phpの設置箇所

コードの設置箇所はテーマによって異なりますが、説明文の下に設置しますので、descriptionが書かれている箇所を探し、その下にコードを記入してください。

例：twinty twelve

</pre>
<hgroup>
<h1 class="site-title"></h1>
<h2 class="site-description"></h2>
</hgroup>
<pre>

設置するソースコード

コードが見つかったら、以下のコードを記述していきます。

<!--?php if ( function_exists('wp_is_mobile') && wp_is_mobile() ) :?--></pre>
<div class="ad-article-top">ここにモバイルバナー</div>
<pre><!--?php endif; ?-->

プラグインを使用して表示する

プラグインを使用してアドセンスを貼り付けることもできます。プラグインの場合、WordPressのバージョンアップへの対応など、プラグイン管理が難しい面もありますが、導入がとても簡単です。ソースコードを打ち込みのが難しいという方は利用してみてください。

AdSense Plugin WP QUADSをインストール

管理画面より「プラグイン」→「新規追加」→「AdSense Plugin WP QUADS」を開きます。

検索窓に「AdSense Plugin WP QUADS」を入力し、プラグインを探します。

見つかったらそのままインストールし、有効化してください。

設定方法

管理画面より「WP QUADS」→「Ad Settings」をクリックします。

設定画面のタブ「GENERAL」→「ADSENSE CODE」をクリックします。

いくつか広告の種類を設定できます。今回はAd1に広告を設定していきます。

Ad1

Plain Text/HTML/JSにチェックをいれ、下のテキストボックスにアドセンスのコードをコピペします。

Layout

お好みのレイアウトを選んでください。今回は中央揃えにします。

設定は以上で完了です。

まとめ

今回はGoogleアドセンス広告をファイル編集して実装する方法とプラグインを用いて実装する方法の2種類の方法を紹介しました。

どちらも向き不向きがありますが、プラグインの実装はバージョンアップの管理しなければならない上、プラグインを開発している運営元がアップデートを長期間しなくなると機能が使えなくなる可能性もあります。

個人的にはファイルを編集して実装する方法をおすすめしますが、手間もかかるのでよく考えて実装してみてください。

Web制作のご相談はこちら

TOMATO MAGAZINEの運営者

TOMATOではWeb制作をはじめ、ランディングページの制作やSEO対策などWebに関する事業を包括的に展開しております。

ご意見・ご相談、料金のお見積もりなど、お気軽にお問合わせください。
お問合せ内容の確認後、こちらからご連絡させていただきます。

Webのことなら何でもご相談下さい

ホームページ制作はもちろんLP制作、SEO対策に関するご相談も承ります。お気軽にご相談ください。

お問い合わせ