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

Akira

福岡在住ウェブデザイナー。Web サイト制作に役立つ情報を紹介しています。AMP が大好き。

FacebookTwitter で記事の更新をお知らせしています。

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

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

このインフィード広告を WordPress テーマ SimplicityCocoon の関連記事リストの中に設置するカスタマイズの紹介です。

完成図

カスタマイズ後は、関連記事リストの中に広告が設置されます。尚、広告のスタイルは、関連記事のスタイルと同じにできます。

ウィジェットエリアを作成

カスタマイズで最初にすることは、ウィジェットエリアの作成です。

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 ウィジェットに、広告コードを貼り付けます。

あとは必要に応じて 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 ページで出力しないようにしています。

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

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

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

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

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

おわりに

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

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

「広告収入を増やしたいな」とお考えであれば、今回のカスタマイズをお試しになるといいかもしれません。

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

コメント

  1. 関連コンテンツを2番目だけでなく,複数で表示したいときはどのように設定したら良いのでしょうか??

    • 関連コンテンツですか?広告ではなく?「関連コンテンツの 2 番目だけでなく」でしょうか。

      もし、広告であれば、$count をご希望の数だけ指定されると複数の広告を表示できます。例えば、2 番目と 5 番目(2 番目の広告を含めて 5 番目)に広告を表示する場合には、こんな感じです。12 行目で広告の配置場所を指定します。

      (2 月 18 日 0 時に、コードを簡略するための修正をしました。)

      <?php
      if ( $query->have_posts() && ! empty( $args ) ) :
        
        $count = 0;
        
        while ( $query->have_posts() ) : $query->the_post();
        
          $count++;
          
          if ( is_active_sidebar( 'ad-related-widget' ) === true && is_amp() === false ) {
            
            if ( $count === 2 || $count === 4 ) { // 2 番目と 5 番目(2 番目の広告は数に入らないので、関連記事の 4 番目として指定)
              echo '<div class="ad-related">';
                dynamic_sidebar( 'ad-related-widget' );
              echo '</div>';
            }     
          }
          ?>

送信に失敗しました

ボットと判定された可能性があります。

大変お手数をおかけしますが、以下の内容をご確認の上、再度のコメントの送信をお願い申し上げます。