WordPressテーマで星評価を表示させるショートコードの実装方法

Amazonで商品を購入するときに僕は、ついつい星評価を見てしまいます。

例えば「AとBの商品があり、どちらの性能も甲乙つけがたければ、評価の高い方を購入する」なんてこともしばしば。

なんだかんだで「星での評価はついつい目がいっちゃうよな…」と。

そういったことから「WordPressでも手軽に星評価を表現できるようにしてみよう」とショートコードの実装コードを書いてみました。

こんなやつ。

4.5
7.5

以下では、ほぼコピペでできる「星評価ショートコード」の実装方法を紹介します。

スポンサーリンク
レクタングル(大)広告

実装するための主な手順

ショートコードを実装する主な手順はこちら。

  1. functions.phpにコードをコピペで追記
  2. style.cssに星評価用のCSSを追記

コードの内容とかを気にしなければ、基本的に作業はコードのコピペだけで実装できます。

functions.php編集前は、事前にファイルをバックアップしておいてください。

functions.phpにコードをコピペで追記

まずは、子テーマのfunctions.phpに以下のPHPコードを追記します。

基本的には、「ショートコード用の関数」と「星評価html生成用の関数」からできています。

星は、Font Awesome4を用いて表示させています。

Font Awesome4が利用されていないテーマの場合

Font Awesome4が利用されていないテーマの場合は、コード後半でコメントアウトしてある部分のコメントを外してください。

このカスタマイズは、Font Awesomeありきのカスタマイズになるので、無いと正常表示されません。

Font Awesome5を使用しているテーマの場合は、Font Awesome4と競合してうまく表示されない可能性があります。

style.cssに星評価用のCSSを追記

あとは、星評価用のCSSを子テーマのstyle.cssに追記するだけです。

使用例

ショートコード名はstarとなります。

以下のようなオプションと組み合わせて星評価を表示させます。

rate(評価数字)

Amazonの星評価のようなものを表示するには、starショートコードのrateオプションに0~5まで0.5刻みで記入します。


0
0.5
1
1.5
2
2.5
3
3.5
4
4.5
5

max(評価のMAX[満点])

maxオプションを用いれば、評価の上限を引き上げることも可能です(※100まで)。


5.5
6
6.5
7
7.5
8
8.5
9
9.5
10

こうすることで、10段階中の何点なのかを分かりやすく表現できるかと思います。

number(評価数字を表示するか)

number、数字を表示させるかどうかを切り替えるオプションです。


3.5
4

まとめ

こんな感じの簡単な機能のショートコードではありますが、星評価用のショートコードを実装することができます。

ミシュランガイドで星評価がされるようになってから、93年経ちます。

それ以来現在まで、星評価方法が廃れていないところを見ると、なんだかんだで人は星での評価が気になる部分はあるのだと思います。

ということで「レビュー記事を書く際に星評価をつけたい」とか「商品を星評価でおすすめ度を分かりやすくしたい」なんて場合にどうぞ。

WordPressテーマCocoonを利用している場合は、既に実装されているのでカスタマイズは不要です。

レビューページなどで便利な「評価スター」ショートコードのコード入力例です。