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

2018年11月27日2018年12月3日

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

4.5

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

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

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

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

実装しようと思ったら

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

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

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

1. コードをカスタマイズ
2. functions.php、style.cssに追記
3. rate（評価数字）
4. max（評価のMAX[満点]）
5. number（評価数字を表示するか）

コードをカスタマイズ

//レーティングスタータグの取得
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です。