Stinger5トップページ記事一覧の中にアドセンス広告を増やして収益UP!

前回では
stinge5トップページに広告を増やしてアドセンス収益をアップさせるカスタマイズの内容はトップページ記事一覧の最初と最後にアドセンス広告を表示させるカスタマイズを紹介しました。

今回は、さらにバージョンアップさせてトップページ記事一覧の好きなところに、アドセンス広告を表示させるカスタマイズを紹介します。

新型コロナウイルス北海道の感染場所最新情報!

 

新型コロナ北海道内の感染者数動向の最新情報!

新型コロナの5類移行に伴い、指定した医療機関からの「定点把握」による全国の感染状況を初めて発表。そこで北海道内（特に釧路・札幌）で感染された動向の最新の状況を配信しています。

www.net.y-taka.biz

 

 

記事一覧の好きなところにアドセンスを表示

サイドバーにアドセンスコードを表示させていない人のために、新たにアドセンスを表示させます。

サイドバーにアドセンス広告を表示させている方が行うと規約違反になりますので注意してください。

そんでどこに表示させるか？と言うと

記事一覧の好きなところにもう一つ表示させます。

「itiran.php」を編集

「itiran.php」を開いて下記コードを探します。
[php]
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
[/php]
見つけたら以下のコードに変更した。
（記事の個数をカウントさせるコードを付け加えた）

[php]
<?php if ( have_posts() ) : while ( have_posts() ) : the_post();$loop_count++; ?>
[/php]
次に「itiran.php」をスクロールしていくと下記コードがあるので探します。
[php]
<?php endwhile; else: ?>
<p>記事がありません</p>
<?php endif; ?>
[/php]

見つけたら

[php]
<?php endwhile; else: ?>
[/php]

上記コードのすぐ上に下記コードを追記する。

[php]
<?php if ( $loop_count == 10 ) : ?>
<?php if(is_mobile()) { ?>
<div class=”toppagead”>
<p style=”margin-top:-5px; margin-bottom:-5px; text-align:center;”>
SPONSORED LINK</p>
<div style=”margin-bottom:10px;>
—-ここにスマホ用のアドセンスコードを挿入
—-
<?php } else { ?>
<div class=”toppagead”>
<p style=”margin-top:-5px; margin-bottom:-5px; text-align:center;”>
SPONSORED LINK</p>
<div style=”margin-bottom:10px;>
—-ここにＰＣ用のアドセンスコードを挿入
—-
<?php } ?>
<?php endif; ?>
[/php]
上記コードの最初の行にある「<?php if ( $loop_count == 10 ) : ?>」内の数値は、広告を何番目の記事の下に表示させるかを決める数値です。
私の場合すでに最初と最後に別でコードを記述していたので中間に一つだけですが、表示させる箇所を２箇所にしたい場合は、
「<?php if ( $loop_count == 3 || $loop_count == 7 ) : ?>」
のように記述すれば出来ると思います。

アドセンスコードですが、私の場合、スマホもＰＣ用もレスポンシブ用のアドセンスコードを採用しました。

なのでスマホでみた時、はみ出る時があるみたいなのでスマホ用のコードを一部編集しました。

スマホ用のアドセンスコード内にある「data-ad-format = “auto”」を

「data-ad-format = “horizontal”」に変更しました。
下記コードが私のカスタマイズコードです。
[php]
<?php if ( $loop_count == 10 ) : ?>
<?php if(is_mobile()) { ?>
<div class=”toppagead”>
<p style=”margin-top:-5px; margin-bottom:-5px; text-align:center;”>
SPONSORED LINK</p>
<div style=”margin-bottom:10px;>
<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<!– stinger5 メインセンター –>
<ins class=”adsbygoogle”
style=”display:block”
data-ad-client=”ca-pub-1663407341140267″
data-ad-slot=”4996672565″
data-ad-format=”horizontal”></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!– スマホ（トップページ センター） レスポンシブのアドセンスコードを間に張る。data-ad-format = “horizontal”に変更。　↑ –>
</div>
<?php } else { ?>
<div class=”toppagead”>
<p style=”margin-top:-5px; margin-bottom:-5px; text-align:center;”>
SPONSORED LINK</p>
<div style=”margin-bottom:10px;>
<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<!– stinger5 メインセンター –>
<ins class=”adsbygoogle”
style=”display:block”
data-ad-client=”ca-pub-1663407341140267″
data-ad-slot=”4996672565″
data-ad-format=”auto”></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<?php } ?>
<?php endif; ?>
[/php]

まとめ

上記カスタマイズコードは、例として私の備忘録として残したコードなので間違わないでください。

各styleの「margin」等の数値は私のブログでの余白調整です。
もしこれを参考にした場合、それぞれ調整が必要と思われます。
これを応用すれば自分が好きなところに３箇所挿入できる事になります。
是非　チャレンジしてみてはいかがでしょうか？