Amazonで商品を購入するときに僕は、ついつい星評価を見てしまいます。
例えば「AとBの商品があり、どちらの性能も甲乙つけがたければ、評価の高い方を購入する」なんてこともしばしば。
なんだかんだで「星での評価はついつい目がいっちゃうよな…」と。
そういったことから「WordPressでも手軽に星評価を表現できるようにしてみよう」とショートコードの実装コードを書いてみました。
こんなやつ。
以下では、ほぼコピペでできる「星評価ショートコード」の実装方法を紹介します。
目次
実装するための主な手順
ショートコードを実装する主な手順はこちら。
- functions.phpにコードをコピペで追記
- style.cssに星評価用のCSSを追記
コードの内容とかを気にしなければ、基本的に作業はコードのコピペだけで実装できます。
functions.phpにコードをコピペで追記
まずは、子テーマのfunctions.phpに以下のPHPコードを追記します。
//レーティングスタータグの取得
if ( !function_exists( 'get_rating_star_tag' ) ):
function get_rating_star_tag($rate, $max = 5, $number = false){
$rate = floatval($rate);
$max = intval($max);
//数字じゃない場合
if (!is_numeric($rate) || !is_numeric($max)) {
return $rate;
}
//レーティングが100より多い場合は多すぎるので処理しない
if ($rate > 100 && $max > 100) {
return $rate;
}
$tag = '<div class="rating-star">';
//小数点で分割
$rates = explode('.', $rate);
if (!isset($rates[0])) {
return $rate;
}
//小数点以下が5かどうか
if (isset($rates[1])) {
$has_herf = intval($rates[1]) == 5;
} else {
$has_herf = false;
}
if ($has_herf) {
$before = intval($rates[0]);
$middle = 1;
$after = $max - 1 - $before;
} else {
$before = intval($rate);
$middle = 0;
$after = $max - $before;
//3.2とかの場合は小数点以下を切り捨てる
$rate = floor(floatval($rate));
}
//スターの出力
for ($j=1; $j <= $before; $j++) {
$tag .= '<span class="fa fa-star"></span>';
}
//半分スターの出力
for ($j=1; $j <= $middle; $j++) {
$tag .= '<span class="fa fa-star-half-o"></span>';
}
//空スターの出力
for ($j=1; $j <= $after; $j++) {
$tag .= '<span class="fa fa-star-o"></span>';
}
if ($number) {
$tag .= '<span class="rating-number">'.$rate.'</span>';
}
$tag .= '</div>';
return $tag;
}
endif;
//星ショートコード
add_shortcode('star', 'rating_star_shortcode');
if ( !function_exists( 'rating_star_shortcode' ) ):
function rating_star_shortcode( $atts, $content = null ) {
extract( shortcode_atts( array(
'rate' => 5,
'max' => 5,
'number' => 1,
), $atts ) );
return get_rating_star_tag($rate, $max, $number);
}
endif;
///////////////////////////////////////
// Font Awesome4が読み込まれていないテーマの場合はコメントを外す
///////////////////////////////////////
// //Font Awesome4の読み込み
// add_action( 'wp_enqueue_scripts', 'wp_enqueue_scripts_custom_demo' );
// if ( !function_exists( 'wp_enqueue_scripts_custom_demo' ) ):
// function wp_enqueue_scripts_custom_demo() {
// wp_enqueue_style( 'font-awesome-style', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );
// }
// endif;
基本的には、「ショートコード用の関数」と「星評価html生成用の関数」からできています。
星は、Font Awesome4を用いて表示させています。
Font Awesome4が利用されていないテーマの場合
Font Awesome4が利用されていないテーマの場合は、コード後半でコメントアウトしてある部分のコメントを外してください。
このカスタマイズは、Font Awesomeありきのカスタマイズになるので、無いと正常表示されません。
style.cssに星評価用のCSSを追記
あとは、星評価用のCSSを子テーマのstyle.cssに追記するだけです。
/*星のスタイル*/
.rating-star{
color: #f5bc55;
font-size: 1.2em;
}
/*数字のスタイル*/
.rating-number{
color: #333;
font-size: 0.9em;
margin-left: 0.4em;
}
使用例
ショートコード名はstarとなります。
以下のようなオプションと組み合わせて星評価を表示させます。
rate（評価数字）
Amazonの星評価のようなものを表示するには、starショートコードのrateオプションに0～5まで0.5刻みで記入します。
max（評価のMAX[満点]）
maxオプションを用いれば、評価の上限を引き上げることも可能です（※100まで）。
こうすることで、10段階中の何点なのかを分かりやすく表現できるかと思います。
number（評価数字を表示するか）
number、数字を表示させるかどうかを切り替えるオプションです。
まとめ
こんな感じの簡単な機能のショートコードではありますが、星評価用のショートコードを実装することができます。
ミシュランガイドで星評価がされるようになってから、100年経ちます。
それ以来現在まで、星評価方法が廃れていないところを見ると、なんだかんだで人は星での評価が気になる部分はあるのだと思います。
ということで「レビュー記事を書く際に星評価をつけたい」とか「商品を星評価でおすすめ度を分かりやすくしたい」なんて場合にどうぞ。
WordPressテーマCocoonを利用している場合は、既に実装されているのでカスタマイズは不要です。
