アドセンスのインフィード広告が利用できるようになったので賢威7をテーマに使用しているサイトにインフィード広告を導入してみました。
インフィード広告とは、カテゴリーやタグ等の記事の一覧ページの記事の間に表示されるネイティブ広告で、ニュースサイトを見ている時よく目にすると思います。
賢威7の記事一覧ページ
アドセンスのインフィード広告の形状は4種類あります。そこで賢威7の一覧ページに合わせるため、賢威７のサイトの一覧ページを見てみます。
当サイトは賢威７のプリティ版をほぼデフォルトの状態で使用していますが、記事の一覧ページを見てみると一覧ページの記事は割と大きめです。
Chromeのデベロッパーツールでサムネイル画像の大きさを調べてみると、画像のサイズは246×200。インフィード広告のイメージ画像のサイズを合わせるのは難しそうです。
そしてこちらはスマホで見た場合。PC表示では画像が左にありましたが、スマホ表示ではタイトル下に画像があり、PCとスマホ表示の一覧ページの記事の形状が異なります。
インフィード広告はレスポンシブ広告ですが、PCとスマホそれぞれ別の広告を作成したほうが良さそうです。
賢威7に合わせたインフィード広告の作成
賢威7のPC表示は上部にタイトルがあり、左にサムネイル画像があるので「上部のタイトル」の広告で作成。
画像のサイズは246×200で合わせるのが難しいので、調整はのちのちすることにして200×200でとりあえず作成しました。
スマホサイトでは画像の下に抜粋記事が表示されるので、一番形式が近いと思われる「上部の画像」の広告を使用。
画像サイズの調整は難しそうなので、ひとまずサンプルのように画像幅100％で作ってみることにしました。
賢威7にインフィード広告のコードを貼る
simplisityでは細かい設定をしない場合、ウィジェットの「テキスト」に作成したコードを貼り付けることでインフィード広告を表示できます。
賢威7ではテーマに直接コードを貼り付ける必要があります。賢威7で記事一覧を表示させるのは「cont.php」なので、「cont.php」に直接書き込むか子テーマを作ります。
while (have_posts()) : the_post();
そして、記事をループさせるこのコードを下記のように書き換えます。
while (have_posts()) : the_post(); $counter++; ?>
「$counter++; ？」を追加することで記事の何番目に広告を入れるか決めれるようになります。
次に「</article>」のコードの下に、
<?php if ($counter == 4) {
print <<<EOD
インフィード広告のコード
EOD;
} ?>
このコードを入れます。「counter ==4」で4番目の記事の下に広告を表示させることを指定するので、この数字を変えると広告の表示される場所を変えられます。
たとえば「counter ==3」にすると3番目の下に広告が表示されます。
PCとスマホ表示を切り替えないならば、このコードを賢威7の「cont.php」に記入すれば広告が表示されます。
ただ今回はPCとスマホ表示を切り替えるので、条件分岐タグを使用します。
条件分岐タグでPCとスマホ表示を切り替える
<?php if(wp_is_mobile()): ?>
スマホで表示したい広告
<?php else: ?>
PCで表示したい広告
<?php endif; ?>
<?php if(wp_is_mobile()): ?>でスマホの場合を指定して、<?php else: ?>でスマホ以外の場合を指定します。
そして条件分岐タグと記事一覧に広告を表示させるコードを合わせると、記事一覧ページのインフィード広告をPCとスマホで切り替えられるようになります。
<?php if(wp_is_mobile()): ?>
<?php if ($counter == 3) {
print <<<EOD
スマホ用のインフィード広告
EOD;
} ?>
<?php else: ?>
<?php if ($counter == 3) {
print <<<EOD
PC用のインフィード広告
EOD;
} ?>
<?php endif; ?>
もし複数のインフィード広告を使用したい場合、「counter」の数字を変えてコードを追加すれば複数のインフィード広告を表示できます。
※この記事を書くにあたって、便利屋さんの「賢威７のトップページの記事一覧の間に広告を挿入する方法」を参考にさせてもらいました。
インフィード広告の表示の確認
ますはPC表示。賢威7はデフォルトの状態で使用すると記事一覧の記事が大きく、記事の高さも画像の大きさも全く合ってません。
ネイティブ広告とは記事やコンテンツに馴染んだ広告という意味らしいですが、現状ネイティブでもなんでもない（笑）。
次にスマホでのインフィード広告。賢威7はサムネイル画像の上に記事タイトルが表示されます。
けれど、アドセンスのインフィード広告には賢威7のスマホ表示のようなフォーマットはないので、元々合わせるのが難しいかもしれません。
賢威7はSimplictyよりインフィード広告を記事に合わせるのは難しいような気がするので、自分にはこのくらいで限界かも知れません（笑）。
他者から見たらいまいちだとは思いますが、やり終えた達成感に浸りながら何気なく自分のサイトをスマホで見ていると、とんでもない事態になっていることに気づきました。
インフィード広告を使用するうえでの注意点
当サイトはサイドバーの一番上にレスポンシブ広告でPCではラージスカイスクレイパー、スマホではレクタングルに切り替えて表示しています。
インフィード広告は一覧記事の3番目の記事下に表示されるようにしています。
スマホ表示の場合は、記事一覧ページは投稿ページと異なり、一覧ページの下にサイドバーが表示されます。
そのため一覧ページの記事数が3記事しかない場合、インフィード広告の真下にサイドバーが来ることになり、サイドバーの一番上のレクタングル広告とインフィード広告が連続することになります。
スマホ画面で同じ画面に2つの広告が表示されるのはアドセンスの規約違反になるので、スマホでレクタングルは表示されないようにしました。
インフィード広告に限らず、動作確認はとても大事だと再確認しました。
今回の記事では賢威7にインフィード広告を表示させる方法を書きましたが、賢威7の記事下にレクタングルを横並び表示させる方法も書いています。
上記に記事のコードのだと、テーマを変更した時に表示を整えるのが大変なのでコードを修正しました。
今日のたつじんへの一歩
たつじんｗ 「動作確認はとても大事」と言っていますが、リンク記事にあるラージスカイスクレイパーとレクタングルを切り替えて表示させた時も同じミスをしていて全く学習してません（笑）
