かずぽんノート

管理人のかずぽんがお役立ち情報を発信するブログです。

*

星評価を簡単に作成できるプラグインShortcode Star Rating

      2016/02/08

星マーク

こんにちは(^^)かずぽんです。

レビュー記事を書く時に、星マークで評価すると断然見た目がよくなりますし、なによりユーザー目線で考えた時に、ひと目で良いものか悪いものかの判断をすることができるので便利ですよね。

最近、「FFグラマス-最強モンクになるためのおすすめの武器装備アビリティ」という記事を書いたのですが、この中で武器の評価を星マークでしたいと思ったので、簡単に星評価ができるプラグインがないか調べてみました。

で、調べた結果、非常に使いやすく簡単に作成できるWordPressプラグインを見つけたので、シェアします。

このプラグインの評価は、

おすすめ度:(MAX)

こんな感じで使用できるので、すごく便利(^^♪

レビュー記事を書くことが多いという方はもちろんのこと、いろいろな場面で使用することができるので、ぜひ使ってみてくださいね♪

Shortcode Star Ratingのインストール方法

1.インストール方法については、一度でもプラグインをインストールしたことがある方は簡単だと思いますが、まず最初に左側のダッシュボードメニューから「プラグイン」そして「新規追加」をクリックします。

プラグインの新規追加

2.次に、右上の方にある「プラグインの検索」の箇所に「Shortcode Star Rating」と入力し検索。

検索バーにShortcode Star Ratingと入力

3.検索結果が表示されますので、表示されているプラグインで間違いがないかを確認し、「いますぐインストール」をクリックします。
※私はすでにインストール済のため下記画像では「インストール済」となっています。

いますぐインストールをクリック

4.インストールが完了したら、あとは「プラグインを有効化」をクリックするだけで使う準備は完了です。

Shortcode Star Ratingの使い方

有効化まで完了したら、便利な機能を実際に使用してみましょう。

管理画面の設定方法

1.ダッシュボードメニューの設定にマウスをもっていくと、一覧の中に「Shortcode Star Rating」が追加されていますので、ここをクリック。

設定からShortcode Star Ratingを選択

2.管理画面が表示されます。ここで設定できるのは以下の2点。

管理画面

  • 星マークの色を変えることができる。(16進数のカラーコードで変更)
  • 星マークのサイズ変更。(デフォルトでは20pt)

星マークの色については、デフォルトでは山吹色(#FCAE00)といます。好みに合わせてカラーコードで任意の色に変更することが可能。カラーコードについては、下記サイトが分かりやすくて良いです。

参考サイトWEB色見本 原色大辞典

サイズ変更については、デフォルトでは20ptとなっており、「親ボックスに合わせる」にチェックを入れると、現在適用しているテーマ(テンプレート)の文字サイズと同じサイズで表示されます。

ちなみに、私が使用しているテーマ「STNGER6」の文字サイズは16ptで、親ボックスに合わせると星マークが少し小さく感じたので、チェックマークを入れずにデフォルトで使用してます。

記事本文での使用方法

このプラグイン「Shortcode Star Rating」では、ショートコードで星マークを表示させるようになっているのですが、使用可能なショートコードは以下の4つ。ここでは、その4つのコードについて説明していきます。

  • rating:評価として表示させる星の数。(星5つであればratingは5)
  • max:表示させる最大の星の数。(指定しなければデフォルトでは5)
  • type:percentとすることで、パーセントでの星評価ができる。
  • numeric:星評価の後ろに文字として%数値を表示させる。

1.ratingの使い方

標準的な使用方法で、この記事の最初に表示させている星マークもこのショートコードを使用しています。

記載するのは下記ショートコード。

このショートコードでの表示例

口コミ評価:

これだけでも、いろいろな活用場所がありそうですね(^^♪

ちなみに、このショートコードについては、プラグインを有効化したときに自動で編集画面のタグ(下記画像参照)に追加されていますので、これを使うと簡単です。ポチッとクリックして「star rating=”〇”」の〇の箇所に値を入れるだけでOK!

編集画面にタグが追加

2.maxの使い方

ratingと組み合わせて使用します。

ショートコードは下記のように記載します。

このショートコードでの表示例

割安度:

maxの値を変更してやることで、最大の星評価数をいくらでも増やすことができます。10段階でのレーディング評価をする時や、細かく詳細に評価をしたい時に重宝しそうです。

3.typeの使い方

これも同じようにショートコードの組み合わせで使用します。

記載するショートコードは以下のとおり。

このショートコードでの表示例

使いやすさ:

ん?単純にrating2の時と同じですね。(笑)

80%の時はratingの値を80に、60%で表示させたい時は値を60にします。

単独での使い道はあまりなさそうですね。

4.numericの使い方

星マークと数値で、訪れる訪問者の方へ視覚的にアピールをすることができます。

記載するショートコード。

このショートコードでの表示例。
※今回は、表示させる星の数を10個にして90%の星評価で表示させています。

総合評価:(90%)

「numeric=”yes“」とすることで、星マークの後ろに%数値が表示されました。ちなみに、noとすることで表示させないこともできますが、そもそも記載する意味がないですね。(笑)

プラグイン「AddQuicktag」を使って更に便利に!

標準的な星評価(星5つ)については、先に述べたとおり編集画面のタグに追加されていますが、それ以外の使い方(%表示等)ではショートコードの直接入力が必要です。

ここで役に立つのが、編集画面に任意のタグを追加できるプラグイン「AddQuicktag」。

下記画像のように設定をしておくことで、いつでもショートコードを呼び出すことができます。

AddQuicktagを使った効率化

詳細な使い方については、下記記事を参考にどうぞ。

参考AddQuicktag-編集画面にタグを追加できる便利なプラグイン!

アーカイブページや記事ページに表示させるには

私は、今現在使用していませんが、このプラグインを使用してアーカイブページや記事ページに星評価をつけることができるようです。

使い方については、@roomnine(アットルームナイン)を運営されているQtaroさんの下記記事が大変参考になります。

参考記事レビュー記事を分かり易く!星評価をWordPressに実装するなら「Shortcode Star Rating」プラグインがおすすめ

レビュー記事多めの方は、記事自体に星評価を表示させることで、訪問者がひと目でおすすめ度を判断できるバロメーターになるので、ユーザービリティを高めるという点でも効果的ですね。

本日のまとめ

WordPress初心者のかずぽんには、星マークによる評価を表示させるのは難しいかなぁ。と思っていたのですが、このプラグインを使って、思ってた以上に簡単に表示できました。これで今まで以上に楽しくブログを書けそうです♪

 - WordPressカスタマイズ