Stingerの一覧表示で、途中に広告を入れる。

Stingerの記事一覧で、途中に広告を入れてみた。
忘備録として記録。

Stingerで、記事一覧のときに、広告を挟む設定。
作業環境
・Stnger Plus（子テーマ利用）
・サイドバーや、ヘッダ、フッタに広告設定なしの設定時。

手順１⇒　子テーマに設定ファイルをコピーする。

FTPソフトで、
/ドメイン/public_html/wp-content/themes/stingerplus
の中にある「itiran-thumbnail-on.php」をダウンロード。

/ドメイン/public_html/wp-content/themes/stingerplus-child
のここへ、アップロード。

※こうしておけば、元に戻したい時は、子テーマの「itiran-thumbnail-on.php」のファイルをFTPソフトで削除するだけでOKだから安心。

手順２⇒　phpファイルの修正

ブラウザで、Stingerのダッシュボードへ移って、
外観⇒　テーマの編集（子テーマ）⇒　itiran-thumbnail-on.php
（さっきコピーしているので見えているはず）

２行目の
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
を
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); $loop_count++; ?>
に置き換え。

２９行目の
</dl>
の下に、以下を追加。■■■は、挿入したい広告コード。
サイドバーなどに常時広告を設定している場合は、表示数調整！（３つまでだしね。）
<?php if ( $loop_count == 1 || $loop_count == 4 || $loop_count == 7 ) : ?>
<div class="itiran-ad">
<p>スポンサーリンク</p>
■■■
</div>
<?php endif; ?>

手順３⇒　見た目の修正

次に、スタイルシート（style.css）の修正。一番下の行でいいので、以下を追加。
.itiran-ad { /* 広告枠 */
text-align: center;
padding-bottom: 15px;
margin-bottom: 20px;
border-bottom: 1px dotted #C8C8C8;
}
.itiran-ad p { /* スポンサーリンク */
font-size: 14px;
line-height: 1em;
color: #999;
margin-bottom: 5px;
}

これで、かなりいい感じに表示してくれます。
広告コードは、レスポンシブルを設定しておくと、スマホでは、レクタングルが表示されます。