WP Customer Reviewsの導入&カスタマイズ方法

WP Customer Reviewsの導入&カスタマイズ方法
WP Customer Reviews

WordPressで口コミができるプラグイン無いかな?という方におすすめのプラグインがWP Customer Reviewsです。

こちらのプラグインを使えば、固定ページ含む任意のページに口コミを投稿できる機能が追加できます。

口コミ機能をお探しの方は、是非こちらのプラグインを追加してみてくださいね。

WP Customer Reviewsの導入方法

WP Customer Reviewsのプラグイン有効後は「Plugin Settings」を開く

管理画面にあるWP Customer ReviewsのReviewsのメニュー

WP Customer Reviewsのプラグインを有効化すると、管理画面のメニューに「Reviews」が表示されます。

「Plugin Settings」を押しましょう。

Plugin SettingsのReview Form Settings

設定するタブは2箇所です。

Review Form Settingsの設定を行う

まずは「Review Form Settings」タブを開きましょう。

Standard fields on reviewsでは、必要な項目の設定を行います。

Reviews Form Settingsの設定例

今回私はこのように設定しました。

  • Ask:ユーザーがレビュー時に入力を求める
  • Require:入力を必須にする
  • Show:ページ上に表示する

また、「Custom fields on reviews」では、任意の項目を追加することができます。

入力が完了したら、「変更を保存」を押します。

「変更を保存」を押し忘れると、設定内容が初期化されてしまいます。

ここまでの設定を反映したフォームの画像

ここまで設定を完了すると、このような表示になります。

Display Settingsの設定を行う

Plugin SettingsのDisplay Settings画面

「Display Settings」では、ページ上に表示する口コミの件数を設定できます。

初期値は10が入っていますので、好きな件数に変更しましょう。

Support usの選択ボックスはNoのままで構いません。

こちらをYesにすると、ページ上に”Powered by WP Customer Reviews”というリンク付きテキストがクレジット表示されてしまいます。

残りの設定はプラグインエディターから行う

プラグインエディターで行った編集を反映させるためには、一度プラグインを無効にしてから有効にする必要があります

WordPressの管理画面のプラグイン

WordPressの管理画面メニューにある「プラグイン」より、「プラグインエディター」を選択します。

編集するプラグインでWP Customer Reviewsを選択

編集するプラグインでWP Customer Reviewsを選択し、「選択」を押します。

frontend_review_form.htmlで必要な設定

include > templates > frontend_review_form.html を開きます。

Submit your review

<div class="wpcr3_leave_text">
	Submit your review
</div>

<div class="wpcr3_leave_text">
	口コミを投稿する
</div>

Create your own review

<div class="wpcr3_button_1 wpcr3_show_btn">
		Create your own review
</div>

<div class="wpcr3_button_1 wpcr3_show_btn">
		口コミを投稿する
</div>

Check this box to confirm you are human.

<label>
	<input type="checkbox" name="wpcr3_fconfirm2" class="wpcr3_fconfirm2" value="1" />
&nbsp; Check this box to confirm you are human.
</label>

<label>
	<input type="checkbox" name="wpcr3_fconfirm2" class="wpcr3_fconfirm2" value="1" />
&nbsp; チェックを入れて送信してください。
</label>

SubmitとCancel

<td colspan="2">
	<div class="wpcr3_button_1 wpcr3_submit_btn">Submit</div>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <div class="wpcr3_button_1 wpcr3_cancel_btn">Cancel</div>
</td>

<td colspan="2">
	<div class="wpcr3_button_1 wpcr3_submit_btn">口コミを送信する</div>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <div class="wpcr3_button_1 wpcr3_cancel_btn">キャンセル</div>
</td>

There are no reviews yet. Be the first to leave yours!

<p class="wpcr3_no_reviews">
		There are no reviews yet. Be the first to leave yours!
</p>

<p class="wpcr3_no_reviews">
		まだ口コミは投稿されていません。
</p>

frontend_review_item_aggregate.htmlで必要な設定

include > templates > frontend_review_aggregate.html を開きます。

<div class="wpcr3_aggregateRating" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
	<meta itemprop="bestRating" content="5" />
	<meta itemprop="worstRating" content="1" />
	<meta itemprop="ratingValue" content="{{aggregate_rating}}" />
	<meta itemprop="reviewCount" content="{{aggregate_count}}" />
	<span class="wpcr3_aggregateRating_overallText">Average rating: </span>&nbsp;
	<div class="wpcr3_aggregateRating_ratingValue">{{stars}}</div>&nbsp;
	<span class="wpcr3_aggregateRating_reviewCount">{{aggregate_count}} reviews</span>
</div>
{{/aggregate}}

<div class="wpcr3_aggregateRating" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
	<meta itemprop="bestRating" content="5" />
	<meta itemprop="worstRating" content="1" />
	<meta itemprop="ratingValue" content="{{aggregate_rating}}" />
	<meta itemprop="reviewCount" content="{{aggregate_count}}" />
	<span class="wpcr3_aggregateRating_overallText">平均: </span>&nbsp;
	<div class="wpcr3_aggregateRating_ratingValue">{{stars}}</div>&nbsp;
	<span class="wpcr3_aggregateRating_reviewCount">{{aggregate_count}} 口コミ</span>
</div>

frontend_review_form_review_field.htmlで必要な設定

include > template > frontend_review_form_review_field.htmlを開きます。

<label for="id_wpcr3_ftext" class="comment-field">Review: </label>

<label for="id_wpcr3_ftext" class="comment-field">口コミ: </label>

 frontend_review_form_rating_field.htmlで必要な設定

include > template > frontend_review_form_rating_field.htmlを開きます。

<label for="id_wpcr3_frating" class="comment-field">Rating: </label>

<label for="id_wpcr3_frating" class="comment-field">評価: </label>

wp-customer-reviews.jsで必要な設定

js > wp-customer-reviews.jsを開きます。

wpcr3.ajaxPost(parent, ajaxData, function(err, rtn) {
		if (err) { return; }
		
		alert('Thank you! Your review has been received and will be posted soon.');
		$(window).scrollTop(0);
		wpcr3.clearFields();
		parent.find(".wpcr3_cancel_btn").click();
	});

wpcr3.ajaxPost(parent, ajaxData, function(err, rtn) {
		if (err) { return; }
		
		alert('口コミの投稿ありがとうございます。');
		$(window).scrollTop(0);
		wpcr3.clearFields();
		parent.find(".wpcr3_cancel_btn").click();
	});

設定が完了したら、必ずプラグインを一旦無効にする

プラグインエディターで行った編集を反映させるためには、一度プラグインを無効にしてから有効にする必要があります

口コミを投稿・表示させたいページを編集する

口コミ機能を利用するためには、口コミを投稿・表示させたいページの編集画面を開きます。

Enable WP Customer Reviews for this page

Enable WP Customer Reviews for this pageの項目で、「Yes」を選択して更新することで、口コミ画面を表示することができます。

WP Customer Reviewsのカスタマイズ後画面
WP Customer Reviewsのカスタマイズ後画面

WP Customer Reviewsのデメリットはカスタマイズが必須なこと

このプラグイン唯一のデメリットなのですが、英語で作られているため、日本のWebサイトで使う場合は必ず日本語化作業が必要です。

日本語化作業はプラグインエディターより作業する必要があるため、開発者の方でないと難しく感じることがあります。

ご自身でのカスタマイズが難しい場合は、ぜひご依頼くださいね。