SWELLの商品レビューブロックでは、編集画面の評価入力を使うほか、SCFに保存した小数点の評価を公開側へ反映できます。
この記事では、通常投稿内のレビューごとにSCFの行を対応させる方法を説明します。
エディターの入力ステップを変える方法ではありません。
0〜5の評価をSCFから取得し、小数第1位へ丸めた値で公開表示と対応する構造化データを更新します。
公開側のブロック属性ratingを変更する方式です。
エディターの入力ステップ自体は変更しません。
Product構造化データの出力はテーマの版・設定によって別途確認が必要です。
SCFの小数評価を商品レビューブロックへ反映する方法
1つでも複数でも同じコードを使います。
ブロックへ行番号のクラスを明示し、再描画や並べ替えで値の対応がずれないようにします。
カスタムフィールドの入力
Smart Custom Fieldsをインストールして有効化します。
以下はSmart Custom FieldsのSCFクラス用です。
ACFや名前の似た別プラグインにはそのまま使えません。
フィールド名をreview_rating_decimalに設定します。
複数の商品レビューブロックにも対応できるように、繰り返しにチェックを付けてグループ名を入れておきましょう。
表示条件の投稿タイプで「投稿」を選択し、設定を保存します。
記事の評価値とレビューブロックの対応付け
投稿本文に商品レビューブロックを配置します。
投稿編集画面の下部に表示されたカスタムフィールドへ評価値を入力します。
レビューの件数に合わせて、SCFの繰り返し行を用意します。
対象レビューブロックの高度な設定＞追加CSSクラスへ、1行目ならwaza-review-1、2行目ならwaza-review-2を指定してください。
クラスを付けないブロックは変更しません。
並べ替え後も番号で対応します。
コードの挿入
子テーマのfunctions.phpをバックアップし、既存PHP内に以下を追加します。
以前の匿名フィルターを残すと二重に処理されるため、旧コードは登録行ごと置き換えます。
function waza_review_decimal($block) {
if (($block['blockName'] ?? '') !== 'loos/review' || !class_exists('SCF')) return $block;
$post_id = get_the_ID();
if (!$post_id) return $block;
$classes = $block['attrs']['className'] ?? '';
if (!preg_match('/(?:^|\s)waza-review-([1-9][0-9]*)(?:\s|$)/', $classes, $match)) return $block;
$index = (int) $match[1] - 1;
$values = SCF::get('review_rating_decimal', $post_id);
if (!is_array($values)) $values = array($values);
if (!array_key_exists($index, $values)) return $block;
$value = $values[$index];
if (!is_numeric($value) || !is_finite((float) $value)) return $block;
$block['attrs']['rating'] = max(0, min(5, round((float) $value, 1)));
return $block;
}
add_filter('render_block_data', 'waza_review_decimal');投稿を保存し、公開ページの商品レビューブロックにSCFの評価値が反映されているか確認します。
旧版のコードはGitHubのMOTOKI-LLC/WAZA-codeにもまとめています。
指定行がない、空欄、数値でない場合は元の評価を維持します。
最後の行の値を別の商品へ流用しません。
数値は0〜5に制限して小数1桁へ丸めます。
同じ番号を複数ブロックへ付けると同じ評価になります。
通常投稿本文内を想定した例です。
ブログパーツやクエリーループ内ではget_the_ID()が示す投稿が変わるため、利用前にフィールド取得先を確認してください。
元へ戻す場合は追加関数・フィルターを外し、ブロックの追加クラスを取り除きます。
保存済みの元のratingは書き換えません。
SCFに保存した4.3・3.8について、SWELL 2.19.0の公開側の数値表示とProduct JSON-LDのratingValueが一致することを確認しました。
ただし星アイコンの描画はテーマの従来処理のままで、0.1単位の塗り分けにはなりません。
例として4.3は数値4.3でも星4個の表示です。
このコードは星の描画やエディターの入力UIを変更するものではありません。
2件のレビューを別々の評価で保存する
| SCFの行 | 入力例 | レビューの追加CSSクラス |
|---|---|---|
| 1行目 | 4.3 | waza-review-1 |
| 2行目 | 3.8 | waza-review-2 |
SCFの繰り返し行を2件用意し、1行目に4.3、2行目に3.8を入力します。
商品レビューAにはwaza-review-1、商品レビューBにはwaza-review-2を付け、投稿を更新します。
ブロックの表示順だけでは取得するSCFの行は変わりません。
クラスの番号で対応させます。
保存後は編集画面を開き直し、2行の値が残るか確認します。
次に公開画面でAが4.3、Bが3.8になっているかを確認してください。
構造化データも出力する設定なら、ページソースの各商品のreviewRating.ratingValueと、画面の数値が一致することを確かめます。
隔離したWordPress 7.1.2／SWELL 2.19.0／SCF 5.0.8で、SCFの行追加・2件の入力・投稿更新後の保持を操作し、公開側の数値と各商品の構造化データが4.3と3.8で一致することを確認しました。
商品レビューの元のratingは2のままで、本文の保存値ではなく表示時に評価を置き換えています。
レビューを減らす場合は、SCFの行とクラス番号の対応を見直します。
1行目を削除すると後続の行が詰まるため、商品Bのクラスをwaza-review-1へ変えるなど、残す商品の対応を揃えてから更新してください。
