Tumblrで月別投稿数を表示するjQueryプラグインを作った
Tumblrって月別投稿数を表示するタグってないんですね。。
某案件でこの機能が必要だったので、jQuery Boilerplateを使用してのjQueryプラグイン作りの練習も兼ねて作成しました。
WordPressやMTなら割と簡単にできるのに。。
Satoh-D/jquery-tumblrMoArcs-js
このプラグインについて
Tumblrのブログに下記のような月別投稿数を表示します。
それだけです、それだけなんです。
実際にこのブログのフッタでも使用しているので見てみるとイメージが湧きやすいかと思います。
- 2014/4 (99)
- 2014/3 (99)
- 2014/2 (99) ...
仕組みについて
Tumblrにはアーカイブページが用意されており、ヘッダ部分に月別投稿数が表示されています。
その部分をAjaxで取ってきて表示しています。
使用方法
jQuery.jsとjquery.tumblrMoArcs.jsを読み込みます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="jquery.tumblrMoArchs.js"></script>
月別投稿数を表示したい領域を作成し、プラグインを実行します。
これで先ほどの例のようなリストが表示されます。
<script> $(function() { $('#monthyArchive').tumblrMoArchs(); }); </script> . . . <div id="monthyArchive"></div>
また、出力される日付のフォーマットを変更することができるようにしています。
変更する際はMoment.jsをあらかじめ読み込んでください。
オプションについて
jquery.tumblrMoArcs.js には次のオプションを用意しています。
- url: アーカイブページのURL (デフォルト: '/archive')
- months: 月別投稿数が表示されているセレクタ (デフォルト: '#browse_months_widget li:not(.empty)')
- dateFormat: 日付のフォーマットを変更するかどうか。 (デフォルト: false)
- formatTxt: 日付のフォーマットを入力します (デフォルト: '')
あとがき
Tumblrを使用する際は使っていただけますと助かります!
あとこのプラグインを作るときにずっと「もっと上手い書き方があるんじゃないか...」とモヤモヤしていたので、良い書き方があるのであれば教えて下さい...!