5 Star Comment Rating を使ってブログ記事の評価ランキングを作るテンプレート

当ブログで公開している Movable Type のプラグイン「5 Star Comment Rating」は、Movable Type のコメント機能を利用して、ブログ記事に5つ星の評価を付けることができるプラグインです。

このプラグインについて、以下のような質問を頂きました。

記事の評価が高い順に、ランキング表示できたらさらにプラグインが生きると思うのですが、実装予定は無いですかね

これについては、プラグインで実装しなくてもテンプレートだけで実現できますので、その方法をご紹介します。

プラグインの基本的な使い方は「5 Star Comment Rating」のページを参照してください。

テンプレート

今回は、インデックステンプレートに、ol 要素でランキングを表示してみます。完成したテンプレートは次のようになります。

<mt:Entries>
<mt:EntryRating setvar="rating" />
<mt:SetVarBlock name="ranking{$rating}">
<a href="<mt:EntryPermalink />"><mt:EntryTitle /></a> <mt:EntryRatingStar />
</mt:SetVarBlock>
</mt:Entries>
<mt:Loop name="ranking" sort_by="key reverse">
<mt:If __first__><ol></mt:If>
<li><mt:Var name="__value__"/></li>
<mt:If __last__></ol></mt:If>
</mt:Loop>

解説

このテンプレートでは、上段で MTEntries タグでブログ記事をリストアップし、それをハッシュに格納します。そして後段で、そのハッシュの値を MTLoop タグで出力します。

まず、MTEntries タグの中から順番に見ていきましょう。

MTEntryRating タグと setvar モディファイアで、ループ中のブログ記事の平均評価数を変数 rating に格納します。

<mt:EntryRating setvar="rating" />

その変数 rating をキーとし、その記事へのリンクとその記事の平均評価を星で表したもの( MTEntryRatingStar タグ)を値として、ハッシュ変数 ranking に格納します。つまり、MTEntries タグではソースは出力しません。

<mt:SetVarBlock name="ranking{$rating}">
<a href="<mt:EntryPermalink />"><mt:EntryTitle /></a> <mt:EntryRatingStar />
</mt:SetVarBlock>

そして、下段の MTLoop タグで、ハッシュ変数 ranking の値を出力します。sort_by モディファイアに「key reverse」を指定することで、キーを基準にソートして、その結果を降順で出力します。

<mt:Loop name="ranking" sort_by="key reverse">
<mt:If __first__><ol></mt:If>
<li><mt:Var name="__value__"/></li>
<mt:If __last__></ol></mt:If>
</mt:Loop>

<mt:If __first__></mt:If> や <mt:If __last__></mt:If> で囲まれた部分は、ループの最初と最後のみ出力されます。ハッシュ変数の値は <mt:Var name="__value__"/> で取り出せます。

以上です。

  • このエントリーをはてなブックマークに追加
Just a second...