stinger5でのトップページにアドセンスを表示する方法
2017/02/06
photo by: Massy Biagio - CC BY 2.0
WordPressのテーマ「stinger5」のトップページに「アドセンスの広告」を設置する方法を紹介します！
今までは、記事に３つのアドセンスのみを配置していましたが、徐々に見に来て頂ける方も増えて来ましたので、トップページにも広告を３つ配置してみる事にしましたので、その方法をメモがてら書いておく事にします。
尚、stinger5のデフォルトの設定では、ウィジェットに１つのみの配置になっていますので、収益アップを狙いたい方にオススメします。
事前に確認
アドセンスの広告は１ページに３つまでというルールがあります。なので今回の方法を取る場合はウィジェットに広告を配置している場合は、２つまでとなりますので注意して下さい。
▼配置後はこんな感じです。（記事一覧に配置）
また、「itiran.php」と「style.css」を修正しますので、テキストなどにでもバックアップを取っておく事をオススメします！
itiran.phpの修正
「外観」→「テーマの編集」→「itiran.php」
▼変更前 ２行目
|
1 |
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> |
▼変更後 ２行目
|
1 |
<?php if ( have_posts() ) : while ( have_posts() ) : the_post();$loop_count++; ?> |
さらに下に行きます。
▼変更前
|
1 2 3 4 5 6 7 8 |
<?php the_excerpt(); //スマートフォンには表示しない抜粋文 ?> </div> </dd> </dl> <?php endwhile; else: ?> <p>記事がありません</p> <?php endif; ?> </div> |
▼変更後
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?php the_excerpt(); //スマートフォンには表示しない抜粋文 ?> </div> </dd> </dl> <?php if ( $loop_count == 3 || $loop_count == 7 || $loop_count == 15 ) : ?> <div class="toppagead"> <p style="color:#666;margin-bottom:4px;text-align:center;">スポンサーリンク</p> ここにアドセンスのコードを挿入 </div> <?php endif; ?> <?php endwhile; else: ?> <p>記事がありません</p> <?php endif; ?> </div> |
▼広告の位置
以下のところで、一覧の何行目かをしてしています。
|
1 |
<?php if ( $loop_count == 3 || $loop_count == 7 || $loop_count == 15 ) : ?> |
３、７、１５を好きな数字へ変更して表示位置を調整して下さい。
※文字の大きさや色はお好みで！
style.cssの修正
以下を「style.css」の最後の追加
|
1 2 3 4 5 6 |
.toppagead { margin-bottom: 20px; padding-top: 10px; padding-bottom: 20px; border-bottom: 1px dotted #999; } |
これで完了です！
まとめ
モカは上記のコードを利用して広告を３つ設置しました。アドセンスはレスポンシブを利用しましたが、お好みでタイプを変更してください。