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

スポンサーリンク
Pocket

 

効果的なGoogleアドセンスの貼り付け位置と貼り方を紹介します。

WordPressにアドセンスを設置する場合に簡単に設置できるプラグインなどもありますが、プラグイン無しでの設置方法を紹介します。

アドセンス設置には、禁止事項があります。アドセンスには色々な決まり事(ルール)があります。大事な事がたくさんでてくるのでメモのご用意を・・・・。ルールを知って広告の配信停止されないように気を付け下さい。

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

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

設置できる広告の数

気をつけたいのは、広告の設置数です。1ページに「広告ユニット」は3つです。4つ配置すると1つは広告が表示されなくなります。

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

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

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

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

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

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

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

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

こんな感じです。

※PCページでは「記事の途中」に1つと「記事下」に2つが効果的。ブログの場合は、記事下に縦に2つ並べる方が効果ありと言われるので、に2つせっていします。

注意点としては:・スマートフォンの1ビュー問題。PCページで記事下に2つ並べていますが、スマートフォンでは記事下に1つだけ表示させるように条件分岐する方法で設定します。

・1ページに貼れるアドセンスのユニット広告は3つなので、サイドバーにはアドセンス以外の広告を設置します。

スマートフォンページのアドセンスの配置は・・・・。

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

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

・ヘッダーのタイトル下に設置する広告はモバイル用(320×100)の物を使用します。

WordPressの条件分岐を理解する

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

1.個別ページに広告を表示します。

2.スマートフォン(モバイル)ページに広告を表示します。

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

*条件分岐の部分に「!」を入れる事で「それ以外」という条件分岐ができる。

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

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

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

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

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

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

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

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

 

もちろんテーマによって違う部分もあると思いますが、大体どのテーマでも同じ感じの部分があると思います。

出来れば子テーマを作って、子テーマのカスタマイズをススメします。(子テーマのフォルダにファイル名をコピーして作ります)

参考:子テーマの作り方

 

まずはから次の記述を探します。

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

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

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

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

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

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

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

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

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

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

固定ページのアドセンスは「content-page.php」に記述があります。

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

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

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

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

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

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

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

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

ロリポップの場合です。(サーバーにより操作手順は違います?)

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

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

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

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

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

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

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

これで使用しているテーマのフォルダ内に「ad-in-body.php」というファイルができます。ファイルを追加して保存します。

WordPressの管理画面に戻り、「外観」⇒「テーマの編集」へと移動します。

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

そのファイルを開いたら次のコードをコピペします。スマートフォン用の広告とPC用の広告を用意して「広告コードの部分」に広告コードを上書きします。

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

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

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

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

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

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

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

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

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

この部分は明らかに広告と分かる位置なのでラベル(スポンサーリンク)は入れていないサイトがありますが・・・・。ここでも広告に「ad-top」という名前を付けます。

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

記事中に1つと記事下に2つの広告を設置する場合にはこれだけでユニット広告3つになります。

サイドバーには自分のサイトのターゲットに合わせた広告を探します。

※紹介する広告に関しては「A8.net」や「afb」のようなASPに登録して広告を利用する事ができます。もちろん登録も利用も無料です。

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

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

サイドバーの広告は全てのページに表示されます。この辺を考慮してきめます。

登録をしてサイドバー用に横幅300pxくらいの広告を探しておいて下さい。

サイドバーにアドセンスのユニット広告とリンクユニットを設置方法

もちろんアドセンス以外の広告も同じ手順です。

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

・「テキスト」をクリックして開きタイトルに「スポンサーリンク」を入力してアドセンスの「ユニット広告」のコードを入れます(アドセンス広告の場合)。

・必要であればこのコードの下にリンクユニットのコードも追加できます。

広告ユニットとリンクユニット「200×90 – 縦長(特大)」を設置する

広告とラベルの位置調整

最後に広告とラベル(スポンサードリンク)の位置調整をスタイルシート(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にアドセンス広告を設置する方法【図解】

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です