読者です 読者をやめる 読者になる 読者になる

@Satoh_D no blog

大分にUターンしたので記念に。調べたこととか作ったこととか食べたこととか

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を使用する際は使っていただけますと助かります!
あとこのプラグインを作るときにずっと「もっと上手い書き方があるんじゃないか...」とモヤモヤしていたので、良い書き方があるのであれば教えて下さい...!