WordPress の話題では無いのですが、以下のプラグインを作成する際に、五つ星表示レビューの横棒グラフを今まで見た事が無い方法で作成しました。それが簡単だったのでシェアします。

Plugin Stats View

プラグイン情報をブロックあるいはショートコードで表示します。

作者: Katsushi Kawamori

(1) 最終更新: 2か月 前

5,390ダウンロード 検証済み: 7.0

ダウンロード: リリース: 2016-01-01

2026-05-21 06:46 時点の統計

Theme Stats View

テーマ情報をブロックあるいはショートコードで表示します。

作者: Katsushi Kawamori

(0) 最終更新: 2か月 前

3,254ダウンロード 検証済み: 7.0

ダウンロード: リリース: 2020-04-14

2026-05-21 06:46 時点の統計

コード

タイトルの通り、progress タグで作成しました。progress 以外の CSS はインラインにしています。

• ３列（題名、横棒、数）を、inline-block で揃えます。
• progress の、value に割合（％）max に 100 を指定します。
  • コードでは、５行分書いてありますが、プログラムの中で、５ループさせれば簡単です。
• progress の CSS は、ブラウザ毎に、異なりますのでコードをみてください。

See the Pen yLYJvRy by Katsushi Kawamori (@dodesyo312) on CodePen.