WordPressで星による評価を表示する方法

はじめに

商品のレビュー記事を書くときなど、星の数で評価したい場合があります。

以前は、「Universal Star Rating」とか「Shortcode Star Rating」といったプラグインがあったようですが、今はなぜか見当りません。
「star rating」等で検索をかけると、自分のサイトを訪問者の方々に評価してもらうプラグインばかりがヒットします。

また、星の数が表示できるようなプラグインであっても、色が黒のままだったり、意図しない改行を回避できないような仕様ばかりでした。

cssやhtmlで星による評価を表示する

結局、cssやhtmlで対応するのが一番早そうです。
cssやhtmlについては初心者なので、間違っている場合はコメント欄でお知らせください。

ブロックエディタでカスタムcssとカスタムHTMLを使う場合

先ず、ブロックエディタでカスタムcssを使う場合について述べます。

クラス名である「.star-size」や「.star-clolr」は、僕が勝手に決めた名前なので、別の名前にしてもらっても大丈夫です。
サイズは、「x-large」としています。他に「xx-small, x-small, small, medium, large, xx-large, xxx-large」等が使えますので、ご自分のサイトに適したサイズを試してみてください。

色は、黄色だと白地とコントラストが付きにくいので、「きんちゃJIS」にしています。こちらもお好みで変更ください。

次に、カスタムHTMLブロックを挿入し、次のように記述します。

<span class="star-size">
評価項目１：<span class="star-color">★☆☆☆☆ </span>1<br />
評価項目２：<span class="star-color">★★★☆☆ </span>3<br />
評価項目３：<span class="star-color">★★★★★ </span>5<br />
</span>

これを実施すると次のようになります。

評価項目１：★☆☆☆☆ 1
評価項目２：★★★☆☆ 3
評価項目３：★★★★★ 5

評価項目や星の数を同じ行内に黒で書くことができます。
また、同一ブロック内の改行幅になっています。

ブロックエディタでhtmlのみを使う場合

htmlだけを使っても実現できます。
カスタムHTMLブロックを挿入し、次のように記述します。

<span style="font-size: x-large;">
評価項目１：<span style="color: #e0861a;">★☆☆☆☆ </span>1<br />
評価項目２：<span style="color: #e0861a;">★★★☆☆ </span>3<br />
評価項目３：<span style="color: #e0861a;">★★★★★ </span>5<br />
</span>

これを実施すると次のようになります。

評価項目１：★☆☆☆☆ 1
評価項目２：★★★☆☆ 3
評価項目３：★★★★★ 5

見栄えはカスタムcssを使った場合と同じです。
世間一般的にはhtmlのみのコードは非推奨のようです。

クラシックエディタの場合

クラシックエディタでも手順は同じです。

cssを使う場合は、カスタムcssに上述のコードを打ち込みます。

その後、エディタの右上にある「テキスト」タブに切り替えて、htmlのコードを打ち込みます。

cssを使わない場合も、「テキスト」タブに切り替えてhtmlのコードを打ち込めば終了です。

このとき、cssを使う場合は、色やフォントサイズが変わらないので、プレビューを使わないとサイトでの表示の様子がわかりません。htmlのみの場合は、色やフォントのサイズが変わるので、プレビューをしなくても表示の様子を確認することができます。

CSSを使う場合：

評価項目１：★☆☆☆☆ 1
評価項目２：★★★☆☆ 3
評価項目３：★★★★★ 5

HTMLのみで表示する場合：

評価項目１：★☆☆☆☆ 1
評価項目２：★★★☆☆ 3
評価項目３：★★★★★ 5

エディタ上での見え方は異なるのですが、表示されるページでは違いがありませんね。

まとめ

WordPressで、星による評価を表示する方法を示しました。
プラグインは使っていません。
星を半分にして、10段階評価をしている場合があります。残念ながら、本方法ではできないので、その際には星を10個並べてください。