前回では
stinge5トップページに広告を増やしてアドセンス収益をアップさせるカスタマイズの内容はトップページ記事一覧の最初と最後にアドセンス広告を表示させるカスタマイズを紹介しました。
今回は、さらにバージョンアップさせてトップページ記事一覧の好きなところに、アドセンス広告を表示させるカスタマイズを紹介します。
記事一覧の好きなところにアドセンスを表示
- ここで紹介するstinger5のカスタマイズは、私の備忘録です。
- バックアップは忘れずに!!!
以下記事はワードプレス(WP)や、テーマのstinger5をカスタマイズしたやり方等を忘れないために書き留めた備忘録です
これらを参考にカスタマイズする時は、自己責任でお願いします。
ソースコードを変更する場合は、FTPソフトを使ってサーバーにアップ。または各サーバーのオプション(ファイルマネージャー)等(例はさくらサーバーです)でカスタマイズを行ってください。
サイドバーにアドセンスコードを表示させていない人のために、新たにアドセンスを表示させます。
サイドバーにアドセンス広告を表示させている方が行うと規約違反になりますので注意してください。
そんでどこに表示させるか?と言うと
記事一覧の好きなところにもう一つ表示させます。
「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;>
—-ここにPC用のアドセンスコードを挿入
—-
<?php } ?>
<?php endif; ?>
[/php]
上記コードの最初の行にある「<?php if ( $loop_count == 10 ) : ?>」内の数値は、広告を何番目の記事の下に表示させるかを決める数値です。
私の場合すでに最初と最後に別でコードを記述していたので中間に一つだけですが、表示させる箇所を2箇所にしたい場合は、
「<?php if ( $loop_count == 3 || $loop_count == 7 ) : ?>」
のように記述すれば出来ると思います。
アドセンスコードですが、私の場合、スマホもPC用もレスポンシブ用のアドセンスコードを採用しました。
なのでスマホでみた時、はみ出る時があるみたいなのでスマホ用のコードを一部編集しました。
スマホ用のアドセンスコード内にある「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」等の数値は私のブログでの余白調整です。
もしこれを参考にした場合、それぞれ調整が必要と思われます。
これを応用すれば自分が好きなところに3箇所挿入できる事になります。
是非 チャレンジしてみてはいかがでしょうか?
コメント