【コピペOK】STINGER8カスタマイズ◇インフィード広告をJavaScriptで上から3番目に表示◇第4回

Google AdSenseのディスプレイ広告（バナー）の貼り方について

3回解説してきました。

Google AdSenseの始め方を解説◇第1回

【コピペOK】Google AdSenseの広告コード取得とSTINGER8での広告の貼り方を解説◇第2回

Advanced Adsで記事中のh2の上に自動でGoogle AdSense広告を出す方法◇第3回

Google AdSenseのインフィード広告の貼り方について

3回解説してきました。

【コピペOK】図解◇実例◇インフィード広告の貼り方解説◇STINGER8◇第1回

【コピペOK】図解◇インフィード広告に罫線をCSSで追加する方法◇STINGER8◇第2回

【コピペOK】図解◇実例◇インフィード広告を下にも追加◇STINGER8◇第3回

今回はインフィード広告の貼り方4回目です。

JavaScriptを使って記事一覧の

上から◯番目に広告を表示させる方法です。

ついでに、記事の表示件数が少なかったので、

記事10件に変更して、

インフィード広告を4件（一番上、上から3番目、最下部に2つ）

合計14件の表示にしたいと思います。

実例◇プリスクールパークのインフィード広告

プリスクールパークは無料テーマの『STINGER8』を使って作られているサイトになります。

全国のプリスクール（英語の幼稚園）を紹介しており、

市区町村ごとに一覧でプリスクールを見ることができます。

例として世田谷区を見てみましょう。

1番上、上から3番目、下部2つがインフィード広告になっています。

10件のプリスクールと4件のインフィード広告が一覧になっているわけです。

インフィード広告の作り方の流れ

①Google AdSenseでインフィード広告を作る

②WordPressのプラグインAdvanced Adsでテーマ機能（ショートコード）にする。

③STINGER8のitiran.phpに追加する。

第一回で①と②は説明しているので、

分からない方は第一回目の記事をご確認ください。

【コピペOK】図解◇実例◇インフィード広告の貼り方解説◇STINGER8◇第1回

今回は③のitiran.phpの編集方法を解説していきます。

STINGER8のitiran.phpに追加します

プリスクールパークはSTINGER8を使っているので、

STINGER8で説明していきます。

STINGER8は一覧ページはitiran.phpです。

他テーマだとcategory.phpやarchive.phpが

一覧ページではないかと思います。

他のテーマの方も参考にしてくださいね。

前回までに完成したPHP（itiran.php）

<?php if ( have_posts() ) : ?> 　
  <!--インフィード広告 feed_上　ここから--> 　
  <?php the_ad(XXXX); ?> 　
  <!--インフィード広告 feed_上　ここまで--> 
<?php while ( have_posts() ) : the_post(); ?> 
. 
. 
(省略) 
. 
. 
<?php endwhile; ?>
 <!--インフィード広告 feed_下01　ここから-->
  <article class="ads__feed">
  <?php the_ad(XXXX); ?>
  </article>
  <!--インフィード広告 feed_下01　ここまで-->
<?php else: ?>
  <?php if ( is_search() ) : ?>
  <?php if ( is_search() ) : ?>
  //検索結果ページ
  <p>まだ「<?php echo esc_html( $s ); ?>」に関するプリスクールはありません。</p>
  <?php elseif ( is_category() ) : ?>
  //カテゴリーページ
  <p>まだ「<?php single_cat_title(); ?>」のプリスクールはありません。</p>
  <?php endif; ?>
<?php endif; ?>
  <!--インフィード広告　feed_下02　ここから-->
  <article class="ads__feed">
  <?php the_ad(XXXX); ?>
  </article>
  <!--インフィード広告 feed_下02　ここまで-->

feed_上、feed_下01、feed_下02の3つのインフィード広告が入りました。

今回の最終完成形

（itiran.php）

<?php
$ads_infeed = '3'; //何番目に表示したいか
$ads_infeed_count = '1';
?>

これをループの前に、、、。

3を5にすれば、5番目に広告が表示されますよ。

<?php
if($ads_infeed_count == $ads_infeed){
?>
<article class="ads__feed">
<!--インフィード広告 feed_3番目　ここから-->
<?php the_ad(XXXX); ?>
<!--インフィード広告 feed_３番目　ここまで-->
</article>
<?php
}
$ads_infeed_count++;
?>

これをループの中に、、、となります。

完成したPHP（itiran.php）

<?php if ( have_posts() ) : ?> 　
  <!--インフィード広告 feed_上　ここから--> 　
  <?php the_ad(XXXX); ?> 　
  <!--インフィード広告 feed_上　ここまで--> 
  <?php
  $ads_infeed = '3'; //何番目に表示したいか
  $ads_infeed_count = '1';
  ?>
<?php while ( have_posts() ) : the_post(); ?> 
  <?php
  if($ads_infeed_count == $ads_infeed){
  ?>
    <article class="ads__feed">
    <!--インフィード広告 feed_3番目　ここから-->
    <?php the_ad(XXXX); ?>
    <!--インフィード広告 feed_３番目　ここまで-->
    </article>
  <?php
  }
  $ads_infeed_count++;
  ?>
. 
. 
(省略) 
. 
. 
<?php endwhile; ?>
 <!--インフィード広告 feed_下01　ここから-->
  <article class="ads__feed">
  <?php the_ad(XXXX); ?>
  </article>
  <!--インフィード広告 feed_下01　ここまで-->
<?php else: ?>
  <?php if ( is_search() ) : ?>
  <?php if ( is_search() ) : ?>
  //検索結果ページ
  <p>まだ「<?php echo esc_html( $s ); ?>」に関するプリスクールはありません。</p>
  <?php elseif ( is_category() ) : ?>
  //カテゴリーページ
  <p>まだ「<?php single_cat_title(); ?>」のプリスクールはありません。</p>
  <?php endif; ?>
<?php endif; ?>
  <!--インフィード広告　feed_下02　ここから-->
  <article class="ads__feed">
  <?php the_ad(XXXX); ?>
  </article>
  <!--インフィード広告 feed_下02　ここまで-->

feed_上、feed_3番目、feed_下01、feed_下02の4つのインフィード広告が入りました。

記事の表示件数を変更

設定＞表示設定　から『１ページに表示する最大投稿数』を

変更します。今回は10投稿にします。

これで記事10件、インフィード4件が表示されるようになったと思います。

プレビューしてみましょう！

ここまで4回に渡ってインフィード広告の貼り方を解説してきました。

綺麗に仕上がりましたでしょうか？

Advanced Adsのテーマ機能を使っているので、

itiran.phpもスッキリしてますよね。

Advanced Adsを使って広告を管理するのが

キモだと思います。

ここまでお付き合いありがとうございました！

【コピペOK】SANGOカスタマイズ◇インフィード広告をJavaScriptで表示◇第5回