ぼくらの研究

ぼくらのための研究をしていきます。

Stinger Plus+で記事一覧(記事と記事の間)にアドセンス広告を入れる方法

   

記事一覧の間にアドセンス

Stinger Plus+で記事一覧の記事と記事の間にアドセンス広告を入れる方法を備忘録的も兼ねて書いておきます。

itiran-thumbnail-on.phpの編集

まずWordPress管理画面→「外観」→「テーマ編集」→「itiran-thumbnail-on.php」へ進みます。ここが記事一覧を表示している部分です。

このテンプレートで変更する部分は2箇所です。

1.2行目にloop_countを追加

itiran-thumbnail-on.phpの1行目～3行目はデフォルトではこんな感じになってるはず。

 

<div class="kanren <?php st_marugazou_class(); //サムネイルを丸くする ?>">
	<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
		<dl class="clearfix">

 

ここの2行目を以下のように変更します。

 

<div class="kanren <?php st_marugazou_class(); //サムネイルを丸くする ?>">
	<?php if ( have_posts() ) : while ( have_posts() ) : the_post();$loop_count++; ?>
		<dl class="clearfix">

 

『$loop_count++; ?』というのを追記した感じですね。
簡単に言うとこの変数に「今何個目の記事を表示しようとしてるか」というのが格納されます。まずこれが1箇所目の変更。

 

29行目に表示位置設定とアドセンスコードを貼り付け

次の変更は29行目あたり。

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

 

この29行目に部分に
・何番目の記事の位置にアドセンス広告を表示させるかのif文(さっきのloop_count変数を利用)
・Stingerで使ってるアドセンス広告表示コード
を追記します。

 

具体的には、

<?php if ( $loop_count == ● || $loop_count == ● ) : ?>

という条件文(●には任意の数を設定可。例えば最初の●に3、次の●に6を入れると、3番目と6番目の記事の後にだけ記述コードを有効にできる)と
「st-ad.php」に記述されいるアドセンス表示コードを貼り付けます。
(アドセンスは直で貼ってもいいんですが、スマホやモバイルとPCの分岐の部分が面倒ですしせっかくStinger plus+自体にいい感じにまとめられている部分があるのでそれを使うのが効率的かなと)

 

これを反映させると以下のような感じになります。

			</dd>
		</dl>
<?php if ( $loop_count == 5 || $loop_count == 10 ) : ?>
<p style="color:#666;margin-bottom:5px;">スポンサーリンク</p>
<div style="margin-bottom:10px;">
	<?php if ( st_is_mobile() ) { //スマートフォンの時は300pxサイズを ?>
		<?php if ( function_exists( 'dynamic_sidebar' ) && dynamic_sidebar( 4 ) ) : else : ?>
		<?php endif; ?>
		<?php
	} else {  //PCの時は336pxサイズを
		?>
		<?php if ( function_exists( 'dynamic_sidebar' ) && dynamic_sidebar( 3 ) ) : else : ?>
		<?php endif; ?>
		<?php
}?>
</div>

<?php endif; ?>

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

 

これで記事と記事の間の好きな位置にアドセンス広告を表示できます。

 

スポンサーリンクラベル部分の編集

ただ、これだと見た目が悪いです。それとmargin-bottomが5pxしかないので、アドセンスの規約にも抵触しそう……。

なのでスポンサーリンク(ラベル)を中央寄せにして、点線も引いて見た目よくして、marginとかpaddingもいろいろ調整してみましょう。

ぼくは最終的にはこんな感じにしました。

 

			</dd>
		</dl>
<?php if ( $loop_count == 5 || $loop_count == 10 ) : ?>
<p style="color:#666;margin-bottom:5px;" align="center">スポンサーリンク</p>
<div style="margin-bottom: 20px; padding-top: 10px; padding-bottom:20px; border-bottom: 1px dotted #ccc;">
<center>
	<?php if ( st_is_mobile() ) { //スマートフォンの時は300pxサイズを ?>
		<?php if ( function_exists( 'dynamic_sidebar' ) && dynamic_sidebar( 4 ) ) : else : ?>
		<?php endif; ?>
		<?php
	} else {  //PCの時は336pxサイズを
		?>
		<?php if ( function_exists( 'dynamic_sidebar' ) && dynamic_sidebar( 3 ) ) : else : ?>
		<?php endif; ?>
		<?php
}?>
</center>
</div>

<?php endif; ?>

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

 

centerタグはスマートじゃないけどcssつかわないでやってるので許してください。(divの横幅指定できないからmargin:0 auto;できないんだよね) cssでクラス指定すればもっとすっきりさせてもOK

 

以上、ご参考まで。

 

※今回のカスタマイズは2016/06/30時点の最新バージョン「STINGER Plus ver20160612」をもとに行っております。今後テーマに変更があった場合にも同じ変更ができるとは限りません。あしからず。