WordPressにアドセンス広告を設置する方法【図解】

今回は効果的なGoogleアドセンスの貼り付け位置と貼り方を解説していきます。アドセンスの登録や審査が終わって広告コードの作成までできる前提で進めますが、まだ登録や審査、広告の作成方法が分からないという場合には先にこちらのまとめページから順番にどうぞ。
Googleアドセンス申請から設置までの目次ページへ

それからWordPressのカスタマイズをする場合には子テーマについても知っておく必要があります。子テーマを利用してない場合にはこの記事から。
子テーマの作り方と有効化する方法【図解】

さて本題。最初に一番重要な点を説明しておきますが、アドセンスは設置する場所によってアドセンス広告の収入はとても大きな違いがでてきます。設置場所を変えるだけで収入が2倍になったりする場合もありますよ。

これはブログのジャンルやレイアウトによってそれぞれのベストな位置があるためベストな位置というのはブログの内容やジャンルによって違いますが、効果の出やすい位置についても説明していきます。

また、WordPressにアドセンスを設置する場合に簡単に設置できるプラグインなどもありますが、プラグインはいつ不具合が出るか分からないですし、常にプラグインが最新のWordPressに合わせたバージョンに更新されるとは限らないので、今回はプラグイン無しでの設置方法を紹介しておきます。

アドセンスの設置はコピペで簡単に設置はできますが、後から自分で位置を工夫してどこにでも貼れるようにしておくことが非常に大事

そんな訳で今回は基本的な部分から細かい説明と注意点をまとめておきますので、ちょっと長い記事になってしまいましたが、面倒でも最後までじっくり読んでみる事をおすすめします。

それから人気のテーマStinger5を利用している場合にはやり方がかなり違うのでこちらの記事を参考に。
Stinger5で効果的なアドセンス設置方法と位置

アドセンス設置の禁止事項を把握しておく

アドセンスには色々な決まり事(ルール)があります。大事な事がたくさんでてくるのでメモのご用意を。ルールを知って広告の配信停止されないようにしておきましょう。

把握しておいて欲しいのは次の2点です。

  • 設置できる広告の数
  • スマートフォンでの広告の配置

設置できる広告の数

まず把握しておかないといけないのは広告の設置数です。以前の記事「アドセンス広告の種類と貼り付ける事ができる数」でも紹介したように1ページに「広告ユニット」は3つです。4つ配置すると1つは広告が表示されなくなります。

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

スマートフォンでの表示は1 つのスクロールしないで見える画面(1 ビュー)に表示できる「広告ユニット」は1つのみとなっています。

つまりスマートフォンの表示画面(スクロールしないで見える範囲)に2つのユニット広告が出ないように設置しないといけません。これは重要なのでよく覚えておきましょう。設置した後にスマートフォンで表示させて確認する事をおすすめします。

アドセンスの公式ブログではスマートフォン用おすすめの配置例が紹介されています。

WordPressアドセンス-1

この図を見てもらうと分かりやすいと思いますが、1画面で見える範囲(1ビュー)というのを意識して設置する事。それでは実際にWordPressの貼り付け例を解説していきます。

効果的なアドセンスの貼り付け位置

このブログの場合はやや変則的な貼り方をしていますが一応基本的な位置を紹介しておきます。

PC版個別ページのアドセンス効果的な位置

サイトのジャンルによって効果的なアドセンスの位置は変わりますが、一般的に効果が高いと言われている場所は次の通り。

  • 記事中に1つ
  • 記事下に2つ(縦に2つ)

こんな感じです。

設置-1

このようにPCページでは「記事の途中」に1つと「記事下」に2つが効果的。

記事下に2つ横並びに設置する(ダブルレクタングル)も試しましたが、私の多くのブログの場合は縦に2つ並べる方が効果があったので縦2つを採用している場合が多いです。

注意点としては前述したスマートフォンの1ビュー問題。PCページで記事下に2つ並べていますが、スマートフォンでは記事下に1つだけ表示させるように条件分岐する必要があります。これはまた後から説明しますね。

前述したように1ページに貼れるアドセンスのユニット広告は3つまでなので、サイドバーにはアドセンス以外の広告を入れます

スマートフォンページのアドセンス効果的な配置

  • ヘッダーのタイトル、説明文の下
  • 記事中に1つ
  • 記事下に1つ

先ほども説明したように記事下の広告はスマートフォンページでは1つ減らすので、その代わりにヘッダーのタイトル、説明文の下にモバイルバナーを1つ張るのが一般的です。

設置-2

注意点としてはスマートフォンページの場合、ヘッダーのタイトル下に設置する広告はモバイル用(320×100)の物を使用します

ここにレクタングル(300×250)のような大き目のサイズの広告を貼ると、コンテンツを押し下げる広告になってしまい、これもアウト。検索順位に影響する可能性もあるので注意

WordPressの条件分岐を理解する

WordPressにアドセンスを貼る時に必須なのが条件分岐の使い方です。

前述したように「PCページでは表示」して「スマートフォンページでは非表示」とか、PCページとスマートフォンページで広告サイズを分けるという時に絶対に必要になるので先にちょっと大まかに説明しておきます。

別に覚える必要はないので、一応知っておくだけでOKです。

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; ?>

とりあえず基本的な物は以上ですが、2つの条件をミックスする事もできます。

<?php if (wp_is_mobile() && is_single()) :?>
ここに広告のコード
<?php endif; ?>

このように「&&」を入れて条件を繋げると「スマートフォンページ」で「個別ページ」なら広告を表示という風にもできます。

この条件分岐はWordPressで頻繁に使うのでこれを使ってアドセンスの広告を設置していきましょう。

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

個別ページ、固定ページは別のテンプレートになるので、まずは個別ページの記事下にアドセンスを入れる方法を解説します。冒頭でも書いたように記事下に2つのアドセンスを入れて、その内1つはスマートフォンでは表示しないようにしていきます。

ここで紹介するのは記事下に縦に2つ並ぶタイプです。もし、記事下に「横並びで2つ設置したい」場合はこの記事をどうぞ。
アドセンス広告を横並び(ダブルレクタングル)で設置する方法

記述するのは「single.php」もしくは「content.php」ですが、基本的には「single.php」の方が多いかと思います。

もちろんテーマによって違う部分もあると思いますが、一応このブログで使用しているテーマ「Twenty Twelve」の場合で書いてみます。大体どのテーマでも同じ感じの部分があると思います。

私の場合はsingel.phpではなくてcontent.phpにアドセンスを追加しています。Twenty Twelveの場合はcontent.phpの方が簡単です(余計な位置調整などが少ないため)。

まずは「content.php」から次の記述を探します。

</div><!-- .entry-content -->

Twenty Twelveの場合は上記のコードが記事の終わりの部分(entry-contentの終わり部分)になりますので、この「直前」にアドセンスの設置コードを追加していきます。

もしこのコードがない場合には適当な位置に「テスト」とテキストを入れて保存し、表示される場所を確認してみると確実です。

先ほど探したコードの「直前」に以下のコードを設置。

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

<p class="ad-label">スポンサーリンク</p>
 
<?php if (wp_is_mobile()) :?>
<div class="ad-bottom-sm">
ここにスマートフォン用サイズ(300x250)の広告
</div>
 
<?php else: ?>
 
<div class="ad-bottom">
ここにPC用の広告1つ目
</div>
 
<div class="ad-bottom">
ここにPC用の広告2つ目
</div>
 
<?php endif; ?>

<?php endif; ?>

2つの条件分岐を使っているので、最後の「php endif;」が2つになります。

これでスマートフォンでは記事下に広告が1つ。PCページでは記事下に広告が2つという設置ができます。

それぞれサイズを分けた広告コードを張ります。私の場合はスマートフォン用には「300×250」で、PC用には「336×280」を使う場合が多いです。

また広告部分に「ad-bottom」という名前を付けてありますので後でスタイルシートで位置調整ができます。位置調整は最後にまとめてやっていきますね。

もちろんこれは個別記事だけ表示するように条件分岐している記述のため、固定ページやトップページは表示されないので固定ページやトップページでも同じように設置してみましょう。

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

先ほどは個別ページの記事下に2つの広告を入れたので今度は同じように固定ページとトップページに入れてみましょう。

私の場合は固定ページのアドセンスは「content-page.php」に記述してます。

content-page.phpにはこのような記述があります。

</div><!-- .entry-content -->

この部分が記事の終わりの部分になるので、上記コードの「直前」に以下のコードを入れてます。

<p class="ad-label">スポンサーリンク</p>

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

次にトップページの方ですが、トップページ「メインインデックスのテンプレート(index.php)」では次の記述があります。

</div><!-- #content -->
</div><!-- #primary -->

この記述の「前」に先ほどと同じコードを入れます。

<p class="ad-label">スポンサーリンク</p>

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

ここまで設置できたら個別ページ、それと固定ページの記事下広告は完了。CSSでの位置調整に関しては最後にまとめて書くので後回し。

記事本文中にアドセンスを自動で入れる

記事本文中のアドセンスは非常に効果的。記事途中のアドセンスは1つ1つ貼り付けてもいいですが面倒なので「最初の見出しタグ(h2)」の前に自動で設置できるコードを利用させてもらいます。

簡単に説明すると広告を表示するだけのPHPファイルを作成してそれを最初の見出しタグの直前で呼び出すようにします。これなら全ての個別ページの見出しの直前に自動でアドセンスが表示できます。

手順的には「ad-in-body.php」という新しいファイルをテーマに追加してそのファイルに広告を設置するコードを書き、「fnctions.php」をちょっと編集して記事中の見出しの前で「ad-in-body.php」ファイルを呼び出すという方法。

一応ロリポップ版で説明しておきますね。

ロリポップユーザー専用ページに移動して「webツール」⇒「ロリポップFTP」と進みます。

子テーマ-1

ここに最初独自ドメインを設定した時に作った自分のサイトのフォルダがあるのでクリック。

ワードプレス構造-3

そのフォルダの中身一覧が表示されるので、「wp-content」というのをフォルダをクリック。

ワードプレス構造-4

「wp-content」のフォルダの中かから「themes(テーマ)」というフォルダをクリック。

子テーマ-2

「themes(テーマ)」というフォルダの中から現在利用しているテーマを選択。

テーマフォルダ-1

この現在利用しているテーマフォルダの中に新しくファイルを作成するので、「新規ファイル作成」をクリック。

テーマフォルダ-2

新規ファイル名を「ad-in-body.php」として保存。ここは名前を付けるだけでOK。

テーマフォルダ-3

これで使用しているテーマのフォルダ内に「ad-in-body.php」というファイルができます。ファイルを追加して保存したら、WordPressの管理画面に戻り、「外観」⇒「テーマの編集」へと進みます。

テーマの編集画面で右側に先ほど追加した「ad-in-body.php」というファイルがあるのでこれをクリック。

テーマフォルダ-4

そのファイルを開いたら次のコードを入れます。スマートフォン用の広告とPC用の広告を用意して広告コードの部分を書き換えてね。

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

これで保存したら「ad-in-body.php」ファイルは完成。後はこれを記事中で呼び出すようにしていきましょう。

先ほど作成した「ad-in-body.php」を記事中の見出しの前に呼び出すにはfunctions.php内に次の記述を入れます。

もし子テーマを利用している方でfunctions.phpを初めて作成する場合には注意点があるのでこの記事を参考に。
子テーマにfunctions.phpを追加する時の注意点

functions.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-in-body');//広告貼り付け用に作成したテンプレート
    $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');

これで最初の見出し「h2」の前に自動的に「ad-in-body.php」が呼び出されるという訳なので簡単。ここでもラベル(スポンサーリンク)と広告部分に名前を付けて後からCSSで位置調整できるようにしておきます。位置調整は最後に解説。

参考:アドセンスをWordPress記事本文中に配置できる手軽でスマートな方法|寝ログ

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

最初に設置した記事下のアドセンスはPCでは2つ縦並びです。でもスマートフォンでみると1つになるようにしています。そのため、もう一箇所ユニット広告が貼れるのでヘッダー(タイトルと説明文の下)に広告を入れておきましょう。

最初にも説明しましたが、ここに大きいサイズの広告(レクタングル)を入れるとコンテンツを押し下げる広告として検索順位にも影響してしまう場合があります。入れるなら「ラージモバイルバナー(320×100)」の広告がおすすめ。

この部分に広告を入れるには子テーマの「header.php」を開いて次の記述を探します。

<hgroup>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</hgroup>

この部分は多分使っているテーマによって違うと思いますが、通常「h1」でサイトのタイトル、「description」でサイトの説明文が書かれていると思いますのでそれが書いてある場所を探して下さい。

そのタイトルと説明文の下に次のコードを追加。

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

この部分は明らかに広告と分かる位置なのでラベル(スポンサーリンク)は入れていないサイトがほとんど。心配ならラベルを入れて書いたらOK。ここでも広告に「ad-top」という名前を付けておきます。位置調整は記事の最後に。

サイドバーにアドセンス広告を設置する

記事中に1つと記事下に2つの広告を設置する場合にはこれだけでユニット広告3つになるので、サイドバーにはアドセンス以外の広告を貼るのがおすすめです。

そのためサイドバーには自分のサイトのターゲットに合わせた広告を探す必要があります。

例えば若い女性の訪問者がターゲットのサイトなら「脱毛関連」や「エステ関連」みたいな感じでもいいですし、季節物の商品や商材でもOK。

紹介する広告に関しては「A8.net」や「アフィリエイトB」のようなASPに登録して広告を利用する事ができます。もちろん登録も利用も無料です。

特に「アフィリエイトB」のアフィリエイトリンクには全て「no follow」タグ(リンク先に評価を渡さないタグ)が入っているのでおすすめです。

要はnoffolowが入っているリンクであれば、リンク先に自分のブログのパワーを分け与えないアフィリエイトリンクになりますし、検索順位にも悪影響がないのがメリットです。

特にサイドバーの広告などはどのページでも表示される部分なので、この辺も考慮しておくのがおすすめ。

登録をしてサイドバー用に横幅300pxくらいの広告を探しておいて下さい。
アフィリエイトB無料会員登録の方法【図解】

一応サイドバーにアドセンスのユニット広告とリンクユニットを設置方法も紹介しておきます。もちろんアドセンス以外の広告も同じ手順です。

WordPressの管理画面から「外観」⇒「ウィジェット」と進み、サイドバーに「テキスト」を追加します。

WordPressアドセンス-2

「テキスト」をクリックして開きタイトルに「スポンサーリンク」を入力してアドセンスの「ユニット広告」のコードを入れます(アドセンス広告の場合)。必要であればこのコードの下にリンクユニットのコードも追加できます。

WordPressアドセンス-3

ちなみに広告ユニットとリンクユニット「200×90 – 縦長(特大)」を設置するとこのような見た目になります。

WordPressアドセンス-4

広告とラベルの位置調整

最後に広告とラベル(スポンサードリンク)の位置調整をスタイルシート(CSS)でやっていきましょう。今回解説した広告とラベルにそれぞれ名前を付けてあります。

  • ラベル(スポンサーリンクの部分):「ad-label」
  • 記事下の広告PC:「ad-bottom」
  • 記事下の広告スマートフォン:「ad-bottom-sm」
  • 記事中の広告:「mid-ad」
  • スマートフォンのヘッダー部分:「ad-top」
  • サイドバーの広告:「side-ad」

もっと細かく分けてもいいですが、基本的にはこのように分けておくと位置調整はしやすいです。子テーマのCSS(スタイルシート)の一番下に位置調整のコードを追加していきます。位置調整は人それぞれ好みがあるので1例を挙げて説明しておきます。

例えばラベル(スポンサーリンクの部分)と広告を中央に寄せたい場合には次のコード(スタイルシートの一番下に追加)。

p.ad-label { text-align:center;}
.ad-bottom { text-align:center;}
.mid-ad { text-align:center;}
.side-ad { text-align:center;}

他にも「margin-top:10px;」とか「margin-bottom:10px;」とかそれぞれに記述を加えれば「上の余白」や「下の余白」も調整できますし、中央寄せが嫌なら「text-align:center」を消して「margin-left:15px」とかでも左に余白を作る事もできます。

私の場合は余白だけを調整してこんな感じにしています(スタイルシートの一番下に追加)。

p.ad-label {
  margin-left:20px;
  margin-top:15px;
}

.ad-bottom {
  margin-top:15px;
}

.ad-bottom-sm {
  margin-top:15px;
}

この辺は様子を見ながら数値を変更して下さい。

スマートフォンで広告がはみ出す場合

スマートフォン用の広告は普通横幅300pxの広告を利用する場合が多いですが、スマートフォンで確認すると右に寄って画面から少しだけはみ出している場合があります。その場合にはCSSに次のコードを追加します。はみ出している広告だけ選んで記述ね。

@media screen and (max-width:599px){
.side-ad{magin-left: -10px;} 
.ad-bottom-sm{margin-left:-10px}
.mid-ad{margin-left:-10px}
}

この「@media screen and (max-width:599px)」というのがブラウザの画面が599px以下ならという条件分岐、つまりスマートフォンページならという書き方です。ここにマイナス値の「magin-left」を入れてあげると数値の分だけ左に寄るのでこれで対策できます。

以上WordPressにアドセンス広告の設置は完了です。PC、スマートフォン両方で確認して規約に違反する部分がないか確かめておきましょう。

それから今回ここで「wp_is_mobile」という関数を使って条件分岐しましたが、この場合は「PCページ」と「スマートフォン&タブレット」という分け方になってしまいます。タブレットって横幅があるのでタブレットでの表示はPCと同じにしたいという場合には次の記事を参考にして下さい。

WordPressにアドセンス広告を設置する方法【図解】”に103件のコメントがあります。

※入院生活から復活しました!!またできるだけ返信しますのでよろしくお願いします(^^)

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. しげぞう 投稿作成者

    与太郎様

    コメントありがとうございます。スマホのときに中央に来ないのはデバイスによって時々あった気がします。違う機種などでみると中央になっていたり、少しずれていたり。以前アドセンスの広告でもそういうのがあって、対策したような気がしますがちょっと忘れてしまってます(笑)

    まずですね、CSSでも条件分岐があって、PCの場合とスマホの場合って感じでスタイルを別々にすることができます。

    つまり、PCで中央寄せになっているけど、条件分岐されていてスマホには適応してないという原因もあるかしれませんし、単純にずれている広告に対して
    「margin-left:-8px」
    みたいなマイナスのマージンをCSSで追加してあげても良いかもしれません、その場合、スマホの広告にだけCSSを追加するので、

    @media screen and (max-width:599px){
      .ad-bottom-sm {margin-left:-8px;}
    }

    みたいな感じでやってみたら良いと思います。これはブラウザサイズ599px以下ならという条件分岐になります。タブレットのサイズが確か600pxからなのでそれ以下という数値にしてます。

  2. 与太郎

    しげぞう様

    お陰様でうまく記事中に広告を表示することができました。
    ありがとうございました。
    ただ、また新たな悩みとしてスマホで見た場合に記事下のアドセンス広告が左に寄ってしまいます。因みに条件分岐でPCではダブルレクタングル、スマホではシングルとなるような設定です。PCで表示した時は2つとも均等にセンターに表示されますが、スマホの場合もセンターに表示するにはどうすればよいでしょうか?

    こちらの記事に書いてあるように位置調整としてスタイルシート(style.css)の一番下に下記の期日を追記してみたのですが上手くいきません。

    p.ad-label { text-align:center;}
    .ad-bottom { text-align:center;}
    .mid-ad { text-align:center;}
    .ad-bottom-sm { text-align:center;}

    どこか間違っているのでしょうか?
    ご教授いただければ幸いです。

  3. しげぞう 投稿作成者

    与太郎様

    コメントありがとうございます。functons.phpの記述にミスがないか再度確認をしてみて下さい。また、functons.phpの記述だけでは表示できません。

    functions.phpに書いている記述は記事の見出しを探して最初の「h2」の見出しの前にad-in-body.phpを呼び出すという記述になりますので、functions.phpの記述がミスってるとか、そもそも記事中の見出しが「h2」からではなく、「h3」のテーマなどもありますので、その場合もコードの修正が必要かと思います。