インフィード広告を Simplicity と Cocoon の関連記事の中に設置

インフィード広告を関連記事リストに設置するカスタマイズ

Akira

福岡在住ウェブデザイナー。 WordPress のカスタマイズを、「見やすさ」と「使いやすさ」にこだわり紹介しています。

リスト内(フィード内)に広告を設置できるのが、 Google AdSense のインフィード広告

リストの中に配置することで、広告収入の増加を期待できます。

そこで Simplicity と Cocoon の関連記事リストの中に、インフィード広告を設置するカスタマイズをご紹介します。

カスタマイズ後の完成図は、下の画像のとおりです。広告のスタイルは、関連記事のスタイルと同じにできます。

カスタマイズ後の完成図

ウィジェット領域を新規作成

最初にすることは、ウィジェット領域の作成です。

Simplicity でも Cocoon でも、子テーマの functions.php に以下のコードを追加します。

register_sidebars( 1, array(
    'name'          => '広告用・関連記事の中間',
    'id'            => 'ad-related-widget',
    'description'   => '広告用・関連記事の中間に表示されるウイジェット。',
    'before_widget' => '',
    'after_widget'  => '',
    'before_title'  => '',
    'after_title'   => '',
));

ウィジェット領域を設置

作成したウィジェット領域を、関連記事の中に設置します。

Simplicity であれば、親テーマの related-entries.php を子テーマにコピペ。

Cocoon であれば、親テーマの tmp/related-list.php を子テーマの tmp フォルダにコピペをします。

子テーマに設置したファイルを開き、下記のコードを探します。

<?php if( $query -> have_posts() && !empty($args) ): //関連記事があるとき?>
<?php while ($query -> have_posts()) : $query -> the_post(); ?>

Simplicity でも Cocoon でも、上記のコードを下記のコードに書き換えます。

<?php
if( $query -> have_posts() && !empty( $args ) ) :
    $count = 0;
    while( $query -> have_posts() ) : $query -> the_post();
    $count++;
    if( $count == 3 && is_active_sidebar( 'ad-related-widget' ) && !is_amp() ) {
        echo '<div class="ad-related">';
        dynamic_sidebar( 'ad-related-widget' );
        echo '</div>';
    }
?>

6 行目の $count == 3 が、広告の配置場所の指定です。 3 であれば、関連記事リスト内の 3 番目に広告が表示されます。

インフィード広告を設定

次に Google AdSense より、インフィード広告を新規作成します。

サイトの関連記事のデザインに合うように、細かくスタイルの設定が可能です。

設定方法が分からない場合には、インフィード広告のカスタマイズをご参考ください。

広告コードをウィジェットに設置

作成したインフィード広告のコードを、ウィジェットに貼り付けます。

最初に作成した「広告用・関連記事の中間」ウィジェット領域に、カスタム HTML ウィジェットを放り込みます。

放り込んだカスタム HTML ウィジェットに、広告コードを貼り付けます。

カスタムHTMLウィジェットに広告コードを設置

あとは必要に応じて CSS を追加します。例えば Cocoon の縦型カード 3 列の場合には、下記の CSS を子テーマの style.css に追加します。

.ad-related {
  margin-bottom: 20px;
  padding: 5px;
}

@media screen and (min-width: 768px) {
  .ad-related {
    width: 33%;
  }
}

@media screen and (min-width: 356px) and (max-width: 768px) {
  .ad-related {
    width: 49%;
  }
}

@media screen and (max-width: 356px) {
  .ad-related {
    width: 100%;
  }
}

Simplicity にしろ Cocoon にしろ複数の関連記事タイプがあるため、各タイプの CSS の詳細は省略します。

どちらのテーマもデフォルトタイプであれば、 CSS の追加は必要ないかも。広告の周囲に余白が必要な場合には、インフィード広告の設定で変更すれば CSS の追加は不要です。

最後に、きちんと表示されるかを確認します。インフィード広告は、すぐに変更が反映されない場合が多いように思えます。広告が表示されない・スタイル変更が反映されない場合には、 5 分ほど時間をおいて確認します。

問題点

インフィード広告は、現状 AMP には対応できません。理由は、 AMP で禁止の style 属性が使われているから。

そのため、作成したウィジェット領域は、 AMP ページに出力しないようにしています。

もし出力したとしても、 Simplicity でも Cocoon でもテーマが style 属性を取り除くため、インフィード広告が表示されません。

これにより通常ページと AMP ページとで、関連記事の合計数が異なってしまいます。

もし関連記事数を 10 件にしている場合には、通常ページでは 10 件 + 広告 1 件の計 11 件で表示されます。

それに対し AMP ページでは、 10 件 + 広告 0 件の計 10 件です。

この違いが気になる場合には、今回のカスタマイズはおすすめできません。

合計数を同じにする方法はあるのですが、そこそこ面倒です。


このサイトでは、半年間ほど関連記事リストの中にインフィード広告を設置していました。

ページのかなり下に配置されている割に、レポートの数値は悪くありませんでした。

広告収入を増やしたいなとお考えであれば、カスタマイズをされてはいかがでしょうか。

Cocoon では、関連記事のタイプに「 AdSense 関連コンテンツユニット」があります。これを使っても広告収入が増えそうです。