はてなブログのインデックスをリスト化して、記事数件ごとにgoogle ADを挿入する

はてなブログのインデックスは記事がが数件ならぶことが多い。これを通常のWebメディアのように記事をリスト化して、ユーザーの回遊性を高めたい。
仕組みは簡単で、インデックスに来たら強制的にアーカイブのページに飛ばすようにするだけです。

いくつか方法はあるようですが、私はこちらのサイトで紹介されているPHPのものを使用しました。

http://dokuwohaku.hateblo.jp/entry/2015/10/11/080000
※ 今回の件でJSのものに変更しようと思いました。

これで、インデックスがリスト化されます。

Google AD Sence を挿入する

ここからが本番である。/archive は50件ほど表示されています。そこで、jQueryを使用して、リストの合間に広告を挿入していきたいと思います。
こちらが最終形態になります。

<script type="text/javascript">
$('document').ready(function(){
        var adsCode = '<div style="margin:16px 0px;"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><ins class="adsbygoogle" style="display:inline-block;width:468px;height:60px" data-ad-client="ca-pub-6759455255419772" data-ad-slot="9553718485"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});<\/script></div>'

      $('.archive-entry:nth-child(5n)').each(function(){
          $(this).append($(adsCode));
      });
});
</script>

こちらがデモです。
http://noriyasu-katano.hatenablog.com/archive

ここまでくるのが結構大変でした。
まずは、google adsence のタグを一行にして、「adsCode」に値を入力するのですが、scriptタグを値に入れる場合、普通に記述したらうまくいかないのです。「\（バックスラッシュ）」を閉じたぐの前に入力しないと機能しないのです。それぞれ含まれているscriptタグにバックスラッシュを入れます。
そして、5件ごとに表示させるようにします。
jQueryで「:nth-child(5n)」を設定するとターゲットのタグやクラスに指定の数ごとに要素を追加することができます。「(5n)」の部分を変更すると件数が変更されます。
最後に「adsCode」を「$()」で囲みます。
この設定をhead内に記述します。

##課題
これで、５件ごとに表示されますが、いくつか課題を感じています。
リスト表示をPHPで処理しているので、それをJSにしたいと思います。PHP自体問題はないのですが、せっかくJSでまとめているので気分的な問題です。
そして、現時点ではhead内に記述しているので、全てのページで作動しています。たまたまページ内にターゲットのクラスがないだけなので、ここのページ認証を行えるようにしたいと思います。