星評価を表示させるショートコード

2018年12月3日

この記事は約 7 分で読めます。

4.5

寝ログさんで公開されている

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

この
星評価ショートコード、

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

実装しようと思ったら

Font Awesome5と
Font Awesome4が競合して
うまく表示されません。

ならば、
Font Awesome5で
星を表示させるよう
カスタマイズ
しましょう。

カスタマイズは
コメントアウトの
スターの出力、半分スターの出力、
空スターの出力のソースに
Font Awesome4のclassがあるので、
Font Awesome5に変更するだけです。
 

コードをカスタマイズ

//レーティングスタータグの取得
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));
  }
  //スターの出力 (Font Awesome5)
  for ($j=1; $j <= $before; $j++) {
    $tag .= '<span class="fas fa-star"></span>';
  }
  //半分スターの出力 (Font Awesome5)
  for ($j=1; $j <= $middle; $j++) {
    $tag .= '<span class="fas fa-star-half-alt"></span>';
  }
  //空スターの出力 (Font Awesome5)
  for ($j=1; $j <= $after; $j++) {
    $tag .= '<span class="far fa-star"></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;
※ star-half-alt (半分スター) は
Font Awesome Version 5.1.0
以降でないと表示されません。
※ 2018/12/02 Luxeritas 3.5.3
Font Awesome 5 更新 (v5.0.13 -> v5.5)

functions.php、style.cssに追記

子テーマのfunctions.phpに
上記のPHPコードを追記します。
あとは、
星評価用のCSSを
子テーマのstyle.cssに
追記するだけです。

/*星のスタイル*/
.rating-star{
  color: #f5bc55;
  font-size: 1.2em;
}
/*数字のスタイル*/
.rating-number{
  color: #333;
  font-size: 0.9em;
  margin-left: 0.4em;
}
Font Awesome5ではなく、
Font Awesome4が利用されている
若しくはFont Awesome自体が
利用されていないテーマは、
寝ログさんの
実装方法そのままでOKです。

rate(評価数字)

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

0
[star rate="0"]

0.5
[star rate="0.5"]

5
[star rate="5"]

max(評価のMAX[満点])

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

5.5
[star rate="5.5" max="10"]

5.5
[star rate="5.5" max="6"]

10
[star rate="10" max="10"]

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

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

[star rate="3.5" number="0"]

3.5
[star rate="3.5" number="1"]

 

 

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました

 

星評価を表示させるショートコード