サイト上に星レビュー（口コミ）を表示できるWordPressプラグイン「Site Reviews」の使い方：基本編

インターネットでレビューや口コミをチェックしたことってありますよね。

「このお店おいしいのかな」
「ここの美容室の評判はどうだろう」
「この商品の使い心地はどうなんだろう」

今やあらゆる商品やサービスの口コミはインターネットでチェックできます。また、実際にお店に訪れたお客さんや商品やサービスのユーザーの感想であれば信憑性も高く、その影響力はあなどれません。

そこで今回は、あなたのサイト上にも簡単にレビューを表示できる高機能なWordPressプラグインをご紹介いたします。星で評価することも可能です。

「Site Reviews」の機能概要

WordPressサイトに簡単に口コミ（レビュー）を表示できるプラグインです。主な機能は下記の通りです。

星で評価できるレビューを表示可
平均レビューを表示可
最近のレビューを表示可
ウィジェットエリアにセット可
ショートコードでページ単位でのセットも可
フロント画面を簡単に翻訳可
ブロックエディター対応
レビュー通知も受け取れる（応用編で解説）
レビューを許可制に変更可（応用編で解説）
管理者アカウントでレビューを管理可（応用編で解説）
reCAPTCHAも導入可（応用編で解説）

無料かつ高機能なので、導入する価値は十分あります。当記事では基本的な使い方を解説していきます。

「Site Reviews」のインストール

管理画面から「Site Reviews」を検索してインストールするか、下のボタンからもダウンロード可能です。プラグインファイルを wp-content/pluginsディレクトリにアップした後、管理画面から有効化してください。

プラグインのイメージ

Site Reviews

「Site Reviews」の基本的な使い方

ウィジェットかショートコードを用いて下記のレビューコンテンツを設置可能です。

Recent Reviews（最近のレビュー）
Submit a Review（レビューの送信フォーム）
Summary of Reviews（レビューの平均値）

フロント画面には下記のように表示されます。

デフォルト状態ではすべて英語で表示されますが、こちらを参考に翻訳いただけます。以下の3つの使い方をそれぞれ解説いたします。

ウィジェットで設置する方法
ショートコードを使う方法（クラシックエディター）
ブロックエディターでの使い方

ウィジェットで設置する方法

サイトのウィジェットエリアに表示できるので、全箇所共通のレビューが表示されます。例えば、下記のようなレビューを表示したい際にウィジェットを活用するといいでしょう。

お店の全体のレビュー
メイン商品（コンテンツ）のレビュー

プラグインを有効化すると専用のウィジェットが追加されていますので、任意のウィジェットエリアに追加します。

追加された専用のウィジェット

それぞれ下記のような設定が可能です。表示する件数を設定したり、指定した評価以下のレビューは表示させないようなこともできます。

Recent Reviews（最近のレビュー）の設定項目

❶：最近のレビューのタイトル
❷：レビューをいくつか表示するか
❸：表示するレビューの最低レートを設定できます。3と設定すると星3以下のレビューは表示されません。
❹：指定したページ内のレビューを表示したい場合に、ここにIDを入力します。
❺：非表示にしたい項目にチェックを入れます。基本はチェック不要ですが、星評価のみ表示させたい場合などに「Hide the rating」以外にチェックを入れて使います。

Submit a Review（レビューの送信フォーム）の設定項目

❶：送信フォームのタイトル
❷：送信フォームの説明文
❸：指定したページ内のレビュー送信フォームを表示したい場合に、ここにIDを入力します。
❹：非表示にしたい項目にチェックを入れます。基本はチェック不要ですが、「Hide the emai field」でメールのカスタムフィールドを非表示にするとレビュー送信のハードルが下がると思います。

Summary of Reviews（レビューの平均値）の設定項目

❶：平均レビューのタイトル
❷：指定したページのレビューの平均を表示したい場合にここにIDを入力します。
❸：非表示にしたい項目にチェックを入れます。基本はチェック不要です。

サイト全体ではなく、特定のページのレビューのみを表示したい場合に各ウィジェットの「Post ID」の部分にページのIDを入力します。

例えば、レビューコンテンツを設置した「お客様のお声ページ」や「商品の販売ページ」があればそのページIDを指定するということです。ページのIDの探し方は下記記事をご確認ください。

2017.01.27

2024.03.07

WordPressのページID、カテゴリーIDを調べる方法

WordPressの各投稿タイプやタクソノミーには固有のIDが割り当てられていますが、デフォルトの状態では、管理画面上に表示されません。テーマやプラグインによっては、特定のページやカテゴリーを識別するためにIDを使用することがありますので、当記事を参考に各IDの調べ方を確認しておきましょう。...

特定のページにレビューコンテンツを設置する方法は次の章で解説いたします。

ショートコードを使う方法（クラシックエディター）

ショートコードなら各投稿記事や固定ページ内に設置できます。※ブロックエディターをお使いの方はこちら
記事ごとに表示するレビューを変更可能です。以下のようなケースに適しています。

特定の記事のレビュー
お客様の声ページなどに使うレビュー

今回は固定ページで「お客様の声」ページを作る場合を例に解説していきます。プラグインを有効化して固定ページを開くと星形のボタンが追加されていますので、そこから任意のショートコードを設置できます。

クラシックエディターの操作箇所

ショートコードでもウィジェットと同様に下記のような設定が可能です。

Recent Reviewsの設定項目

❶：最近のレビューのタイトル
❷：レビューの表示数（数字のみを入力します）
❸：表示するレビューの最低レートを設定できます。3と設定すると星3以下のレビューは表示されません。
❹：ページネーションを2パターンから設定できます。（通常のページャー or Ajax）
❺：指定したページ内の最近のレビューを表示したい場合に、ここにIDを入力します。特に指定が無ければ入力不要です。
❻：非表示にしたい項目にチェックを入れます。基本はチェック不要ですが、星評価のみ表示させたい場合などに「rating」以外にチェックを入れて使います。

Submit a Reviewの設定項目

❶：送信フォームのタイトル
❷：送信フォームの説明文
❸：指定したページ内の送信フォームを表示したい場合に、ここにIDを入力します。特に指定がなければ入力不要です。
❹：非表示にしたい項目にチェックを入れます。基本はチェック不要ですが、「email」にチェックを入れるとレビューを受け取りやすいかもしれません。

Summary of Reviewsの設定項目

❶：レビュー平均のタイトル
❷：指定したページ内の平均レビューを表示したい場合に、ここにIDを入力します。指定がない場合は入力不要です。
❸：非表示にしたい項目にチェックを入れます。基本はチェック不要です。

例えば、これらのショートコードを1ページ内に表示すると下記のような「お客様の声ページ」を作ることも簡単です。

通常ですと「最近のレビュー」は1列で表示されるので、上記のように2列で表示させたい場合は、下記のCSSで調整してあげてください。あくまで一例なので、数値は適宜変更してください。

@media (min-width: 769px){
.glsr .glsr-reviews, .glsr .glsr-reviews-wrap {
display: flex;
flex-wrap: wrap;
}
.glsr-default .glsr-review {
flex-wrap: wrap;
width: 45%;
}
.post_content h2 {
font-size: 28px;
}
}

CSSの編集方法は下記記事を参考にご覧いただけます。

2021.03.19

2021.03.21

WordPressテーマでCSSを間接的に編集する4つの方法

WordPressに慣れてくると、サイトのデザインをCSSでカスタマイズしたくなりますよね。この時最も気をつけておきたいのが、CSSの編集方法です。特に、テーマのスタイルシートを直接編集するのは避けた方がよいでしょう。当記事では、WordPressでCSSを編集する方法を4つご紹介し...

ブロックエディターでの使い方

ブロックエディターにも対応しているので、専用のカスタムブロックを使って簡単にレビューコンテンツを設置可能です。

ブロックエディターの操作箇所

上記のようにリアルタイムでプレビューできる点が直感的で非常に使いやすいです。もちろんウィジェットやショートコードと同様に詳細の設定も可能です。こちらも即時プレビューに反映されます。

詳細設定の箇所

レビューコンテンツの翻訳方法

当プラグインはデフォルトではすべて英語で表示されますが、下記の設定箇所で任意の言語に翻訳可能です。「Site Review」の「Settings」から「Translations」のタブを開きます。

※2022/1/11追記：最新バージョンではタブの名称が「Translations」から「Strings」に変更されています。使い方に変更はありません。

翻訳箇所の設定

上記の検索窓で、翻訳したいワードを検索します。下記のようにワードごとにカスタムフィールドが表示されるので、それぞれ任意の文言を入力してください。最下部の「変更を保存」をクリックすると英文に代わって表示されます。

英文の代わりとなる文言の入力箇所

最低限翻訳しておきたい箇所をまとめましたので、以下を参考に設定してみてください。任意の表現に変更可能です。

デフォルトの英文	日本語のサンプル
Submit your review	レビューを送る
Your overall rating	星の数で評価する
Title of your review	レビューのタイトル
Your review	レビュー本文
Your name	ニックネーム
Your email	メールアドレス
This review is based on my own experience and is my genuine opinion.	あくまで私個人の感想になります。
This field is required.	この項目は必須です。
Your review has been submitted!	レビューが送信されました。
Please fix the submission errors.	必須項目を見直してください。
Summarize your review or highlight an interesting detail	レビューのタイトルを入力してください。
Tell people your review	ご感想を入力してください。
Tell us your name	このニックネームは公開されます。
Tell us your email	このメールアドレスは公開されません。
There are no reviews yet. Be the first one to write one.	ぜひ最初のご感想をお聞かせください。
Excellent	最高
Very good	良かった
Average	ふつう
Poor	いまいち
Terrible	最悪
{rating} out of {max} stars (based on {num} reviews)	{max}つ星中{rating}つ星です！（{num}人のお客様のデータ）