ハロー！肉球アッパー（@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;
}
動作確認
実際にショートコード機能を使って表示させてみます。
問題ないようです。
さいごに
以上、Cocoonで勝手にFont Awesome5を使っちゃってる場合の対処法でした。
レーティングスター（評価スター）ショートコードは、とても素晴らしいのでどうしても使いたかったのです
