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

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

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

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

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

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

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

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

1つだけ先に把握しておいて欲しいのはスマートフォンでの広告の位置です。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

WordPressの条件分岐を理解する

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

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

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

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

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

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

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

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

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

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

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

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

ここで紹介するのは記事下に縦に2つ並ぶタイプです。もし、記事下に「横並びで2つ設置したい」場合はこの記事をどうぞ。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

記事本文中のアドセンスは非常に効果的。記事途中のアドセンスは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記事本文中に配置できる手軽でスマートな方法|寝ログ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

広告とラベルの位置調整

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

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

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

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

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

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

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

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

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

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

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

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

WordPressの始め方
にほんブログ村 小遣いブログ アフィリエイトへ
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

ブログの更新はこちらから

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

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

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

CAPTCHA


  1. とも

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

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

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

  2. しげぞう 投稿作成者

    とも様

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

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

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

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

  3. とも

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

  4. ぺぺ

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

  5. しげぞう 投稿作成者

    ぺぺ様

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