【WP】5段階評価ができる「Yet Another Stars Rating」の導入方法

wp-yet-another-stars-rating

商品などのレビューに評価として星がついているのを見かけることがあると思います。外部からの評価として商品購入の参考にもなります。

今回はWordPress上の記事に5つ星の評価をつけることができるプラグイン「Yet Another Stars Rating」の導入方法をご紹介します。

Yet Another Stars Rating

「Yet Another Stars Rating」プラグインをインストールして有効化をします。通常は「無料版」ですが「有料版」へアップグレードすることができます。

無料版は総合評価のみですが、有料版ではひとつに記事に対して複数の評価を設置することができるようになります。

表示場所

wp-yet-another-stars-rating-01

「Yet Another Stars Rating」は、WordPress上で投稿された本文を表示する「the_content関数」にフックしているので、page.phpやsingle.phpでthe_content()が使われいる場所に評価(星マーク)が表示されるようになっています。

設定方法

「設定」メニューに「Yet Another Stars Rating: Settings」が追加されていますので、「Yet Another Stars Rating: Settings」の設定画面を開きます。

初期設定では表示されないように設定されているので表示をするために「General settings」で設定を変更します。

Auto insert options

表示方法の基本設定を

設定項目 説明 設定内容
Use Auto Insert? 表示・非表示を設定します
  • Yes:表示する
  • No:表示しない
What? 評価方法を設定します
  • Overall Rating / Author Rating:投稿管理者の評価を掲載する
  • Visitor Votes:訪問者の評価を掲載する
  • Both:上記の両方の評価を掲載する
Where? 掲載場所を設定します
  • Before the post:本文の上に表示する
  • After the post:本文の下に表示する
Size 評価マークの大きさを設定します 「Small」「Medium」「Large」の3種類から選ぶことができます
Exclude Pages? 固定ページでの表示を設定します
  • Yes:表示しない
  • No:表示する
Use only in custom post types? カスタム投稿の表示を設定します
  • Yes:カスタム投稿のみで表示する
  • No:カスタム投稿以外で表示する

Show “Overall Rating” in Archive Page?

評価方法が「Overall Rating / Author Rating」と設定されている場合で、表示する場合はアーカイブページ内で「the_content関数」を使用していることが表示条件になります。

説明 設定内容
カテゴリーやアーカイブなどの表示を設定します
  • Yes:表示する
  • No:表示しない

Show “Visitor Votes” in Archive Page?

評価方法が「Visitor Votes」と設定されている場合で、表示する場合はアーカイブページ内で「the_content関数」を使用していることが表示条件になります。

説明 設定内容
カテゴリーやアーカイブなどの表示を設定します
  • Yes:表示する
  • No:表示しない

Insert custom text to show before / after stars

評価マークに任意のテキストを追加するかを設定します。

設定名 説明 設定内容
設定された任意のテキストの表示・非表示を設定します
  • Yes:表示する
  • No:表示しない
Custom text to display before Overall Rating 「Overall Rating」の星マークの前に追記するテキストを設定します
Custom text to display before Visitor Rating 「Overall Rating」の星マークの前に追記するテキストを設定します
Custom text to display when a non logged user has already rated 評価済みの場合に表示するテキストを設定します

Do you want show stats for visitors votes?

「Visitor Votes」の場合の評価された統計グラフを表示するかを設定します。

説明 設定内容
統計グラフの表示を設定します。
  • Yes:表示する
  • No:表示しない

Allow only logged in user to vote?

評価できるユーザーをログインできるユーザーに限定するのかを設定します。

説明 設定内容
評価できるユーザーを設定します。
  • Allow only logged-in users:ログインできるユーザーのみ
  • Allow everybody (logged in and anonymous):すべての閲覧者

Which rich snippets do you want to use?

検索結果などに表示されるスニペットに掲載される内容を設定します。

説明 設定内容
スニペットに掲載する評価内容を設定します。
  • Review Rating:評価値
  • Aggregate Rating:平均値

How do you want to rate “Overall Rating”?

表示されるマークを設定します。無料版では星マークのみが有効になります。

説明 設定内容
表示されるマークを設定します。
  • Stars:星マーク
  • Numbers:数字

備考

「Yet Another Stars Rating」で使用されている英語表記は日本語用の翻訳ファイルを使用する事で表記を変更することがでいます。

関連記事

【デザイン】シングルページデザイン海外のクリエイティブWEBサイトまとめ

シングルページデザインは、1ページ内に「お知らせ」「コンセプト」「サービス紹介」「会社概要」「お問い合わせ」などのサイトを構成する一般的な情報をすべて集約したデザインです。従来サイトで、訪問者がページを見て必要な情報が無いと判断して離脱してしまうことを防ぐことから設計されたデ...続きを読む

2015.02.16インスピレーション

【無料】商用利用OKシームレステクスチャ「岩石(白玉石風)」素材

自然の岩肌を表現したシームレスの無料で使えるテクスチャです。白玉石のような白色の石の質感を再現しています。継ぎ目のないシームレス加工をしているテクスチャです。テクスチャマッピングやタイル敷の背景素材などにお使いいただけます。商用利用OKのフリー素材となっております。 ...続きを読む

2018.09.12シームレステクスチャ

【デザイン】ライセンスフリーのグラフィカルユーザインタフェーステンプレート

WEBサイトやパソコンの画面などに見られるメニューやボタンなどのグラフィカルユーザインタフェース(GUI)のテンプレートをまとめてみました。 Flat Style & iOS 7 Line Style UI Kit PSD フラットデザイン、iOS 7 イメー...続きを読む

2015.02.14インスピレーション

【JavaScript】各種ユーザーインターフェイスを実装するライブラリ『jQuery UI』

『jQuery UI 』は一般的なメニュー、アコーディオン、タブなどの多岐にわたるユーザーインターフェイスを実装することができるjQuery対応のJavaScriptライブラリです。 jQuery UI 『jQuery UI 』を用いることで「Interactions...続きを読む

2015.02.10HTMLコーディング

【CSS】リンクフォーカスを利用したナビゲーションのボタン操作

CSSの{a:hover}を使うとマウスオーバーの操作によって背景の色や画像を変えることができます。ナビゲーションメニューなどによく使われる手法ですが今回は{a:focus}に着目してみました。 {a:focus}はリンクにフォーカスされているとき。クリックされた時やT...続きを読む

2015.02.08HTMLコーディング