loading
 読み込み中...
ウェブの触手-日々の生活に新たなスパイスを-
アイキャッチ画像
Home > [Wordpress] > 【WordPress】アドセンスのインフィード広告を複数設置する方法
この記事は約7分で読めます。

【Wordpress】アドセンスのインフィード広告を複数設置する方法

投稿日:2017.9.20

Googleアドセンス広告ユニットに新しく「インフィード広告」というのが登場してはや数ヵ月。

私もとあるサイトに導入してみたのでその過程と注目ポイントをご紹介します。

↓↓↓簡単にサイトが作れる次世代ツール↓↓↓

SIRIUSレビューイメージ画像

インフィード広告とは

記事一覧中にアドセンス広告を表示させた場合、
普通は”広告ですよ”というのがわかるようなレイアウトデザインになってるものです。

こんな感じですね。

キャプチャ画像

これを記事一覧の中に(違和感なく)溶け込むように表示するアドセンスの広告ユニットが
インフィード広告と呼ばれるものです。

たとえば今回の設置例では最終的にこういった感じで表示されます。

いかがでしょう、記事一覧の中に見事に溶け込んでますでしょ。

キャプチャ画像

お気づきかもしれませんが、
アドセンス広告では”ほぼ必須”の「スポンサーリンク」とかの文言表示は
インフィード広告に限っては必要ありません。

ただし記事一覧の途中、先頭または末尾のみでの表示可能な広告となります。

記事中では表示できないんですね。

(正確には”記事内広告”というのを使えば可能です)

一瞬見ただけでは広告っぽくないので
クリックされやすいというメリットがあります。

こういった表示例はTwitterFacebookなんかではすでにお馴染みで、
タイムラインの中に自然と紛れ込んでたり(笑)してます。

キャプチャ画像

見る側にとっても広告臭が目立ってると不快感ばかりが先に出ちゃうので、
今後はこういった広告が増えてくるのかもしれません。

スポンサーリンク

インフィード広告設定その1

設定のやり方ですが、Googleアドセンスの管理画面を開き、
広告の設定→広告のユニットとたどり「新しい広告ユニット」をクリックします。

コチラ↓の画面になるので「インフィード広告」を選択します。

キャプチャ画像

自分のサイトの記事一覧レイアウトに最も近いものを選びます。

今回は”横の画像”を選択しました。

(”サンプルを表示”をクリックするとサンプルレイアウトが見れますがイマイチわかりにくい…)

キャプチャ画像

こちら↓の画面になるのでレイアウトをカスタマイズしていきます…が、
見ても最初はよくわからないと思います。

なのでとりあえず広告ユニット名だけを付けて
”保存してコードを取得”をクリックし、コードをコピーして一時保存しておきます。

※実際に表示させてみてから細かいところを調整していった方が効率的です。

キャプチャ画像

 

コードの設置

今回は記事一覧中の特定の2ヵ所
インフィード広告を表示させるというやり方になります。

検証は行ってますがカスタマイズ・実装に関しては”サイトが表示されない”などのトラブルが発生する可能性もありますゆえ自己責任にてお願いします。

また失敗した時に元に戻せるようオリジナルファイルのコピーは必ず作っておきましょう。

最初に記事一覧を表示させてるphpファイルを探します。

通常はhome.phpindex.phpになるかと思います。

昨今のテーマはindex.phpとかではなく全く別の名前のファイルに設定してあるモノもあるので、探すのがちょっと大変かもしれません。

たとえばOPEN CAGEのハミングバードというテーマは「parts_archive_simple.php」といったファイルが記事一覧を表示させるファイルだったりします。

上記リンク先のようにテーマ側で親切に解説してくれてるとありがたいですね。

ということでご利用のレンタルサーバーのファイルマネージャー等を開き、
どのファイルかわかっている方は当該ファイルを開きます。

開いたファイルの中に以下の構文があるか探します。

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

(上記は”記事があれば順番に表示せよ”というループ命令文の一部です)

(ただしこれもテーマによっては若干変わっていたりするので厄介です)

わからない方はそれっぽいファイルを一つずつ開いてチェックしていくしかないですね。
(他人事みたいな言い方でスミマセン)

ファイルを特定したら、
上記の太字の一文を以下の1行目のように変更し、さらに別の命令文も追加します。

2行目の”4”という数字は「3番目の記事の直後の4番目に広告を表示」させるという意味です。

同じく4行目の”8”は「7番目の記事の直後の8番目に広告を表示」になります。

(もちろん数字は変えてもらってかまいません)

3行目と5行目には、さきほどコピーした広告用コードを貼り付けておきます。

もしもそれぞれできるだけ違う広告を表示させたいとか
それぞれのクリック率をきちんと計測したいなんて場合には、
コードを2個作ってそれぞれ別コードを貼り付けてもいいでしょう。

1ヵ所だけの広告表示にしたいのであれば4,5行目を削除します。

とりあえずこれで一度表示させてみます。

(※ただし設置直後は空欄が表示されます。その後15分~30分ぐらいで正常に表示されるようになります)

とりあえずデフォルト設定のままでもそれなりにいい感じで表示されるはずです。

そのレイアウトを見てあらためて細部を微調整していきます。

 

インフィード広告設定その2

レイアウトの微調整ですが、
新しく名前を付けて保存した広告ユニット名をクリックして設定画面を出します。

キャプチャ画像

さきほどはスルーした、広告ユニット名の下に並んであった各種設定上で、
実際にどのように表示されるかプレビューで確認しながら調整できます。

キャプチャ画像

それでは具体的に見ていきます。

キャプチャ画像

ONにすると通常のディスプレイ広告も表示されるようになります。

ただしディスプレイ広告が表示された場合は大っぴらに広告然としたものになります。

デフォルトでいいんじゃないでしょうか。

テキストが多い時に画像の下にテキストを回り込ませるかどうかの指定です。

ページの背景が白以外の時は背景色に合わせて調整するとより馴染んで表示されます。

全体に枠を付けたい時に設定します。

他の記事一覧と同じような余白になってなければここで調整します。

キャプチャ画像

画像を左寄せにするか右寄せにするか。

他の記事一覧の画像と横幅を揃えたい時にここで調整します。

ただし表示される広告によっては若干ズレが生じる場合もあるので目安程度に考えておきましょう。

(※高さは自動調整されます。ただし強制的に高さを設定することもできます)

画像周りの余白を調整します。

キャプチャ画像

見出し(タイトル)を短く表示させるかフルで表示させるかを選択します。

見出し(タイトル)のフォントサイズや位置を調整します。

見出し(タイトル)の余白を調整します。

キャプチャ画像

見出し(タイトル)だけの表示でよければオフに、簡単な説明文も表示させたいならオンにします。

説明文のフォントサイズや位置を調整します。

説明文の余白を調整します。

キャプチャ画像

①②設置例で表示される”広告URL”と”サイトへ”のボタンのカスタマイズです。

ここはデフォルトのままで触る必要はありません。

設定を終えたら必ずここをクリックして新たに表示されるコードをコピーし、
コードの設置最初に貼り付けたコードを上書きします。

設定項目はいっぱいありますがあまり細かくいじらず、ここぞという箇所だけ設定するのがいいですよ。

広告によっては思った通りのレイアウトで表示してくれない時もありますから。

 

PCとスマホでレイアウトを分ける

インフィード広告はレスポンシブ対応なので、
一つのコードを貼っておけばPCとスマホで”最適な”レイアウトで広告表示してくれます。

が、、、実際にはそううまくはいかないこともあります。

たとえばPCとスマホではレイアウトが全く別物だったり、
PCでは抜粋文(説明文)を表示させてスマホでは抜粋文が非表示なんてテーマの場合は
1個のコードでは対処しきれません。

そんな時はif文を使って条件分岐させちゃいましょう。

3行目・9行目の”wp_is_mobile””タブレットとスマホの場合は…”という意味の条件分岐タグです。

いやいやタブレットは除外してスマホのみにしたいという場合は”is_mobile”に置き換えます。

ただし”is_mobile”にした場合は別途functions.phpに設定を指定してやる必要があります。

詳しくはこちら↓の記事をご覧ください。

”is_mobile”の先頭に「!」がついて!is_mobileとなると”スマホ以外は…(つまりPC)”という意味になります。

最終的にはこんな感じに↓なりました。

xxxは伏字です)

 

注意点

複数の広告の表示位置をあまり近づけすぎると規約違反とみなされる場合があります。
適度に離した方がいいでしょう。

使用しているテーマによっては
トップページのみならずカテゴリーページも同じphpファイルを使用する場合があります。

トップページは記事が多いでしょうから特に問題はないんですが、
たとえば今回の例で記事が3つしかないカテゴリーページがあったとします。

その場合、PC上では4番目にインフィード広告が出るだけで何の問題もありません。

ところがスマホの場合、テーマによってはPCのサイドバーの最上段に表示されるアドセンス広告が
スマホ上だと記事一覧の直後に表示されることがあります。

この場合、記事一覧上のインフィード広告と直後に表示されるアドセンス広告が連続表示されてしまって
規約違反になる恐れがあります。

記事が多いサイトは問題ないですがそうでないサイトでインフィード広告を優先するなら、
たとえばPC上のサイドバー最上段の広告はスマホでは非表示にするとか
カテゴリーページではインフィード広告を表示させないなどの対策をとった方がいいかもしれませんね。

以上です。

参考記事→ワードプレスの記事一覧ページにアドセンスや広告挿入
AdSense ネイティブ広告の最適化

記事はお役にたてましたか?

記事にご興味をもっていただけましたら
下のソーシャルボタンで共有していただけると嬉しいです^^

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

スポンサーリンク

おススメTCDテーマ

WordPressテーマ「CORE (TCD027)」

コメント(0件)

コメントをどうぞ

入力いただいたメールアドレスは公開されません。

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

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

先頭へ