望むときに安心して腎移植を受け、健やかで楽しい人生を取り戻せる未来。

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

レーティングスター(評価スター)が表示されないときにやったこと ブログ

ハロー!肉球アッパー(@hellokidneylife)です。

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

失敗表示

 

 

あれ?

うまく表示されません。

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

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

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

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

スポンサーリンク
スポンサーリンク

PHPコードの変更と追記

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

バックアップをした上で、その中のスター()・半分スター()・空スター()の各コードを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;
}

動作確認

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

4
2.5
3.5

問題ないようです。

さいごに

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

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

ブログ
スポンサーリンク
スポンサーリンク
シェアする
ハロじんをフォローする
スポンサーリンク
タイトルとURLをコピーしました