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

2023.07.252026.10.31

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

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

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

サンプルイメージ

入力を0〜5に収めてから、小数部分が0.25以上0.75未満なら半星、0.75以上なら次の満点星へ丸めます。

点数欄は半星へ丸める前の正規化済みの値を表示します。

例えば3.7点は星3.5個、6は上限の5点・星5個になります。

1.3点

3.7点

4.5点

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

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

functions.php

バックアップ後、子テーマのfunctions.phpまたはCode Snippetsへ追加し、旧star_shortcodeの登録は置き換えて二重定義を避けます。



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

    $review_score = is_numeric($atts['score']) ? (float) $atts['score'] : 0;
    $review_score = is_finite($review_score) ? max(0, min(5, $review_score)) : 0;

    $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 = 5 - $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 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"> </span>';
    $star_empty_svg = '<span data-icon="LsStarEmpty" data-id="1" style="--the-icon-svg: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjFlbSIgd2lkdGg9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBhcmlhLWhpZGRlbj0idHJ1ZSIgdmlld0JveD0iMCAwIDQ4IDQ4Ij48cGF0aCBkPSJtMjQgMTAgMy4yIDcuNSAxIDIuMiAyLjQuMiA4LjEuOC02LjEgNS40LTEuOCAxLjYuNSAyLjQgMS44IDcuOS03LTQuMS0yLjEtMS4zLTIuMSAxLjItNyA0LjEgMS44LTcuOS41LTIuNC0xLjgtMS42LTYuMS01LjQgOC4xLS44IDIuNC0uMiAxLTIuMkwyNCAxMG0wLTguN2MtLjQgMC0uOC4yLS45LjZsLTYgMTMuOS0xNS4yIDEuNWMtLjkuMS0xLjIgMS4yLS42IDEuOGwxMS40IDEwLTMuMyAxNC44Yy0uMi43LjQgMS4yIDEgMS4yLjIgMCAuMyAwIC41LS4xTDI0IDM3LjMgMzcuMSA0NWMuMi4xLjMuMS41LjEuNiAwIDEuMS0uNiAxLTEuMmwtMy4zLTE0LjggMTEuNC0xMGMtLjctLjYtLjMtMS43LjYtMS44TDMxIDE1LjkgMjUgMmMtLjItLjUtLjYtLjctMS0uN3oiPiA8L3BhdGg+PC9zdmc+)" aria-hidden="true" class="swl-inline-icon"> </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のアイコン用CSSが読み込まれている環境では、この指定で色を変えられます。

星が出ない場合は、次の寸法・マスク指定も確認してください。

.rating-star .swl-inline-icon:after {
    color: #ff9900;
}

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

.rating-star .swl-inline-icon {
    position: relative;
    display: inline-block;
}
.rating-star .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例です。

PHPが出力する.swl-inline-iconに寸法とマスクを指定します。

テーマやブラウザーによる表示の違いは未確認です。

.rating-star .swl-inline-icon {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
}

.rating-star .swl-inline-icon: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%;
}