Stinger5でブログTOPの記事一覧にアドセンスを入れる方法

どーも、cv0629です。先日からレスポンシブデザインのstinger5をこのブログのテーマとして使わさせてもらってます。

製作者のENJIさんに感謝しつつ、今回はトップページの記事一覧への広告の入れ方の紹介です!

TOPページの記事一覧に広告ってどゆこと?

 

こんなんです。

toppage-ad2

通常の記事一覧に中に紛れて広告がちょいちょい顔出す感じです。これはENJIさんも採用している掲載方法で、やっぱり目立ちますよね。

出す場所や回数も指定できるので、初めてでも扱いやすいと思いますよ。それでは作っていきましょう。

作り方

広告の準備

Stinger5からレスポンシブデザインになったということで、出来れば広告もレスポンシブをオススメします。

アドセンスにもレスポンシブタイプのものが有るので、まだ使ったことないって人はぜひどうぞ。作り方も通常の広告枠と一緒ですよ。

PHPファイルの編集

※ファイルの編集となりますので必ずバックアップをお願いします。エディタに貼り付けとくだけでもいいので!

まずはitiran.phpを開いてください。ここに記事一覧を吐き出すコードが書いてあります。これにちょこっと付け加える感じですね。

まずは上の方にある

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

というコードを下のコードに変えてください。

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

ちょうど$loop_count++;というのが末尾に足された感じです。

そして下の方にある

        <?php the_excerpt(); //スマートフォンには表示しない抜粋文 ?>
      </div>
    </dd>
  </dl>
  <?php endwhile; else: ?>
  <p>記事がありません</p>
  <?php endif; ?>
</div>

というコードを下のコードに変えてください。

        <?php the_excerpt(); //スマートフォンには表示しない抜粋文 ?>
      </div>
    </dd>
  </dl>
<?php if ( $loop_count == 3 || $loop_count == 7 ) : ?>
<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>

5〜10行目が追加された感じですね。

ちなみ5行目の3,7の数字を変えると、広告が何段目に表示されるか変わります。

さらに|| $loop_count == 数字を加えればもう1段追加できます。サイドバーに広告を出していない人は増やしてもいいかもしれません。

※でも確かアドセンスの掲載数は1ページ3つまでだったので、それは守ってくださいな〜

一応この状態でも表示されるのですが、なんか変なので次はCSSを編集します。

CSSファイルの編集

style.cssの最後に次のコードを追加してください。

.toppagead {
        margin-bottom: 20px;
        padding-top: 10px;
        padding-bottom: 20px;
        border-bottom: 1px dotted #999;
}

どうですか?これでバッチリなはずです!

おまけ

今回はitiran.phpに直接アドセンスのコードを貼り付ける方法で紹介しました。

でもそれだとitiran.phpがとっても読みづらくなるんですよね。なので僕はhome-ad.phpという専用のファイルを作って、サーバーのitiran.phpがあるフォルダにアップしました。

そのファイルの中にアドセンスのコードを書いて、itiran.phpで呼び出すって感じにすればすっきりしたコードのままでいけますよ。一応それも載せときます。

        <?php the_excerpt(); //スマートフォンには表示しない抜粋文 ?>
      </div>
    </dd>
  </dl>
<?php if ( $loop_count == 3 || $loop_count == 7 || $loop_count == 11 ) : ?>
<div class="toppagead">
<p style="color:#666;margin-bottom:4px;text-align:center;">スポンサーリンク</p>
<?php get_template_part('home-ad') ;?>
</div>
<?php endif; ?>
  <?php endwhile; else: ?>
  <p>記事がありません</p>
  <?php endif; ?>
</div>

8行目が該当の箇所です。

最後に

なるべく必要な箇所だけ載せたつもりっす。参考になれば幸い。

 

 

最近出たPHP教本