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__"/> で取り出せます。

以上です。

トラックバック

The trackback URL is "".

コメント

以前深夜にTwitterでお世話になりました。
どうもprototype.jsが入っている環境では動作しないという結論で解決しました。

さて、ランキング上位のみを抽出表示するテンプレートを作ってみました。
コミュニティーブログで使用させていただいております。

=========
<mt:Ignore>
●あらかじめ評価した人数がP人以上、評価Q以上の場合のみを抽出してEntryIDを取得します。不要ならmt:Ifを削除してください。
</mt:Ignore>
<mt:Entries>
<mt:If tag="EntryRatingCount"ge="P">
<mt:If tag="EntryRating" ge="Q">
<mt:SetVarBlock name="RankRating"><mt:EntryRating></mt:SetVarBlock>
<mt:SetVarBlock name="RankEntryID"><mt:EntryID></mt:SetVarBlock>
<mt:SetVar name="RankHush" key="$RankEntryID" value="$RankRating" />
</mt:If>
</mt:If>
</mt:Entries>

<mt:Ignore>
●EntryIDと順位を結びつけます。配列は name="RankHush" index="EntryID" value="(評価の値)" を利用
</mt:Ignore>
<mt:SetVar name="RankPosition" value="1">
<mt:Loop name="RankHush" sort_by="value reverse">
<mt:SetVar name="RankingSection" index="$RankPosition" value="$__key__" />
<mt:SetVar name="RankPosition" op="+" value="1">
</mt:Loop>

<mt:Ignore>
●ランキングを出力します。第R位までを想定。
</mt:Ignore>
<mt:for var="num" from="1" to="R">
<mt:If name="RankingSection[$num]">
<mt:SetVarBlock name="CallID"><mt:Var name="RankingSection[$num]"></mt:SetVarBlock>
<mt:Entries id="$CallID" >
   <!-- 各エントリの表示処理 -->
</mt:Entries>
</mt:If>
</mt:for>

コメントする