AFFINGER4でインフィード広告を入れた手順

昨日に引き続きインフィード広告ネタです。

今回はWordPress、AFFINGER4で表示させた方法を紹介します。

はてなブログに比べると比較的簡単です。

インフィード広告タグの取得

まず、Googleアドセンスの広告ユニットから「新しい広告ユニット」の作成してタグを生成します。

レイアウト調整などについては以下の記事を参考にしてみてください。

WordPressの場合はこのタグをそのまま使いますので、とりあえず控えておきます。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout="XXXXXXX" /* 広告レイアウト */
data-ad-layout-key="XXXXXXX"/* 広告レイアウトキー */
data-ad-client="ca-pub-XXXXXXX"  /* クライアントID */
data-ad-slot="XXXXXXX"></ins>  <!-- 広告スロットID -->
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

編集するファイルの確認

テーマの編集の前に必ずバックアップは取っておきましょう。

【外観】ー【テーマの編集】ー編集するテーマで「AFFINGER4」の子テーマを選択。

子テーマを使ってない方はAFFINGER4本体でも良いですが、アップデートした際に全て差し戻されてしまうので、テーマのカスタマイズは子テーマでやることをオススメします。

わからない方は以下のページを参考にしてみてください。

AFFINGERカスタマイズの基本、子テーマを使おう | AFFINGER4（アフィンガー4）カスタマイズ講座

記事一覧のファイルは設定によって異なるようで以下の４つが対象となります。

• itiran-original-thumbnail-off.php
• itiran-original-thumbnail-on.php
• itiran-thumbnail-off.php
• itiran-thumbnail-on.php

AFFINGER設定の何かを設定していると「itiran-original〜」が使われるっぽいのですがわたしが編集したブログはitiran-thumbnail-on.phpでしたので、このファイルで説明を進めます。

ファイル名から察するに、サムネイルを表示していない場合はitiran-thumbnail-off.phpっぽいですね。

テーマの編集

まずコードの外観ですが、赤枠で囲まれた部分を追記します。

ではブロックごとに説明していきます。$ads_infeedは何件おきに広告を挿入するか設定できます。

$ads_infeed_countは数をカウントするための変数を初期化しているものですので、そのままにしておいてください。

<?php
$ads_infeed = '3'; //何件おきに表示するか
$ads_infeed_count = '1';
?>

次は広告を表示させる条件ですが、必ず<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>より後に入れます。

<?php
if($ads_infeed_count % $ads_infeed === 0){
?>

そのすぐ後に先程生成したタグをそのまま入れてください。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout="image-side"
data-ad-layout-key="XXXXXX"
data-ad-client="ca-pub-XXXXXXX"
data-ad-slot="XXXXXXX"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

タグのあとに以下のコードを挿入します。

<?php
}
$ads_infeed_count++;
?>

「ファイルを更新ボタン」で保存すると反映されます。

サムネイルのサイズや見出し、説明文のスタイルはある程度アドセンス側で調整して「これ以上は無理！」ってなったら記事一覧の方をCSSで調整しましょう。

表示の微調整

AFFINGER管理の「サムネイル画像設定」で「一覧のサムネイルを大きくする」にチェックを入れると広告とサムネイルサイズが近くなります。

広告の下部に余裕がない場合はマージン設定をしたほうが良さそうです。

直接書くとしたらこんな感じでしょうか。

<div style="margin-bottom:15px">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="fluid"
     data-ad-layout="image-side"
     data-ad-layout-key="XXXXXX"
     data-ad-client="ca-pub-XXXXXXX"
     data-ad-slot="XXXXXXX"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

最後に

今回はAFFINGER4でインフィード広告を入れてみたときのコードを紹介しました。

編集自体は、昨日のはてなブログに比べるととても簡単ですね。テーマによってファイルの構成が異なりますのでAFFINGER4以外の方は使えませんが追記する内容は同じで動くはずです。（入れるファイルを探せればですが・・・）

なお今回もスクリプトのご利用につきましては自己責任でお願いします。

スクリプトにより発生したいかなるトラブルも保証しかねます。