星評価を表示させるショートコード
この記事は約 7 分で読めます。
寝ログさんで公開されている
「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;
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;
}
rate(評価数字)
Amazonの星評価のようなものを
表示するには、
starショートコードの
rateオプションに
0~5まで0.5刻みで記入します。
max(評価のMAX[満点])
maxオプションを用いれば、
評価の上限を
引き上げることも可能です(※100まで)。
number(評価数字を表示するか)
number、数字を
表示させるかどうかを
切り替えるオプションです。
貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました
ディスカッション
コメント一覧
まだ、コメントがありません