WordPressテーマSTINGER PLUSでトップの記事一覧にAdSense広告を表示する

2017年1月8日

アドセンス

STINGER PLUSで、記事一覧にAdSense広告を差し挟む方法です。

Google AdSenseでは、クリックされなくても広告が表示されるだけで収益になる場合がありますので、広告の数は増えれば増えるほどお得です。

「AdSense広告は1ページに3つまで」という制約も撤廃されましたので、効率的に広告を配置していきましょう。

今回はSTINGER PLUSでのカスタマイズ方法載せておりますが、応用すれば他のテーマでもやり方は一緒のはずです。

コード変更例

変更箇所その1

編集するコードは、記事一覧を表示するファイルです。
STINGERPLUSでは、「itiran-thumbnail-on.php」です。

「itiran-thumbnail-on.php」の2行目にあるこのコードを、このように編集します。

変更前

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

変更後

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); $loopCount++; ?>

変更箇所その2

次に、同じく「itiran-thumbnail-on.php」の、下の方にある箇所を編集します。

変更前

</dl>
	<?php endwhile;
	else: ?>
		<p>記事がありません</p>
	<?php endif; ?>
</div>

変更後

</dl>
<?php if ( $loopCount == 5 || $loopCount == 10 || $loopCount == 15 ) : ?>
<div class="ichiran-ad">

//ここにAdSense広告コードを挿入

</div>
<?php endif; ?>
	<?php endwhile;
	else: ?>
		<p>記事がありません</p>
	<?php endif; ?>
</div>

「//ここにAdSense広告コードを挿入」と書いてある部分に、コードを入れます。

「$loopCount == 5 || $loopCount == 10 || $loopCount == 15」という部分で、広告を挿入する箇所の指定をしています。
すなわち、「5番目の記事の後、10番目の記事の後、15番目の記事の後」という意味です。

この数字を変えることで、広告表示位置を自由に変えることができます。

CSSを調整する

そのままでは見た目がよくないので、私はこのようにCSSを追記しました。

.ichiran-ad {
     margin-left: auto;
     margin-right: auto;
     margin-top : 20px;     
     margin-bottom : 30px;     
     max-width: 336px;
}

これで、広告が中央に表示されます。

また、max-widthを336pxに指定することで、レクタングル広告が出てくるように狙っています。

皆様もお試しあれ！

ブログ運営

Posted by auto-ts.net