WordPress│Amazonライクなレビューサイトの星の表記カスタマイズ

2023.07.252024.03.05

以前、作ったAmazonライクな星の表記のカスタマイズ。

意外とよく使うので記事化してみました。

※ちなみにレビューの構造化データとは紐づけていないので悪しからず。

サンプルイメージ

小数点部分の0.25〜0.75の場合は、半分の星が表示されます。

1.3点

3.7点

4.5点

Amazonライクな星の表記のカスタマイズ方法

ショートコードで設置できます。

functions.php

外観＞テーマエディタ＞ functions.phpに下記のコードを挿入してあげます。

define('MAX_SCORE', 5);

function star_shortcode($atts) {
    $atts = shortcode_atts(array(
        'score' => '0',
    ), $atts, 'star');

    $review_score = (float) $atts['score'];

    $before   = floor( $review_score );
    $fraction = $review_score - $before;
    $middle   = 0;

    if ( $fraction >= 0.25 && $fraction < 0.75 ) {
        $middle = 1;
    } elseif ( $fraction >= 0.75 ) {
        $before += 1;
    }

    $after = MAX_SCORE - $before - $middle;

    $star_full_svg = '<span style="--the-icon-svg: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjFlbSIgd2lkdGg9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBhcmlhLWhpZGRlbj0idHJ1ZSIgdmlld0JveD0iMCAwIDQ4IDQ4Ij48cGF0aCBkPSJtMjQuOSAxLjkgNiAxMy45TDQ2IDE3LjJjLjkuMSAxLjIgMS4yLjYgMS44TDM1LjIgMjlsMy4zIDE0LjhjLjIuOS0uNyAxLjYtMS41IDEuMWwtMTMtNy42TDEwLjkgNDVjLS44LjUtMS43LS4yLTEuNS0xLjFsMy4zLTE0LjgtMTEuNC0xMGMtLjctLjYtLjMtMS43LjYtMS44TDE3IDE1LjkgMjMgMmMuNC0uOSAxLjYtLjkgMS45LS4xeiI+PC9wYXRoPjwvc3ZnPg==)" data-icon="LsStarFull" data-id="1" aria-hidden="true" class="swl-inline-icon"><span class="swl-inline-color svg-color has-swl-deep-01-color"> </span></span>';
    $star_half_svg = '<span data-icon="LsStarHalf" data-id="2" style="--the-icon-svg: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjFlbSIgd2lkdGg9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBhcmlhLWhpZGRlbj0idHJ1ZSIgdmlld0JveD0iMCAwIDQ4IDQ4Ij48cGF0aCBkPSJNNDYuMSAxNy4zIDMxIDE1LjkgMjUgMmMtLjItLjQtLjYtLjYtLjktLjYtLjQgMC0uOC4yLS45LjZsLTYgMTMuOS0xNS4zIDEuNGMtLjkuMS0xLjIgMS4yLS42IDEuOGwxMS40IDEwLTMuMyAxNC44Yy0uMi43LjQgMS4yIDEgMS4yLjIgMCAuMyAwIC41LS4xTDI0IDM3LjMgMzcuMSA0NWMuMi4xLjMuMS41LjEuNiAwIDEuMS0uNiAxLTEuMmwtMy4zLTE0LjggMTEuNC0xMGMuNi0uNi4zLTEuNy0uNi0xLjh6bS0xMy41IDguOC0xLjggMS42LjUgMi40IDEuOCA3LjktNy00LjEtMi4xLTEuM1YxMGwzLjIgNy41IDEgMi4yIDIuNC4yIDguMS44LTYuMSA1LjR6Ij48L3BhdGg+PC9zdmc+)" aria-hidden="true" class="swl-inline-icon svg-color"> </span>';
    $star_empty_svg = '<span data-icon="LsStarEmpty" data-id="1" style="--the-icon-svg: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjFlbSIgd2lkdGg9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBhcmlhLWhpZGRlbj0idHJ1ZSIgdmlld0JveD0iMCAwIDQ4IDQ4Ij48cGF0aCBkPSJtMjQgMTAgMy4yIDcuNSAxIDIuMiAyLjQuMiA4LjEuOC02LjEgNS40LTEuOCAxLjYuNSAyLjQgMS44IDcuOS03LTQuMS0yLjEtMS4zLTIuMSAxLjItNyA0LjEgMS44LTcuOS41LTIuNC0xLjgtMS42LTYuMS01LjQgOC4xLS44IDIuNC0uMiAxLTIuMkwyNCAxMG0wLTguN2MtLjQgMC0uOC4yLS45LjZsLTYgMTMuOS0xNS4yIDEuNWMtLjkuMS0xLjIgMS4yLS42IDEuOGwxMS40IDEwLTMuMyAxNC44Yy0uMi43LjQgMS4yIDEgMS4yLjIgMCAuMyAwIC41LS4xTDI0IDM3LjMgMzcuMSA0NWMuMi4xLjMuMS41LjEuNiAwIDEuMS0uNiAxLTEuMmwtMy4zLTE0LjggMTEuNC0xMGMtLjctLjYtLjMtMS43LjYtMS44TDMxIDE1LjkgMjUgMmMtLjItLjUtLjYtLjctMS0uN2EiPiA8L3BhdGg+PC9zdmc+)" aria-hidden="true" class="swl-inline-icon svg-color"> </span>';

    $review_score_html  = '<div class="rating-star">';

    $review_score_html .= str_repeat($star_full_svg, $before);
    $review_score_html .= str_repeat($star_half_svg, $middle);
    $review_score_html .= str_repeat($star_empty_svg, $after);

    $review_score_html .= ' <span class="rating-star-text">' . $review_score . '点</span></div>';

    return $review_score_html;
}

add_shortcode('star', 'star_shortcode');

CSS

以下のコードで星の色を変えます。

テーマがSWELLであれば以上です。

.rating-star .svg-color {
    color: #ff9900;
}

追記、SWELLの環境によっては以下で表示されました。

.swl-inline-icon {
    position: relative;
    display: inline-block;
}
.swl-inline-icon:after {
    color: #ff9900;
    background: currentcolor;
    content: "";
    display: block;
    height: 100%;
    -webkit-mask-image: var(--the-icon-svg);
    mask-image: var(--the-icon-svg);
    -webkit-mask-position: center center;
    mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    max-width: 2ch;
    position: absolute;
    top: 0;
    width: 100%;
}

もしSWELLのテーマ以外の場合は下記のCSSを追加します。

.rating-star .svg-color {
  position: relative;
}

.rating-star .svg-color:after {
  color: #ff9900;
  background: currentcolor;
  content: "";
  height: 100%;
  left: 0;
  -webkit-mask-image: var(--the-icon-svg);
  mask-image: var(--the-icon-svg);
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  max-width: 2ch;
  position: absolute;
  top: 0;
  width: 100%;
}