IT・プログラミング

【WordPress】口コミでレビューができるサイトやページを作ろう

何かを買う時、映画を見る時、旅行に行くとき。
何をするにもまず口コミって見てしまいますよね。
それを使ったことのある・体験したことのある人の感想は、まだやる前の自分にとってとても有益な情報です。

もはや転職ですら口コミが見られる情報化社会になっているので、口コミがないことがもはや不安!
そんな状態になりつつあります。

ということで、口コミで星とかつけたい!
という方にお勧めのプラグインを紹介します。

スポンサードサーチ

口コミとレビューが出来るプラグイン「WP Customer Reviews」

まずはインストール

実は、というほどでもないですが無料のレビュープラグインはあまりありません。
あるにはあるけどレビューか評価どっちかだけだったり、今一つ実用性に欠けるものがほとんどです。

そんな中で、このプラグインの欠点は「日本語化されていないからわかりにくい」という、カスタムでフォローができる範囲になってます。
さっそくインストールしましょう。

投稿フォームを日本語化をしよう

英語のままでは使いにくいし、レビューする人も気後れしてしまいます。
それを考えると日本語化はとても需要な要素なので、面倒がらずに進めていきましょう!

まずプラグインの設定から変更する

院インストールが終わると、メニューにWP Customer Reviewsが追加されているはずです。
メニューの★ReviewsからPlugin settingに進みましょう。

この画面ですね。
まずはこの画面で上のタブ Review Form Setting を開きましょう。
英語がさっそく並んでいますが、

変更するところ

  • name 投稿者の名前
  • Email 投稿者のEメールアドレス
  • Website 投稿者のwebサイト
  • Review Title レビューのタイトル
  • ask この項目を表示する
  • Require この項目の回答を必須にする
  • show 口コミに表示する

このあたりを調整します。

こんな感じでしょうか。
Askにチェックをいれていないのでそもそも表示されませんが、一応日本後に直しておきました。
必須が多いとレビューする気がなくなってしまうので、必須は少な目がいいと思います。

今回は回答者の情報ではなくレビューと評価が欲しいので、少しでもレビューの心理的ハードルが下がるように必須はなくしておきました。
この後にメールなどでやり取りをする場合や、会社などで営業活動が必要な場合はEメールと名前などは必須でもいいかもしれません。

ファイルを編集する

実はこれで終わりではありません。
プラグインのファイルを編集していく必要があります。
日本語化したいところで修正する箇所が変わってきますので、変えたいところを変えましょう。

ファイルの場所はwp-content/plugins/wp-customer-reviews/include/templatesというところ。

この部分を編集していきます。

frontend_review_form.htmlのファイルを編集する

投稿フォームはまだこんな感じ。
英語がきになりますね。

  • Submit your review
  • Check this box to confirm you are human
  • Submit
  • Cancel

この項目は、「frontend_review_form.html」というファイルで編集します。
開くと英語で書いてありますが、表示そのままの箇所があるので、探して変えてあげましょう。

 
{{:showform}}
<div class="wpcr3_respond_2">
<div class="wpcr3_div_2">
<table class="wpcr3_table_2">
<tbody>
<tr>
<td colspan="2">
<div class="wpcr3_leave_text">評価フォーム</div>
</td>
</tr>
{{input_fields}}
{{rating_field}}
{{review_field}}
<tr>
<td colspan="2" class="wpcr3_check_confirm">
<div class="wpcr3_clear"></div>
<input type="hidden" name="wpcr3_postid" value="{{postid}}" />
<input type="text" class="wpcr3_fakehide wpcr3_fake_website" name="website" />
<input type="text" class="wpcr3_fakehide wpcr3_fake_url" name="url" />
<input type="checkbox" class="wpcr3_fakehide wpcr3_fconfirm1" name="wpcr3_fconfirm1" value="1" />
<label><input type="checkbox" name="wpcr3_fconfirm2" class="wpcr3_fconfirm2" value="1" />&nbsp; ロボットではありません</label>
<input type="checkbox" class="wpcr3_fakehide wpcr3_fconfirm3" name="wpcr3_fconfirm3" checked="checked" value="1" />
</td>
</tr>
<tr>
<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>
</tr>
</tbody>
</table>
</div>
</div>
<div class="wpcr3_clear wpcr3_pb5"></div>
<div class="wpcr3_respond_3">
<p>
<div class="wpcr3_button_1 wpcr3_show_btn">この作品に星を付ける</div>
</p>
{{!found_posts}}
<p class="wpcr3_no_reviews">まだ投稿はありません</p>
{{/found_posts}}
</div>
<div class="wpcr3_dotline"></div>
{{/showform}}

今回はこんな感じにしました。
表示させる言葉は何を評価するのかで変えたほうがよりよいです。
今の時点ではこうなりました。

frontend_review_form_rating_field.htmlのファイルを編集する

まだ英語になっている Rating を変更するのにはこのファイルです。
開いてみると短いのですぐ Rating が見つかると思います。

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

評価という項目に変更しました。
このまま Review も変更しましょう。

frontend_review_form_review_field.htmlのファイルを編集する

このファイルも短いので、すぐ Review が見つかります。

 
<label for="id_wpcr3_ftext" class="comment-field">作品レビュー: </label>

作品レビューという項目に変更しました。
これで一通り投稿フォームの日本語化はOKです。

ばっちりですね。

スポンサードサーチ

レビュー画面を日本語化する

次はレビュー画面の日本語化です。
レビュー画面というのはここ

やっぱりファイルを編集する

投稿フォームと同じく、この文の変更もファイルの編集が必要です。
上の評価合計部分と、下の個別コメント部分でそれぞれ編集が必要です。

frontend_review_item_aggregate.htmlのファイルを編集する

まずは上の合計部分を直します。
frontend_review_item_aggregate.htmlというファイルを開きましょう。
このファイルも短いのですぐ見つかるはずです。

 
<span class="wpcr3_aggregateRating_overallText">評価: </span>&nbsp;
<div class="wpcr3_aggregateRating_ratingValue">
 {{stars}}</div>&nbsp;
<span class="wpcr3_aggregateRating_reviewCount">
{{aggregate_count}} 人のレビュー
</span>

評価のところは平均の評価なので、平均とか総合評価とかお好みで変えてください。
レビュー人数のところは、スタイリッシュなサイトならそのままでもいいかもしれませんね。

frontend_review_item_reviews.htmlのファイルを編集する

これはどちらでもいいのですが、レビューのニックネームのうしろになぜかサイト名が入っています。
しつこい気がするので、気になる場合は消しておきましょう。

frontend_review_item_reviews.htmlというファイルで編集します。
このファイルは少し長めですが、真ん中あたりに

 
</span> on
<span class="wpcr3_item_name">
{{:on_same_page}}
{{item_name}}
{{/on_same_page}}
{{!on_same_page}}
<a href="{{postLink}}">{{item_name}}</a>
{{/on_same_page}}
</span>

というコードがあります。
このコードの、上のonからしたのspanまでをコメントにしておきましょう。
消しても同じだとはおもいますが、後々使うかもしれないのでコメントにしておきます。

 
  </span> <!--on
    <span class="wpcr3_item_name">
        {{:on_same_page}}
        {{item_name}}
        {{/on_same_page}}
        {{!on_same_page}}
        <a href="{{postLink}}">{{item_name}}</a>
        {{/on_same_page}}
    </span>-->

これでオッケーです。

エラーメッセージを日本語化する

いよいよ大詰め。
最後の工程になります。

この工程は普段は表示されなかったり、あってもなくてもいい工程です。
チェック漏れなどがあった時に表示される文などを変更します。

はりきってファイルを編集する

今までとは違い、エラーメッセージを変更するファイルは wp-content/plugins/wp-customer-reviews/js ここにあります。
いままでは include にありましたが js にあるので注意してください。

wp-customer-reviews.jsのファイルを編集する

このファイルは少し長いですが、変える文も長いので注意して探しましょう。
変えていくのはこのあたり。上から順番にいきましょう。

 
alert('You did not pass our human detection check. Code '+wpcr3.mousemove_total+','+wpcr3.keypress_total);

You did not pass our human detection check.この1文を、チェック漏れがあります に変更します。

 
alert('You did not pass our bot detection check. Code '+c1_fail+','+c3_fail+','+fake_fail);

ここもボット検出ではじかれているエラーなので、You did not pass our bot detection check. を チェック漏れがあります に変更します。

 
alert('You must check the box to confirm you are human.');

ここも同じく You must check the box to confirm you are human. を チェック漏れがあります に変えておきます。

 
alert('Thank you! Your review has been received and will be posted soon.');

最後に、レビューありがとうの文を変えて完了です。
真ん中より少し下あたりにあります。
Thank you! Your review has been received and will be posted soon. を 作品の評価ありがとうございます。しばらくすると評価が反映されます。に変えましょう。

スポンサードサーチ

設定変更を反映させる

これでファイルの編集は終わりましたが、まだ反映はされていません。
最後に一度プラグインを無効化して、再度有効化しましょう。

これでばっちり変更されたはずです。

なかなか大変でしたが完成です。

使い方

使い方とはいっても難しいことはありません。
投稿画面の下にレビュー機能の有無があるので、ここを Yes にすればOKです。

注意としては、コピー防止機能があるテーマではレビューがタップできないことがあるようです。
テストをしてみて、うまくレビューがタップできないときは、そのページのコピー防止機能をOFFにしてみてください。

このサイトで使用しているアフィンガー5でもコピー防止のためレビューが出来ませんが、
投稿編集画面の右側に、コピー防止機能 設定にかかわらずテキスト選択可というチェックがあるので、
ここのチェックをいれると問題なくできるようになります。

もっともっとカスタムしたい

日付も日本語表記にしたいなど、さらにカスタムをしたい方はこちらのサイト様で詳しく解説していたので参考にさせていただきましょう。

わだなつ様 初心者向け副業ブログ

レスポンシブや配置の変え方などが紹介されているので、もっともっとカスタムしてみたい方はぜひ。

それでは、また。

  • この記事を書いた人
  • 最新記事
卍フフーフ

卍フフーフ

3児の父。 好きなものは旅行・漫画・家族。 世界中どこでもクロックスで出かけます。

-IT・プログラミング
-

© 2020 気まぐれなねじまき鳥 Powered by AFFINGER5