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

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

今回は効果的なGoogleアドセンスの貼り付け位置と貼り方を解説していきます。

アドセンス広告ではなくて普通の広告設置方法はこちらの記事へどうぞ。

WordPressでアフィリエイト広告を設置する方法とリンクが貼れない場合の対処方法

アドセンスの登録や審査が終わって広告コードの作成までできる前提で進めますが、まだ登録や審査、広告の作成方法や子テーマが分からないという場合には先にこちらのまとめページから順番にお願いします。

MEMO

WordPressへアドセンス設置に関してはphpファイルの編集やCSSの編集が必要になりますので、HTMLやCSSのようなものは苦手って方は「アドセンスの自動広告」の設置がおすすめです。

アドセンスの自動広告はサイトへコード1つ加えるだけでアドセンス広告の設置場所や数をGoogleにお任せする事ができますし、自動で最適化されますので面倒な作業が必要ありません。

【図解】Googleアドセンスの自動広告とは?設定・設置と使い方

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

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

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

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

アドセンスには色々な決まり事(ルール)がありますが、今回1つだけ注意しておいて欲しいのはスマートフォンでの広告の位置です。

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

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

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

WordPressにアドセンス広告を設置する方法-5.png

この図を見てもらうと分かりやすいと思いますが、1画面で見える範囲(1ビュー)というのを意識して設置する事。これ大事。

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

アドセンスは設置する場所によってアドセンス広告の収入はとても大きな違いがでてきます。設置場所を変えるだけで収入が2倍になったりする場合もあります。

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

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

サイトのジャンルによって効果的なアドセンスの位置は変わりますが、個人的に色々試して効果的だったのがこちら(PCページの場合)。

  • ヘッダー周辺に1つ(リンクユニットor横長広告)
  • 記事中に1つか2つ(レクタングル大or記事内広告orリンクユニット)
  • 記事下に1つ(レクタングル大or記事内広告)
  • サイドバーの一番上(レクタングル)

※()内はおすすめの広告サイズ

こんな感じですが、もちろんサイトごとに結果も違ってくると思いますので、色々試してみる事をおすすめします。

アドセンスの配置PC

MEMO

個人的にPCページのヘッダー周辺の広告は「パンくずリスト」の上にリンクユニットを設置する事が多いです(スマホではモバイルバナー)。

それから記事下に2つ横並びに設置する(ダブルレクタングル)も試しましたが、私の多くのブログの場合は縦に2つ並べる方が効果があったので横に2つ並べるなら縦に2つ並べた方が良いと思っています(最近は記事下は1つだけにしてます)。

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

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

  • ヘッダーのタイトル周辺(モバイルバナー)
  • 記事中に1つ(レクタングルor記事内広告orリンクユニット)
  • 記事下に1つ(レクタングルor記事内広告)

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

モバイルバナー300

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

WordPressの条件分岐を理解する

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

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

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

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

2.もしスマートフォン(モバイル)ページなら広告を表示

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

*条件分岐の部分に「!」を入れる事で「それ以外」という条件分岐ができる。
4.PCページとスマートフォンページでサイズを分ける場合

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

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

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

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

個別ページ、固定ページは別のテンプレートになるので、まずは個別ページの記事下にアドセンスを入れる方法を解説します。

記事下にアドセンスを入れるパターンとしては以下の2つがあります。

ディスプレイ広告

  • テキスト&ディスプレイ広告
  • 記事内広告(レスポンシブ)

上記はどちらでもOKです。サイトによって効果が違ってくるので期限を1週間程度決めてどちらが効果があるか効果測定をしてみると良いです。

「テキスト広告とディスプレイ広告」を選択する場合はPC用に「336×280px」スマホ用に「300×250px」の広告を準備

MEMO

記事下に「横並びで2つ設置したい」場合はこの記事をどうぞ。

アドセンス広告を横並び(ダブルレクタングル)で設置する方法

ここはテーマによって編集するphpなどが違うのですが、一応公式テーマ「Twenty Seventeen」の場合でやってみます。

「テーマ編集」⇒「content.php」に次のように「エントリーコンテント(記事本文)の閉じタグ」がありました。

WordPressの記事下に広告を設置する方法1

要は本文がここで終わりという事ですので、これの直前に広告のコードを入れます。

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

個別記事の記事下にディスプレイ広告(レクタングル大)を入れる場合のコード

レクタングル大(336×280px)を入れる場合は条件分岐をしてスマホではレクタングル(300×250px)を表示させます(はみ出すので)。

後からCSSで位置調整できるように広告スペースに「ad-bottom」という名前をつけてます

記事下広告の位置調整(CSS)

スタイルシートCSSに以下の記述で位置調整ができます(子テーマCSSの一番下に追加)。

  • margin-top: 20px;広告の上に20pxの余白
  • margin-bottom: 20px; 広告の下に20pxの余白
  • text-align:center; 広告とラベルを中央寄せにしたい場合に記述

という感じです。

個別記事の記事下に「記事内広告」を設置する場合のコード

「記事内広告」はレスポンシブなのでユーザーが使っているデバイスに応じてサイズが自動的に調整されます

つまりスマホとPCのサイズを分ける必要がありません。

記事内広告

記事下広告の位置調整(CSS)

こちらも同じくスタイルシートCSSに以下の記述で位置調整ができます(子テーマCSSの一番下に追加)。

  • margin-top: 20px;広告の上に20pxの余白
  • margin-bottom: 20px; 広告の下に20pxの余白
  • text-align:center; 広告とラベルを中央寄せにしたい場合に記述

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

固定ページに広告を入れる場合

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

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

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

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

固定ページ記事下にディスプレイ広告(レクタングル大)を入れる場合のコード

こちらもレクタングル大(336×280px)を入れる場合は条件分岐をしてスマホではレクタングル(300×250px)を表示させます(はみ出すので)。

固定ページの記事下に「記事内広告」を設置する場合のコード

「記事内広告」はレスポンシブなのでユーザーが使っているデバイスに応じてサイズが自動的に調整されます

つまりスマホとPCのサイズを分ける必要がありません。

記事内広告

ここまで設置できたら個別ページ、それと固定ページの記事下広告は完了。

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

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

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

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

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

ロリポップユーザー専用ページに移動して「サーバーの管理・設定」⇒「ロリポップFTP」と進みます。

ロリポップFTP

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

ワードプレス構造-3

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

ワードプレス構造-4

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

子テーマ-2

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

WordPressにアドセンス広告を設置する方法-1

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

WordPressにアドセンス広告を設置する方法-2

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

WordPressにアドセンス広告を設置する方法-3

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

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

WordPressにアドセンス広告を設置する方法-4

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

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

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

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

子テーマにfunctions.phpを追加する時の注意点

functions.phpへの記述はこんな感じです。

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

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

記事中(見出し前)広告の位置調整

記事中(見出し前)の広告が呼び出せるようになったらCSSで位置調整をしておきます。

この広告スペースには先程「mid-ad」という名前をつけておいたので、CSSで位置調整ができます。

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

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

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

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

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

良く分からないって方はこの辺かな?と思う所に「テスト」とテキストを入れて保存し、どこに表示されるか確認してみて下さい。

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

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

ヘッダー広告の位置調整

ヘッダー部分は特に位置調整も必要ないですが、marginで上下にだけ余白が必要なら追加しても良いかなと思います。

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

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

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

WordPressにアドセンス広告を設置する方法-8

「テキスト」をクリックして開きタイトルに「スポンサーリンク」を入力して「テキスト」を選択し、アドセンスの広告のコードを入れます。

後から位置調整できるように「side-ad」という名前を付けてます。

WordPressにアドセンス広告を設置する方法-9

サイドバーの広告位置調整

サイドバーの広告も上下の余白と中央寄せだけでOKです。CSSの一番下に追加していきます。

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

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

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

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

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

最終更新日:2018/07/21

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

コメントの反映には時間がかかる場合があります。

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

  1. とも

    しげぞう様
    前回のコメントでお名前を間違えてしまいました。
    大変申し訳ございません。

    前回のコメントで質問させていただいた広告の件ですが、その問題の対処をしようとしたところ、記事自体が表示されないという問題が併発し、どうにも修正ができなくなったため、別テーマで一からやり直すことにしました。
    新しいテーマの方で今回の記事の内容を参考にさせていただこうと思います。

    ちなみに前回のテーマは子テーマを作成せずに、親テーマを直接変更してやっていたため、それが原因だったのではないかと思います。
    アドバイスありがとうございました。

  2. しげぞう 投稿作成者

    とも様

    コメントありがとうございます。以前は普通に記事下に広告が表示されており、アップデート後に表示されなくなったというのはちょっと考えにくいのですが、テーマの更新があったりしたならあり得るかなと思います。

    テーマは子テーマを使われてますか?親テーマを編集していて、テーマの更新で初期化され、再度追加したけどコードミスというのはありそうな感じはしてます。その場合は一旦今の状態のsingle.phpをコピペしてメモ帳などにバックアップしておいて、親テーマと同じ状態に戻し、(初期化)それから再度広告の追加をして試してみるのが良いかと思います。

    また、以前はsingle.phpに広告コード入れる方法で書いてましたが、現在はcontent.phpで追加する方法を書いてますので、再度確認してコード追加してみて下さい。

    もしそれでも上手く行かない場合にはお手数ですが、再度コメント頂けると助かります。

  3. とも

    ぺぺ様
    いつも参考にさせていただいております。
    本記事の個別投稿欄の記事下に広告を表示させる方法を試したところ、右サイドバーの下に広告が表示されるようになってしまいました。
    原因わかりますでしょうか。
    ちなみに以前は普通に記事下に広告が表示されていました。
    WordPressのアップデートを行ったところ、広告が表示されなくなったため、再度single.phpに加筆したところ上記の現象が起こりました。

  4. ぺぺ

    しげぞう様、
    お忙しい中ご回答いただきありがとうございました。今後もサイトを参考にさせていただきます。

  5. しげぞう 投稿作成者

    ぺぺ様

    返信ありがとうございます。そうですね、確かに広告は邪魔と思う方も多いかもしれません、本当に必要な情報があるのに、誤クリックが多いような動く広告、追尾広告などは嫌だなと思う事はありますが、通常の広告の場合は必要なければ見てませんのでそこまで気にする必要はないかと思います。