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

スポンサーリンク

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

Comment Rating Field Plugin

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

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

もくじ

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

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

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

Comment Rating Field Pluginの表示場所

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

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

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

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

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

Comment Rating Field Pluginを記事(商品)一覧で表示

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

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

コメント数を表示させる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等でも可。

Comments Rating Field Pluginの星を別画像に変える

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

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

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

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のデフォルトのスタイルシートが上書きされ、自分が用意した画像が読み込まれるようになります。

Comments Rating Field Pluginの星を別画像に変える

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

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

Comment Rating Field Pluginで評価の星を半分で表示

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';
}

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

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

4-2. スタイルを追加

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

.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>件の評価

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

Comment Rating Field Pluginをリッチスニペットに対応

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

Comments Rating Field Pluginをリッチスニペットに対応

なかなかいい感じです。

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

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

7. まとめ

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

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

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

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

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

  1. 石川 より:

    度々申し訳ありません。

    結局他の2つ程ためしてComment Rating Field Pluginにすることにしました。
    で、リッチスニペットに対応させたいのですがアプリや無料ゲームを評価するサイトで特に物を売っている訳ではないのでWelcartは使っていません。
    その場合も「6. リッチスニペットに対応させる」のコードを入れなければリッチスニペット対応は無理でしょうか。
    コードを入れる場合はどこに挿入すればよろしいのでしょうか。

    無知で申し訳ありません。ご教授願います。

    • まめ子(管理人) より:

      掲載のコードは飽くまでも一例です。ご自身のサイトに合わせて、googleの構造化データマークアップ支援ツールなどを使いながらマークアップすればよいと思います。

  2. 石川 より:

    ナルホド。ウェブマスターツールからコードなしでもクリックでできるんですね!
    評価やコメントなしでも何かしら表示はさせておいた方が良さそう・・・自分なりにやってみます。

    有難うございましたm(__)m

  3. […]   http://welcustom.net/comment-rating-field-plugin-customize/   […]

  4. Tera より:

    分かり易く、すばらしい内容の記事に、たいへん感謝いたしております。
    すみません。質問の場所ではないと分かってはいるのですが、教えていただけますとありがたいです。
    Welcartを使っておりまして、商品ページに「6.リッチスニペットに対応させる」のように表示させたくて、wc_item_single.phpにそのままコードを追加し、functions.phpには「5.平均点を算出する」のコードをそのまま追加しました。
    商品ページを表示すると、レビュー(commentを使用)で評価した商品は評価した通りの数の星が表示されましたが、全くレビューをしていない商品については星が5つ表示されてしまいます(件数は0件で表示されます)。全くレビューしていない商品でも星が5つ出てしまう場合と星が出ない場合があります。
    環境に原因があるのかもしれませんが、それ以外にもし何かお気づきの点がございましたら、ご教示いただけませんでしょうか。
    よろしくお願い申し上げます。

  5. Tera より:

    調査した結果、原因がわかりました。

    <?php echo get_post_meta($post->ID, 'crfp-average-rating', true); ?>

    でカスタムフィールドのcrfp-average-ratingの値を読み込んでいますが、全くレビューをしていない商品のカスタムフィールドにはcrfp-average-ratingが存在しません。この場合get_post_metaの戻り値は空文字になります。そうすると星が5個表示されてしまうようです。
    ですから、functions.phpに関数を作って、その中でget_post_metaを使い、戻り値が空文字の時には0を返すようにする等で対応できると思われます。
    この対応をして1度0件表示されると、カスタムフィールドにcrfp-average-ratingが値0で作られているのを確認しました。
    よろしくお願いいたします。

    • まめ子(管理人) より:

      ご指摘ありがとうございます。成る程、そういう穴がありましたか。記事を読んで下さる方にはTera様のコメントをご覧頂くように致したいと存じます。また検証する余裕が出来た時に試してみますね。

    • まめ子(管理人) より:

      検証致しました。恐らく、記事を書いた後のプラグインのバージョンアップが大幅にあったために出たエラーだったかと思われます。プラグインファイルを改めて開きましたら、コードがずいぶん変わっておりましたので、記事内のコードも更新致しました。
      追記:というわけで、有料バージョンを購入したほうが安全かもしれないですね!

Copyright© 2017 Welcart カスタマイズ ブログ All Rights Reserved.