wordpressのテーマによっては、インフィード広告の挿入用にウィジェットが用意されていたりします。(このブログで使っているテーマcocoonは対応している)
まだ対応していないテーマもありますので、今回は「stinger plus2」について書いていきます。
*adsenseのインフィード広告用コード取得の方法は割愛させていただきます。
ご参考→ インフィード広告ユニットを作成する
.phpテンプレートの修正
記事一覧を表示するテンプレート「itiran-thumbnail-on.php」を修正します。
2行目に以下の記述があるかと思います。
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
これを以下のように書き換えます。
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); $count++; ?> <?php if ( $count == 4 || $count == 8 ) : ?> <dl class="clearfix"> //取得したアドセンスコード </dl> <?php endif; ?> <?php endif; ?>
ここでは、3行目の「$count」のところで、4個目と8個目に表示されるようにしていますが、お好みで変更できます。
「dl class=”clearfix”」でアドセンスコードをくくっていますが、これは「stinger plus2」の記事一覧のタグがそうなっているため。
これでアドセンスコードを囲ってやることで、区切り線や隙間がほぼ再現できます。
それでも微調整が必要になる場合がありますが、その時は「class」指定を追加してcssで微調整します。
PC用とスマホ用でサムネイルの大きさを変えている場合
この場合は、アドセンスコードを2つ取得して、以下のように条件分岐します。
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); $count++; ?> <?php if ( $count == 4 || $count == 8 ) : ?> <?php if(st_is_mobile()) :?> <dl class="clearfix"> //スマホ用のアドセンスコード </dl> <?php else: ?> <dl class="clearfix"> //PC・タブレット用のアドセンスコード </dl> <?php endif; ?> <?php endif; ?>
条件分岐について「stinger plus2」では
・「st_is_mobile()」を使用した場合、「スマホ」と「PC・タブレット」
・「wp_is_mobile()」を使用した場合、「スマホ・タブレット」と「PC」
という分岐になります。
*因みに、「関連記事」の間にインフィード広告を表示させるには以下の記事をご参照。
https://ks-fdripp.tfmwish.comstinger2_infeedkanren/
wordpressの管理画面から、function.phpなどの.phpファイルを編集した場合、うまく動作しない時があります。
その際は、ftpソフトなどでいったん該当ファイルをローカルに保存して、そこで編集を行います。
編集した.phpを、ftpソフトなどで再度アップロードする事で正常動作する場合があります。
.phpを編集する際は、サクラエディタ が、エラーが少ないのではないかと思います。
上のエディタで保存する場合は、文字コード「UTF-8」、BOM「チェック無し」がエラーが少ないのでは無いかと思います。