【Cocoon】レーティングスター（評価スター）がうまく表示されないときにやった少しのこと

ハロー！肉球アッパー（@hellokidneylife）です。

当ブログが使用している無料Wordpressテーマ「Cocoon」で、レーティングスター（評価スター）を表示させるショートコード機能が先日追加されたので使ってみました。

あれ？

うまく表示されません。

原因は、自分で追加したメニューアイコンなどにFont Awesome5を使用していたためでした。

CocoonはFont Awesome4の仕様なのでうまく表示されなくて当然です。

なんとかできないか試行錯誤してみたところ表示に成功したので、やったことを書き留めておきます。

といっても素人ですので、これがベストなのかはわかりませんが「とりあえずできたよ」という記事です。

この記事の目次

PHPコードの変更と追記
CSSの追記
動作確認
さいごに

PHPコードの変更と追記

開発者のわいひらさんが運営されている寝ログにてPHPコードが公開されています。

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

Amazonで商品を購入するときに僕は、ついつい星評価を見てしまいます。例えば「AとBの商品があり、どちらの…

バックアップをした上で、その中のスター（）・半分スター（）・空スター（）の各コードをFont Awesome5のものに変更します。

//スターの出力の中の “fa fa-star” を “fas fa-star” へ

//半分スターの出力の中の “fa fa-star-half-o” を “fas fa-star-half-alt” へ

//空スターの出力の中の “fa fa-star-o” を “far fa-star” へ

変更前の該当箇所

  //スターの出力
  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>';
  }

変更後の該当箇所

  //スターの出力
  for ($j=1; $j <= $before; $j++) {
    $tag .= '<span class="fas fa-star"></span>';
  }
  //半分スターの出力
  for ($j=1; $j <= $middle; $j++) {
    $tag .= '<span class="fas fa-star-half-alt"></span>';
  }
  //空スターの出力
  for ($j=1; $j <= $after; $j++) {
    $tag .= '<span class="far fa-star"></span>';
  }

変更箇所を含める全文を子テーマの［外観］→［テーマの編集］→［テーマのための関数 (functions.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="fas fa-star"></span>';
  }
  //半分スターの出力
  for ($j=1; $j <= $middle; $j++) {
    $tag .= '<span class="fas fa-star-half-alt"></span>';
  }
  //空スターの出力
  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;

CSSの追記

スター自体のCSSを、子テーマの［外観］→［テーマの編集］→［スタイルシート (style.css)］へ追記して完了です。

/*星のスタイル*/
.rating-star{
color: #f5bc55;
font-size: 1.2em;
}

動作確認

実際にショートコード機能を使って表示させてみます。

2.5

3.5

問題ないようです。

さいごに

以上、Cocoonで勝手にFont Awesome5を使っちゃってる場合の対処法でした。

レーティングスター（評価スター）ショートコードは、とても素晴らしいのでどうしても使いたかったのです