レビューフィードを使ったトラストバッジの作成

サイト上の小さなバッジ1つで、訪問者に総合星評価を表示してみませんか？

「信頼バッジ」には、選択したレビューソースからの平均評価とレビュー数が表示されます。

このガイドでは、トラストバッジの作成方法と、その外観の変更方法について順を追って説明します。その後、特定のページ、サイトの全ページ、およびメールの署名にトラストバッジを追加する方法を解説します。

作業を始める前に、WordPressサイトに「Reviews Feed」がインストールされ、有効化されていることを確認してください。

「信頼バッジ」では、「レビューフィード」ですでに連携済みのレビューソースが使用されます。まだ連携していない場合は、レビューフィードの作成方法に関するガイドをご覧ください。Google および Yelp については、API キーがなくてもソースを連携することができます。

• トラストバッジの作成
• バッジの外観のカスタマイズ
  • スタイルとテーマの選び方
  • バッジ要素の表示・非表示
  • フッターの追加
• バッジの情報源の選び方
• バッジの保存
• ページにバッジを追加する
• すべてのページにバッジを表示する
• バッジのショートコードの使用方法
• メールの署名にバッジを追加する
• トラストバッジの管理
• よくある質問

トラストバッジの作成

まずは、新しい「信頼バッジ」を追加し、その評価の根拠となる情報源を選択します。

WordPressの管理画面のサイドバーから、「レビューフィード」→「信頼バッジ」へと進みます。その後、「 新規追加 」をクリックします。

「ソースの選択」ウィンドウが開きます。このウィンドウには、「レビューフィード」で接続済みのレビューソースが一覧表示されます。また、新しいソースを接続するための「新規追加」カードも表示されています。

次に、バッジの評価の根拠とする各情報源を確認してください。選択内容は、後でエディタの「設定」タブで変更できます。その後、「信頼バッジを作成」をクリックしてください。

新しい「Trust Badge」がエディタで開きます。その名前は、情報源の名前の後に「Trust Badge」と付いたものになります。バッジは複数作成できるため、短い名前を付けると後で探しやすくなります。

名前を変更するには、エディタ上部の名前横にある鉛筆アイコンをクリックしてください。

「名前」欄に新しい名前を入力します。その後、その横にあるチェックマークをクリックします。

エディタには2つのタブがあります。「カスタマイズ」タブでは、バッジの外観を設定します。「設定」タブでは、評価の算出元となる情報源を設定します。

変更を加えると、右側のプレビューに実際の評価が反映されたバッジが表示されます。次に、バッジのデザインを変更していきます。

バッジの外観のカスタマイズ

最初に「カスタマイズ」タブが開きます。このタブには、「スタイル」、「テーマ」、「アクセント」、「要素の表示/非表示」の4つのセクションがあります。

スタイルとテーマの選び方

「スタイル」には、「チップ」（デフォルトで選択されている）、「カード」、「メダル」の3種類のバッジ形状があります。各タイルにはサンプル評価が表示されており、形状を比較することができます。バッジには常に自分の評価が表示されます。

どの形状を使えばよいか迷った場合は、それぞれ試してみて、右側のプレビューを確認してみてください。

形状を変更するには、使用したいスタイルをクリックします。この例では、「カード」をクリックします。

「テーマ」には、「ライト」（デフォルトで選択されています）、「ダーク」、「ティント」の3つのカラーテーマがあります。色を変更するには、サイトに合ったテーマをクリックしてください。この例では、「ダーク」をクリックします。

「テーマ」の下にある「アクセント」セクションでは、バッジの星の色を設定できます。

色を変更するには、スライダーをドラッグするか、HEXフィールドにカラーコードを入力してください。色を変更すると、その横に「リセット」ボタンが表示されます。このボタンを押すと、デフォルトの金色に戻ります。

「Tinted」テーマを選択すると、このセクションの名称は「Tint」に変わります。このセクションのスライダーで、バッジの背景色を設定できます。

次に、バッジのどの部分を表示するかを選択します。

バッジ要素の表示・非表示

「要素の表示/非表示」セクションには、バッジを構成する各パーツが一覧表示されます：

• 評価値：平均評価を数値で表したもの（例：4.3）。
• 星評価：星による平均評価。
• レビュー数：レビューの総数です。
• プラットフォームのロゴ：評価の出典となった各レビューサイトのロゴ。
• フッター：バッジの下部に表示されるテキスト行で、ページへのリンクを設定できます。デフォルトでは非表示になっています。

各パーツには、そのパーツを表示または非表示にするための目のアイコンがあります。セクションの見出しには、表示されているパーツの数が示されています。

ロゴの表示を変更するには、「プラットフォームのロゴ」の横にある「編集」をクリックしてください。

「プラットフォームのロゴ」のオプションは以下の通りです：

• レイアウト：「ロゴ全体」を選択すると、プラットフォームのロゴ全体が表示されます。「アイコンのみ」を選択すると、小さなアイコンのみが表示されます。
• 色：「自動」はデフォルト設定で、テーマに合わせて表示されます。「ライト」テーマでは各プラットフォームのブランドカラーが使用され、「ダーク」テーマでは単一の色が使用されます。「ブランド」では常に各プラットフォーム独自の色が使用されます。「モノ」では常に単一の色が使用されます。

次に、バッジにフッターを追加します。

フッターの追加

フッターは、すべてのレビューへのリンクを掲載するのに適した場所です。

これを表示するには、「フッター」の横にある目のアイコンをクリックしてください。

次に、「フッター」の横にある「編集」をクリックします。その後、「フッター」のテキストフィールドに表示したいテキストを入力します。

フッターをリンクにするには、「フッターリンク」欄にページのアドレスを貼り付けてください。

フッターのデフォルトのテキストは「Powered by Smash Balloon」です。このままで使用することも、独自のテキストに置き換えることもできます。

これで「カスタマイズ」タブの説明はすべて終了です。バッジのデザイン設定はこれで完了です。

バッジの情報源の選び方

次に、バッジの評価の根拠となっている情報源を確認します。

サイドバーの上部にある「設定」タブをクリックします。「ソース」セクションには、バッジを作成した際に選択したソースが一覧表示されます。

各情報源には、バッジからその情報源を削除するためのゴミ箱アイコンがあります。バッジの評価にさらに情報源を含めたい場合は、「別の情報源を追加」をクリックしてください。

情報源が1つの場合、バッジにはその情報源独自の評価が表示されます。情報源が2つ以上ある場合は、それらすべての評価を総合した1つの評価が表示されます。レビュー数が多い情報源ほど、その総合評価においてより大きな比重を占めます。

デザインと素材の設定が完了したら、バッジを保存します。

バッジの保存

バッジのデザインに満足したら、エディタの上部にある「保存」をクリックしてください。

バッジは保存されました。サイトに追加する準備が整っています。

ページにバッジを追加する

次に、そのバッジをサイトのページに配置します。

エディタの上部にある「埋め込み」をクリックします。

「バッジの埋め込み」ウィンドウが開きます。このウィンドウには、バッジを表示する方法ごとに1行ずつ表示されます。具体的には、投稿やページ、すべてのページ、メール、ショートコードです。

「投稿」または「ページ」の下にある検索フィールドでは、すでに作成済みのページや投稿を検索できます。その中から1つを選択すると、「追加してページへ移動」ボタンが押され、そのページにバッジが追加されます。

この例では、代わりにバッジ用の新しいページを作成します。検索フィールドに、新しいページのタイトル（例：「Our Plugins」など）を入力してください。

そのタイトルのページはまだ存在しないため、リストにはページを作成するよう提案が表示されます。これを利用するには、「ページを作成」オプションをクリックしてください。

次に、「ページを作成して進む」をクリックします。

新しいページは、ブロックエディタで新しいタブとして開きます。そこには、あなたのバッジが挿入された「Trust Badge」ブロックがすでに表示されています。

必要に応じて、ページに他のコンテンツを追加してください。その後、「公開」をクリックしてください。

確認するには、もう一度「公開」をクリックしてください。

それでは、ご自身のサイトのページにアクセスして、バッジを確認してください。

また、「Trust Badge」ブロックを使用すれば、任意のページや投稿にバッジを自分で追加することもできます。ブロックを追加したら、一覧から希望のバッジを選択してください。

ブロックの追加方法については、「レビューフィード」ブロックの追加に関するガイドをご覧ください。その手順に従う際は、「レビューフィード」の代わりに「トラストバッジ」を検索してください。

「Trust Badge」ブロックは、他のブロックと同様に、ツールバーから左寄せ、中央寄せ、右寄せに配置することができます。

バッジが1つのページに追加されると、すべてのページに一括で追加されます。

すべてのページにバッジを表示する

サイトのフッターなど、すべてのページにバッジを表示するには、特定のページではなく、テーマにバッジを追加してください。具体的な方法は、使用しているテーマによって異なります。

サイトで「Twenty Twenty-Five」などのブロックテーマを使用している場合は、バッジエディタから「バッジの埋め込み」ウィンドウを開きます。次に、「すべてのページに表示」の横にある「サイトエディタを開く」をクリックします。

サイトエディタが新しいタブで開きます。そこで、フッターなどのテンプレートパーツに「Trust Badge」ブロックを追加してください。次に、ブロック内で使用するバッジを選択し、変更を保存してください。

サイトエディタでの各手順については、フィードの表示に関するガイドの「ブロックテーマの使用」のセクションをご覧ください。そのガイドでは「レビューフィード」ブロックを使用しています。バッジについては、代わりに「Trust Badge」を検索してください。

サイトでウィジェット領域を備えたクラシックテーマを使用している場合、「バッジの埋め込み」ウィンドウには代わりに「ウィジェットに追加」オプションが表示されます。「ウィジェットを開く」ボタンをクリックすると、新しいタブで「ウィジェット」画面が開きます。そこで、サイドバーやフッター領域に「信頼バッジ」ブロックを追加できます。

ウィジェットエリアに関するヘルプについては、WPBeginnerの「WordPressでウィジェットを追加・使用する方法」をご覧ください。

次に、バッジのショートコードについて見ていきましょう。

バッジのショートコードの使用方法

また、サイト内でショートコードが使用可能な場所であればどこでも、バッジを表示することができます。

[バッジの埋め込み] ウィンドウで、[ショートコードを使用] の横にある [コピー] をクリックします。

バッジのショートコードは次のようになります。19の部分には、そのバッジ固有のIDを指定してください：

[reviews-feed-badge id="19"]

これをショートコードブロックや、テーマやページビルダーでショートコードが使用可能な場所ならどこにでも貼り付けることができます。

ショートコードを追加する手順については、WPBeginnerの「WordPressでショートコードを追加する方法」をご覧ください。

その後、お客様のメールにバッジを追加いたします。

メールの署名にバッジを追加する

バッジはメールの署名欄にも追加できます。そうすれば、送信するすべてのメールにあなたの評価が表示されます。

[バッジの埋め込み] ウィンドウで、[メールに埋め込む] の横にある[設定]をクリックします。

このウィンドウには、バッジのプレビューが表示されます。次に、「署名用バッジをコピー」をクリックしてください。

次に、メールアプリの署名設定を開きます。その後、そこにバッジを貼り付けてください。

このバッジは、あなたのサイトから配信される画像です。つまり、新しいメールを送信するたびに、現在の評価が表示されます。

バッジが画像ではなくコードとして貼り付けられてしまった場合は、ウィンドウの下部にある「バッジが正しく貼り付けられませんでしたか？」をクリックしてください。

このセクションでは、バッジを追加する方法を他にも2つ紹介しています：

• HTMLスニペット：このマークアップをメールアプリのソースビューまたはHTMLビューに貼り付けてください。
• 画像のURL：お使いのメールアプリが画像へのリンクのみを受け付ける場合は、このアドレスをご利用ください。

それぞれに独自の「コピー」ボタンがあります。

最後に、すべてのバッジが一覧表示されている場所を確認しましょう。

トラストバッジの管理

取得したすべてのバッジは、「レビューフィード」»「トラストバッジ」ページに一覧表示されます。このページは、「トラストバッジの作成」の手順を始めたのと同じページです。

各バッジについて、リストには以下の情報が表示されます：

• 名称：バッジの名称およびその情報源となるプラットフォーム。
• ショートコード：バッジのショートコード。コピーボタン付き。
• 表示回数：サイト内のどこに、このバッジがいくつ表示されていますか。
• 操作：バッジを編集、複製、削除するためのアイコンボタン（この順）。

別のソースセット用のバッジなど、別のバッジを作成するには、「信頼バッジの作成」と同じ手順に従ってください。

これで完了です！これで、トラストバッジを作成し、サイトやメールで評価を表示する方法がわかりましたね。

次に、訪問者がサイトを閲覧している際にレビューをポップアップで表示するには、「レビューアラート」に関するガイドをご覧ください。

よくある質問

以下に、トラストバッジに関するよくある質問への回答をまとめました。