Welcart カスタマイズ ブログ

Comment Rating Field Pluginを無料でパワーアップさせるカスタマイズ集

• ツイート
• B! ブックマーク
• Google+
•  Pocket
• Facebook

以前Comment Rating Field Pluginという、コメント欄に星の評価を追加して、記事（商品）の評価をつけることができるプラグインを紹介しました。

有料版を購入すれば、複数項目の評価や「ハーフスター」の表示が可能になりますが、無料版でもある程度のカスタマイズが出来ましたので、半分自分用のメモとして置いておきます。

2015/5/20更新：プラグインが更新されていくと、こちらの記事で紹介しているコードは将来的にエラーに変わる可能性があります。安全を期すならば有料版を買いましょう。

もくじ

1. 任意の場所に星を表示させるコード
2. ショートコードで記事内に自由に表示
3. 星の画像を違うものにする
4. ハーフスターを表示させる
5. 平均点を算出する
6. リッチスニペットに対応させる
7. まとめ

1. 任意の場所に星を表示させるコード

デフォルトでは、評価の平均の星の数はコンテンツの下にしかを表示させられません。

使用中のテーマの中で、テンプレート中の任意の場所で評価の星を表示させたい場合、自分でコードを挿入することによってそれが実現出来ます。

任意の場所に表示させたい場合のコードはこちらです。

<div class="crfp-rating crfp-rating-<?php echo get_post_meta($post->ID, 'crfp-average-rating', true); ?>"></div>

※必ずループ内に入れて下さい。

archive.php等のアーカイブ用テンプレートにこのコードを使えば、それぞれの記事（商品）の星の数を表示させることも可能です。

※評価が行われていない記事（商品）には星は表示されません。

ショップ用にはこのようなレビュー表示があるとより良いですね。

コメント数を表示させるcomments_number();を星の横に入れれば、「○件のレビュー」という文言も表示出来ると思います。

2. 記事内にショートコードで自由に表示

1の方法をアレンジして自分でショートコードを作れば、記事内にショートコードを使って星の画像を表示させることが可能です。

以下のコードを使用中のテーマのfunctions.phpに記載します。

//評価の平均値（星）を表示
function my_star_img(){
    global $post;
    $star_num = get_post_meta($post->ID, 'crfp-average-rating', true);
    $star_img = '<div class="crfp-rating crfp-rating-' .$star_num.'"></div>';
    return $star_img;
}
add_shortcode('star_img', 'my_star_img');

記事の編集画面で[star_img]というショートコードを入れれば、記事内で任意の場所に表示させることが出来ます。

3. 星の画像を違うものにする

これも有料版では違う画像に変更可能ですが、無料版でも自分で画像を用意してスタイルシートに画像URLを指定させることによって可能です。

3-1. 画像を用意

用意する画像は、16 x 48pxの、背景が透過の画像です。フォーマットはgifかpng。※透過しなくてもいいという方はjpg等でも可。

画像はこんな感じのものを用意。

• 一番上：グレー（コメント欄での評価用）
• 二番目：ちょっと色があるタイプ（コメント欄での評価用）
• 三番目：評価として実際に表示される画像

つまりは、16 x 16の画像を縦に３つ繋げればいいだけです。

3-2. スタイルシートで読み込む

画像が用意出来たら、スタイルシート（style.css等）に、以下のようにして画像を指定させます。

例）テーマの画像用フォルダ（/img/）に入れた、mystar.pngという名称の画像を指定。

div.crfp-rating,
div.star-rating,
div.star-rating a{
    background-image: url(./img/mystar.png);
}

こうすることで、星の画像を読み込むComment Rating Field Pluginのデフォルトのスタイルシートが上書きされ、自分が用意した画像が読み込まれるようになります。

4. ハーフスターを表示させる

無料版では、整数分の星の画像しか出ません。これを、小数点以下第１位の数字が３～７の間の場合は、ハーフスターが出るようにします。

4-1. comment-rating-field-plugin.phpをカスタマイズ

プラグインフォルダ内のcomment-rating-field-plugin.phpを直接カスタマイズします。更新時には上書きされますのでご注意下さい。

177行目あたりの$averageRatingの式の最後の数字を0から1に変更。更に、その直後にコード（以下では178～182行目）を追加します。

$averageRating = (($totalRatings == 0 OR $totalRating == 0) ? 0 : round(($totalRating / $totalRatings), 1));
$averageRating_dec = substr( $averageRating, -1, 1);
$averageRating = substr( $averageRating, 0, 1);
if( $averageRating_dec >= 3 && $averageRating_dec <= 7){
    $averageRating .= '-5';
}

ここでは、平均点の小数点以下の数字が３から７の間の時に、post_metaのcrfp-average-ratingというmeta_valueに、-5という文字列を追加するようにしています。

例えば、平均が3.2なら「3」のままですが、3.3だと「3-5」というふうになります。

4-2. スタイルを追加

次に、CSSに以下のスタイルを追加します。小数点以下の数字が３から７の間の時には、星が半分になって表示されます。

.crfp-rating-4-5 {
    width: 72px !important;
}
.crfp-rating-3-5 {
    width: 56px !important;
}
.crfp-rating-2-5 {
    width: 40px !important;
}
.crfp-rating-1-5 {
    width: 24px !important;
}
.crfp-rating-0-5 {
    width: 8px !important;
}

カスタマイズするコードはデータベースを参照するものなので、ファイルを書き換えただけではすぐに反映されず、新たなコメントが投稿されてデータベースが更新された際に初めて確認出来ます。

5. 平均点を算出する

数値として平均点を表示させる場合は、以下のコードをfunctions.phpに記述。プラグインファイルのfunction updatePostRatingByPostIDのコードを参照しています。

2015/5/20更新：プラグインのコードが新しくなっていたので、それに合わせてコードを刷新しました。【確認バージョン】Comment Rating Field Plugin v2.0.8

function my_averagePoint($out ='') {
	global $wpdb, $post;
	$postID = $post->ID;
	// Get all approved comments and total the number of ratings and rating values for fields
	$comments = get_comments(array(
	'post_id' 	=> $postID,
	'status' 	=> 'approve',
	));

	// Calculate
	$totalRating = 0;
	$totalRatings = 0;
	$averageRating = 0;
	if (is_array($comments) AND count($comments) > 0) {
		// Iterate through comments
		foreach ($comments as $comment) { 
			$rating = get_comment_meta($comment->comment_ID, 'crfp-rating', true);
			if ($rating > 0) {
			$totalRatings++;
			$totalRating += $rating;
			}
		}
		// Calculate average rating
		$averageRating = (($totalRatings == 0 OR $totalRating == 0) ? 0 : round(($totalRating / $totalRatings), 0));
	}

	update_post_meta($postID, 'crfp-total-ratings', $totalRatings);
	update_post_meta($postID, 'crfp-average-rating', $averageRating);

	if( $totalRatings > 0) {
		$averagePoint = round(($totalRating / $totalRatings), 1);
	} else {
		$averagePoint = '評価なし';
	}
	if($out == 'return'){
		return $averagePoint;
	} else {
	echo $averagePoint;
	}
}

テンプレート上で呼び出す時に、以下のコードを記述すればOKです。

<?php my_averagePoint(); ?>

ショートコードも以下をfunctions.phpに追加すれば使えます。

//評価の平均値（数）を表示
function my_star_num(){
    if (my_averagePoint('return') > 0) {
        return my_averagePoint('return');
    } else {
        return '評価なし';
    }
}
add_shortcode('star_num', 'my_star_num');

編集ページで[star_num]を挿入。評価がない時は「評価なし」と出るようにしています。

6. リッチスニペットに対応させる

Googleで検索された際に、以下の画像のように評価の星を表示させるには、適切な方法で評価の点数などをマークアップする必要があります。

レビュー用のスニペットについては、Googleのウェブマスターツールのヘルプが詳しいので、こちらもチェック。

リッチスニペット-レビュー － Googleウェブマスター

このGoogleのアドバイスに従ったマークアップの一例（Welcartを使う場合）が以下になります。他にも色々マークアップ可能な項目はありますので、ご自分のテーマに合わせて試してみて下さい。

ここでは「5. 平均点を算出する」のコードを使っています（コードがないとエラーになります）。

2015/5/20更新：星の評価が0の場合はスニペットに表示されないように変更致しました。

<?php $rating_stars = get_post_meta($post->ID, 'crfp-average-rating', true); ?>
<?php if($rating_stars > 0): ?>
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<div class="crfp-rating crfp-rating-<?php echo $rating_stars; ?>"></div>x
	<span itemprop="ratingCount"><?php comments_number('0','1','%'); ?></span>件のレビュー<span itemprop="ratingValue"><?php my_averagePoint(); ?></span>/<span itemprop="bestRating">5</span> 点
</div>
<?php endif; ?>

5行目の「○○件のレビュー」の部分は、全コメント数を取得しています。コメントと共に星の評価がある件数だけをピックアップする場合は、以下のように変更してもいいでしょう。

<span itemprop="votes"><?php echo $rating_stars; ?></span>件の評価

上記のコードをスタイルシートで適当に見た目を調節してみると、見た目的にはこんな感じになりました。

これを構造化データテストツールを使って、検索時にどんな風に見えるか見てみると・・・

なかなかいい感じです。

テストでは拙作Welcart対応テーマを使ったため、価格やパンくずリストもスニペット中に表示されています。価格などをリッチスニペットに表示させる方法は、以下のエントリーからどうぞ。

リッチスニペット－検索結果に表示される構造化データの書き方 － 関連記事

7. まとめ

今回は、Comment Rating Field PluginのPHPファイルを開いてコードを観察して、カスタマイズを行ってみました。

前回、Yotpo（外部クラウドの高機能レビューシステム）を利用する方法も紹介しましたが、Yotpoではリッチスニペットは有料機能です。評価ランキングウィジェットなどは強力なんですけどね。

Comment Rating Field Pluginの導入方法は以下の記事からどうぞ。

コメント欄に5段階評価のレビュー機能を追加出来るComment Rating Field Plugin － 関連記事

• 商品一覧ページ,商品ページ
• プラグイン, レビュー

• ツイート
• B! ブックマーク
• Google+
•  Pocket
• Facebook