WP-PostRatings

各記事の評価を星の数などで評価できる仕組みを見たことがある人も多いかｔ思いますが。それを簡単に設置することができるのプラグインが「WP-PostRatings」です。

また、WP-PostRatingsは記事の評価だけではなく、評価された記事の一覧をサイドバーなどに表示させることもできるため、人気記事ランキングを作成することもできます。

WP-PostRatingsの評価方法はいくつかありますが、ここでは東池袋カレーマップでも使用している「5段階評価」の導入方法を紹介したいと思います。

WP-PostRatings設定目次

WP-PostRatingsのインストール

１、WordPressのダッシュボードにログインし［プラグイン］→［新規追加］をクリック

２、検索窓に「WP-PostRatings」を入力して［プラグインの検索］をクリック

３、WP-PostRatingsの下にある［いますぐインストール］をクリック

４、「本当にこのプラグンをインストールしていいですか？」と聞かれるので［OK］をクリック

５、インストールしているプラグイン: WP-PostRatings 1.62と表示されるので、［プラグンを有効化］をクリック（バージョンは変更になる可能があります）

６、プラグンのラインナップにWP-PostRatingsが表示されていればインストール完了です

WP-PostRatingsの日本語化

WP-PostRatingsは初期設定ではオール英語になってしまています。このままでもなんとなくは使えますが、日本語ファイルも配布されていますし、詳細設定等を行なうには日本語化しておいたほうが気楽なので、日本語化をしておきます。

設定についてはこのあと説明しますが、初期の設定画面はこんな感じ

１、日本語化ファイルを以下のサイトからダウンロード

NetSphere：WordPressプラグイン「WP-PostRatings」の日本語ファイルを公開

2011年12月13日確認時点でのバージョンは「日本語ファイルv1.62.1（UTF-8のみ）」です。

２、ダウンロードしたファイルを解凍

３、FTPツール等を使って「/wp-content/plugins/wp-postratings」フォルダにwp-postratings-ja.moをアップロード

設定画面を覗くと日本語になっているはずです。

WP-PostRatingsの設定確認

基本的には初期設定のまま使用するので、変更箇所はありませんが、変更する可能性もありますので、設定の確認を行なっておきます。

１、WordPressのダッシュボードにログインし［記事評価］をクリック
　　（WP-PostRatingsを有効化にすると表示されます）

評価管理画面

※評価管理は空欄ですが、評価が溜まってくると次のような画面になります（参照：地ビールの森）

２、サイドメニューの［評価オプション］をクリック

３、Post Ratings Optionsになるので、メーター画像が「stars」になっていることを確認

４、サイドメニューの［表示テンプレート］をクリック

６、表示オプションが日本語になっていることを確認

※もし、表示オプションが英語になっているようなら、［デフォルトに戻す（ノーマル形式）］をクリックすれば日本語に変更されます。

テーマファイルへの埋め込み（記事編）

設定の確認が終わったところで、次に5段階評価の星を記事ページに表示させるために、WordPressのテーマファイルへの埋め込みを行います。

東池袋カレーマップはWordPressのデフォルトテーマの「Twenty Ten」をベースにカスタマイズしているかんけいで、編集するテーマファイルは「loop-single.php」になります（テーマファイルによって若干違ってくると思います）

＜要注意＞
テーマファイルの編集に入りますが、WP-PostRatingsの部分だけピックアップしているため、基本的なテーマファイルの編集部分は省略しています。テーマファイルの編集について詳しく知りたい方はWordPressのインストールの「WordPressのテーマ作成に役立つサイト」などを参考にしてください。

＜編集開始＞
メニューの［外観］→［テーマ編集］を開き、右のメニューから「loop-single.php」をクリックします。記事関連の記述があるところに以下のファイルを追加。

<?php if(function_exists('the_ratings')) { the_ratings(); } ?>

実際のテーブルに組み込んだのがこれ、実はCustom Field Templateの説明の時点ですでに組み込まれています^^

<tr><td class="name">口コミ評価</td><td><?php if(function_exists('the_ratings')) { the_ratings(); } ?>（５段階の口コミ評価です。星を選択することで評価できます。皆様の口コミ評価をお待ちしています！）</td>
</tr>

記事ページではこのようになります。

マウスカーソルを載せると星の色が変化します。

テーマファイルへの埋め込み（サイドバー編）

記事ページへの埋め込みが終わったところで、次はサイドバーへの埋め込みを行います。

東池袋カレーマップはWordPressのデフォルトテーマの「Twenty Ten」をベースにカスタマイズしている関係で、編集するテーマファイルは「サイドバー（sidebar.php」になります（テーマファイルによって若干違ってくると思います）。

ウィジェットを使って表示させることも可能ですが、個人的にテーマファイルに書かれていたほうが分かりやすいため、直接編集を行なっています（ウィジェットのやり方は各自調べてください）。

サイドバーの「記事評価ランキング」を表示したい所のに次のソースを追加。

<nav class="popularity">
<h3>口コミランキング ベスト10</h3>
<?php if (function_exists('get_highest_rated')): ?>
<ol class="popularity">
<?php get_highest_rated(post); ?>
</ol>
<?php endif; ?>
</nav>

get_highest_rated(post)とすることで、固定ページはカウントせず記事ページの中から、評価の高い記事を上から順番に表示してくれます。

WP-PostRatingsは素直に「<li>～</li>」を繰り返してくれるので、その上にリストタグで囲ってあげる必要があります。今回はランキングのため、順位の表示できる<ol>タグを使っています。

＜参考＞
上記ページに適応させているCSSはこちらになります。

nav.popularity{
	width:300px;
	padding: 0px 0 25px 0px;
	}
nav.popularity h3{
	height:24px;
	line-height:24px;
	background:url(./images/side_back.png);
	padding: 0 0 0 3px;
	border:none;
	}
nav.popularity ol{
	padding: 10px 10px 15px 30px;
	}
nav.popularity ol li{
	margin: 0 0 8px 0;
	font-size:14px;
	line-height:1.3;
	list-style-type: decimal;
	}

母数が少なくて寂しい状況ですが、記事への評価が入ると次のように表示されます。

One Response to WP-PostRatings

Warning

/home/ytkidd2/make.mapmap.biz/public_html/wp-includes/class-walker-comment.php

184