[WPカスタマイズ] レーティング円グラフ ブロック

19 min

WordPressで製品やサービスの評価のためのグラフを追加するカスタマイズです。

以前同じカスタマイズを紹介しましたが、さらに使いやすくしました。

このようなグラフを作成できます。

完成

以前の記事

コードの仕様を変更したので、前回の記事を使ってカスタマイズして頂いた場合は新たに設定する必要があります。(ご不便をおかけします!)

改良ポイント
  • 投稿画面にもデザインを反映
  • グラフ単独でも使える
  • グラフの色は4つのグラデーション
  • トータル表示を自由に設置

表示確認したテーマは「THE SONIC」、「SWELL」です。他のテーマでも微調整で使うことができます。

レンタルサーバーを「ConoHa WINGパック」にするとTHE SONICが通常 7,980円/ 年 が 5,980円になります!

ブロックエディターに完全対応の高機能テーマ。柔軟にブロックをカスタマイズできるのが魅力です。

カスタマイズの手順

  1. style.css を編集
  2. editor-style.css を編集
  3. ブロックのコードをコピー&貼り付け
  4. グラフの数値とラベルを変更・追加CSSクラスを修正

style.css を編集

子テーマ内の style.css を編集しましょう。

style.css
/*--------------------------------------
レーティングパイチャート
--------------------------------------*/
.rating-ttl {/*タイトル*/
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
}

[class^="rating-val"] { /*数値*/
    --pie-bgc: 45; /*デフォルト値を指定*/
    color: hsl(var(--pie-bgc, orange) ,100%,50%);
    position: relative;
    border-radius: 50%;
    text-align: center;
    line-height: 54px;
    font-size: 1.4rem;
    font-weight: 900;
    width: 50px;
    height: 50px;
    margin: 0 auto;
    margin-bottom: 1rem;
    z-index: 2;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

[class^="rating-val"]::before { /*外側円*/
    position: absolute;
    left: 50%;
    top: -8px;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 70px;
    height: 70px;
    line-height: 70px;
    border-radius: 50%;
    content: "";
    z-index: -2;
}

[class^="rating-val"]::after { /*内側円*/
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    border-radius: 50%;
    line-height: 54px;
    content: "";
    width: 54px;
    height: 54px;
    background: #fff;
    z-index: -1;
}

/*レーティングの背景色*/
.rating-val__0::before {
    background:conic-gradient(
        #ddd 36deg,  #ddd 360deg
    );
}

.rating-val__1::before {
    background:conic-gradient(
        #ddd 36deg,  #ddd 324deg,
        hsl(calc(var(--pie-bgc) - 4),100%,50%) 324deg,
        hsl(calc(var(--pie-bgc) - 2),100%,50%) 360deg
    );
}

.rating-val__2::before {
    background:conic-gradient(
        #ddd 36deg,  #ddd 288deg,
        hsl(calc(var(--pie-bgc) - 6),100%,50%) 288deg,
        hsl(calc(var(--pie-bgc) - 4),100%,50%) 324deg,
        hsl(calc(var(--pie-bgc) - 2),100%,50%) 360deg
    );
}

.rating-val__3::before {
    background:conic-gradient(
        #ddd 36deg,  #ddd 252deg,
        hsl(calc(var(--pie-bgc) - 8),100%,50%) 252deg,
        hsl(calc(var(--pie-bgc) - 6),100%,50%) 288deg,
        hsl(calc(var(--pie-bgc) - 4),100%,50%) 324deg,
        hsl(calc(var(--pie-bgc) - 2),100%,50%) 360deg
        );
}

.rating-val__4::before {
    background:conic-gradient(
        #ddd 36deg,  #ddd 216deg,
        hsl(calc(var(--pie-bgc) - 10),100%,50%) 216deg,
        hsl(calc(var(--pie-bgc) - 8),100%,50%) 252deg,
        hsl(calc(var(--pie-bgc) - 6),100%,50%) 288deg,
        hsl(calc(var(--pie-bgc) - 4),100%,50%) 324deg,
        hsl(calc(var(--pie-bgc) - 2),100%,50%) 360deg
    );
}

.rating-val__5::before {
    background:conic-gradient(
        #ddd 36deg,  #ddd 180deg,
        hsl(calc(var(--pie-bgc) - 12),100%,50%) 180deg,
        hsl(calc(var(--pie-bgc) - 10),100%,50%) 216deg,
        hsl(calc(var(--pie-bgc) - 8),100%,50%) 252deg,
        hsl(calc(var(--pie-bgc) - 6),100%,50%) 288deg,
        hsl(calc(var(--pie-bgc) - 4),100%,50%) 324deg,
        hsl(calc(var(--pie-bgc) - 2),100%,50%) 360deg
    );
}

.rating-val__6::before {
    background:conic-gradient(
        #ddd 36deg,  #ddd 144deg,
        hsl(calc(var(--pie-bgc) - 14),100%,50%) 144deg,
        hsl(calc(var(--pie-bgc) - 12),100%,50%) 180deg,
        hsl(calc(var(--pie-bgc) - 10),100%,50%) 216deg,
        hsl(calc(var(--pie-bgc) - 8),100%,50%) 252deg,
        hsl(calc(var(--pie-bgc) - 6),100%,50%) 288deg,
        hsl(calc(var(--pie-bgc) - 4),100%,50%) 324deg,
        hsl(calc(var(--pie-bgc) - 2),100%,50%) 360deg
    );
}

.rating-val__7::before {
    background:conic-gradient(
        #ddd 36deg,  #ddd 108deg,
        hsl(calc(var(--pie-bgc) - 16),100%,50%) 108deg,
        hsl(calc(var(--pie-bgc) - 14),100%,50%) 144deg,
        hsl(calc(var(--pie-bgc) - 12),100%,50%) 180deg,
        hsl(calc(var(--pie-bgc) - 10),100%,50%) 216deg,
        hsl(calc(var(--pie-bgc) - 8),100%,50%) 252deg,
        hsl(calc(var(--pie-bgc) - 6),100%,50%) 288deg,
        hsl(calc(var(--pie-bgc) - 4),100%,50%) 324deg,
        hsl(calc(var(--pie-bgc) - 2),100%,50%) 360deg
    );
}

.rating-val__8::before {
    background:conic-gradient(
        #ddd 36deg,  #ddd 72deg,
        hsl(calc(var(--pie-bgc) - 18),100%,50%) 72deg,
        hsl(calc(var(--pie-bgc) - 16),100%,50%) 108deg,
        hsl(calc(var(--pie-bgc) - 14),100%,50%) 144deg,
        hsl(calc(var(--pie-bgc) - 12),100%,50%) 180deg,
        hsl(calc(var(--pie-bgc) - 10),100%,50%) 216deg,
        hsl(calc(var(--pie-bgc) - 8),100%,50%) 252deg,
        hsl(calc(var(--pie-bgc) - 6),100%,50%) 288deg,
        hsl(calc(var(--pie-bgc) - 4),100%,50%) 324deg,
        hsl(calc(var(--pie-bgc) - 2),100%,50%) 360deg
    );
}

.rating-val__9::before {
    background:conic-gradient(
        #ddd 0deg,#ddd 36deg,
        hsl(calc(var(--pie-bgc) - 20),100%,50%) 36deg,
        hsl(calc(var(--pie-bgc) - 18),100%,50%) 72deg,
        hsl(calc(var(--pie-bgc) - 16),100%,50%) 108deg,
        hsl(calc(var(--pie-bgc) - 14),100%,50%) 144deg,
        hsl(calc(var(--pie-bgc) - 12),100%,50%) 180deg,
        hsl(calc(var(--pie-bgc) - 10),100%,50%) 216deg,
        hsl(calc(var(--pie-bgc) - 8),100%,50%) 252deg,
        hsl(calc(var(--pie-bgc) - 6),100%,50%) 288deg,
        hsl(calc(var(--pie-bgc) - 4),100%,50%) 324deg,
        hsl(calc(var(--pie-bgc) - 2),100%,50%) 360deg
    );
}

.rating-val__10::before {
    background:conic-gradient(
        hsl(calc(var(--pie-bgc) - 22),100%,50%) 0deg,
        hsl(calc(var(--pie-bgc) - 20),100%,50%) 36deg,
        hsl(calc(var(--pie-bgc) - 18),100%,50%) 72deg,
        hsl(calc(var(--pie-bgc) - 16),100%,50%) 108deg,
        hsl(calc(var(--pie-bgc) - 14),100%,50%) 144deg,
        hsl(calc(var(--pie-bgc) - 12),100%,50%) 180deg,
        hsl(calc(var(--pie-bgc) - 10),100%,50%) 216deg,
        hsl(calc(var(--pie-bgc) - 8),100%,50%) 252deg,
        hsl(calc(var(--pie-bgc) - 6),100%,50%) 288deg,
        hsl(calc(var(--pie-bgc) - 4),100%,50%) 324deg,
        hsl(calc(var(--pie-bgc) - 2),100%,50%) 360deg
    );
}

[class^="rating-val"] + .rating-lb,
.wp-block-column [class^="rating-val"] + .rating-lb {/*ラベル*/
    text-align: center;
    margin-bottom: 2rem !important;
}

/*レーティング文字色設定*/
[class^="rating-val"].is-style-rating-orange  {
    --pie-bgc: 40;
}

[class^="rating-val"].is-style-rating-purple {
    --pie-bgc: 290;
}

[class^="rating-val"].is-style-rating-blue {
    --pie-bgc: 220;
}

[class^="rating-val"].is-style-rating-green {
    --pie-bgc: 95;
}

/*トータル表示*/
.rating-total {
    position: relative;
    margin: 1rem auto;
    background: #fff;
    width: 120px;
    height: 68px;
    border: 2px solid currentColor;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
     -ms-user-select: none;
         user-select: none;
}

.rating-total .rating-total_ttl {
    position: absolute;
    font-size: 14px;
    top: 4px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    font-weight: 900;
    color: currentColor;
}

.rating-total .rating-total_val {
    position: absolute;
    top: 60%;
    left: 50%;
    -webkit-transform: translate(-50%,-40%);
    transform: translate(-50%,-40%);
    font-size: 36px;
    white-space: nowrap;
    color: currentColor;
}

editor-style.css を編集

editor-style.css (ファイル名はテーマによる) はWordPressの投稿画面の見た目をカスタマイズするためのスタイルシートです。

editor-style.css
/*--------------------------------------
レビューパイ (エディター)
--------------------------------------*/
.rating-ttl,
.rating-lb {
    text-align: center;
}

.rating-ttl {/*レビュータイトル*/
    font-size: 1.4rem;
    font-weight: 700;
}

[class^="rating-val"] {
    position: relative;
    text-align: center;
    font-size: 1.4rem !important;
    z-index: 2;
}

[class^="rating-val__"]::after {
    position: absolute;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%,-50%);
    box-sizing: border-box;
    background: #fff;
    border: 6px solid var(--pie-bgc, orange);
    border-radius: 50% !important;
    content: "";
    width: 60px;
    height: 60px;
    z-index: -1;
}

.is-style-rating-blue {
    --pie-bgc: blue;
}

.is-style-rating-orange {
    --pie-bgc: orange;
}

.is-style-rating-green {
    --pie-bgc: limegreen;
}

.is-style-rating-purple {
    --pie-bgc: purple;
}

[class^="rating-val"] {
    color: var(--pie-bgc, orange);
}

/*トータル表示*/
.rating-total {
    position: relative;
    margin: 1rem auto;
    background: #fff;
    width: 200px;
    height: 100px;
    border: 2px solid currentColor;
    box-sizing: border-box;
}

.rating-total.wp-block-group.has-background {
    padding: 0;
    margin-top: 1rem;
}

.rating-total .rating-total_ttl {
    position: absolute;
    font-size: 14px;
    top: -24px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    font-weight: 900;
    color: currentColor;
    white-space: nowrap;
}

.rating-total .rating-total_val {
    position: absolute;
    top: 0px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    font-size: 36px;
    color: currentColor;
    white-space: nowrap !important;
}

functions.php

functions.phpの編集を誤ると、WordPressの表示ができなくなりますので必ずファイルのバックアップをとってください。(記述を削除すれば直ります。)

editor-style.css を利用していない場合は、投稿画面にデザインが反映されません。

その場合は、functions.php に以下のコードを記述しましょう。

functions.php
add_action( 'enqueue_block_editor_assets', function() {
	// エディター用のスタイル
	wp_enqueue_style( 'theme-editor-style', get_stylesheet_directory_uri() . '/editor-style.css' );
} );

投稿画面にコードを貼り付け

こちらに投稿画面用のテンプレートを用意しました。

以下のコードをコピーして、使いたいところで Ctrl + V ( Macは ⌘ + V) で貼り付けましょう。

貼り付けるコード
<!-- wp:group -->
<div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"className":"rating-ttl"} -->
<p class="rating-ttl">製品サービス名</p>
<!-- /wp:paragraph -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"className":"rating-val__1 is-style-rating-blue"} -->
<p class="rating-val__1 is-style-rating-blue">3</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"rating-lb"} -->
<p class="rating-lb">ラベル</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"className":"rating-val__5 is-style-rating-blue"} -->
<p class="rating-val__5 is-style-rating-blue">5</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"rating-lb"} -->
<p class="rating-lb">ラベル</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"className":"rating-val__8 is-style-rating-blue"} -->
<p class="rating-val__8 is-style-rating-blue">8</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"rating-lb"} -->
<p class="rating-lb">ラベル</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"className":"rating-val__10 is-style-rating-blue"} -->
<p class="rating-val__10 is-style-rating-blue">10</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"rating-lb"} -->
<p class="rating-lb">ラベル</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:group -->
構造

さきほどのコードを投稿画面へコピペすると、数値とラベルなどを変更できます。

使うたびに貼り付けるのは大変なので、自分が使いやすいようにカスタマイズしたらWordPressの「パターン」や「再利用ブロック」などに登録しておきましょう。

使い方

一見、難しそうに見えますが基本的に数値とラベルと入力したら、円グラフ表示のための追加CSSクラス rating-val__x の数値を変更するだけで使えます。

グラフの数値を指定

投稿画面内の数値を入力しただけでは、実際の記事表示画面のグラフ描写には反映されません

別途クラス名の修正・指定が必要です。

グラフの数値を表示しているブロックを選択しましょう。

  • WP投稿画面
  • 編集したいブロックを選択
  • 右上の歯車マークをクリック
  • 文書・ブロック
  • 高度な設定
  • 追加CSSクラス
ブロック
追加クラス

グラフの数値に合わせて下のようなクラス名にしてください。「rating-val__8

  • rating-val__4 (4の場合)
  • rating-val__10 (10の場合)

rating-val__ (アンダースコア2つ)のあとに0〜10までの数字を入力します。すでに入力済みの場合は数値のみ変更すればOKです。

グラフの最大値を 5 にする場合は、数値が 4のときは rating-val__8 としましょう。

色の指定方法

指定しない場合(空欄)のグラフはオレンジ色です。

グラフと同じブロックを選んで追加CSSクラスに「is-style-rating-xxx」のようにクラスを指定して下さい。

追加CSSクラス

「rating-val__数字」に半角スペースを一つ開けて、「is-style-rating-色」を入力。

  • is-style-rating-orange (オレンジ色)
  • is-style-rating-blue (青色)
  • is-style-rating-green (緑色)
  • is-style-rating-purple (紫色)

THE SONIC の場合のカラム設定

モバイルで表示したときに縦に1列に並んでしまうので、こちらの設定が必要です。親のカラムブロック(全体)を選択して右サイドメニューから設定します。

カラム設定

カラムのモバイル表示を2列または3列に

SWELL の場合のカラム設定

SWELL も同様に カラムブロック(全体)を選択して右サイドメニューのカラム設定をします。

SWELLカラム

カラムのモバイル表示を2列に

SWELLで3列表示にしたい

WordPressからの設定ではスマホ表示で2列までしか変更できませんが、追加でCSSを追加することで3列表示も可能です。

style.css に以下のコードを追加して下さい。

/*SWELL 3カラム*/
@media (max-width: 959px) {
	.wp-block-columns.sp_column3 .wp-block-column {
		flex-basis: 32%!important;
		flex-grow: 0;
		margin-top: 2%!important;
		margin-bottom: 2%!important;
	}
}

投稿画面で「カラム設定 > スマホでの列数設定」 をしたあと、一番下の追加CSSクラスに「sp_column2」が挿入されるので、これを「sp_column3」に変更しましょう。

総合評価ラベルをつける

こちらのコードを投稿画面に Ctrl +V (⌘ + V)で貼り付けて下さい。

投稿画面へ貼り付け
<!-- wp:group -->
<div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"className":"rating-ttl"} -->
<p class="rating-ttl">製品サービス名</p>
<!-- /wp:paragraph -->

<!-- wp:group {"className":"rating-total"} -->
<div class="wp-block-group rating-total"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"className":"rating-total_ttl"} -->
<p class="rating-total_ttl">TOTAL</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"rating-total_val"} -->
<p class="rating-total_val">8</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"className":"rating-val__1 is-style-rating-orange"} -->
<p class="rating-val__1 is-style-rating-orange">3</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"rating-lb"} -->
<p class="rating-lb">ラベル</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"className":"rating-val__5 is-style-rating-orange"} -->
<p class="rating-val__5 is-style-rating-orange">5</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"rating-lb"} -->
<p class="rating-lb">ラベル</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"className":"rating-val__8 is-style-rating-orange"} -->
<p class="rating-val__8 is-style-rating-orange">8</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"rating-lb"} -->
<p class="rating-lb">ラベル</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"className":"rating-val__10 is-style-rating-orange"} -->
<p class="rating-val__10 is-style-rating-orange">10</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"rating-lb"} -->
<p class="rating-lb">ラベル</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:group -->
総合評価ブロックの構成

グループブロック + (段落ブロック2つ)で作成することができます。

  • 親ブロックはグループグロック 「rating-total」追加CSSクラス
  • 総合評価ラベルは段落ブロック 「rating-total_ttl」追加CSSクラス
  • 総合評価の数値は段落ブロック 「rating-total_val」追加CSSクラス

総合評価の枠線、背景色、文字色はグループブロックで変更すると一括で適用されます。

SWELL の場合

SWELLではエディター画面の表示がズレるので editor-style.css の /*トータル表示*/ 以下を差し替えて下さい。

style.css
/*トータル表示*/
.rating-total {
    position: relative;
    margin: 1rem auto;
    background: #fff;
    width: 200px;
    height: 100px;
    border: 2px solid currentColor;
    box-sizing: border-box;
}

.rating-total.wp-block-group.has-background {
    padding: 0;
    margin-top: 1rem;
}

.rating-total .rating-total_ttl {
    position: absolute;
    font-size: 14px;
    top: 10px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    font-weight: 900;
    color: currentColor;
    white-space: nowrap;
}

.rating-total .rating-total_val {
    position: absolute;
    top: 10%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    font-size: 36px;
    color: currentColor;
    white-space: nowrap !important;
}

グラフ単体で使う場合

好きな場所に段落ブロックを2つ追加しましょう。

1つめの段落ブロックの追加CSSクラスを 「rating-val__数字 is-style-rating-orange

2つめの段落ブロックの追加CSSクラスを「rating-lb」

と指定するだけでOKです。

この2つのブロックをグループブロックなどで囲んだほうが使いやすいです。

いろいろな使い方が可能

レーティンググラフは段落ブロックが最小ブロックなので、基本的にどこでも配置することができます。

グループブロック内に画像やリストなどを自由に配置してみましょう。

TOTAL

8

最新掃除機

  • 音が静か!
  • チリ一つ逃さない吸引力
  • 女性でも持ち運びやすい
  • 音がちょっと大きめ

3

価格

5

静音性

8

重さ

10

吸引力

6

メンテナンス

7

ゴミ容量

ZIMA

気になるガジェットやサービスをレビュー!日常生活のアップデートを目標に役に立つ情報を掲載していきます。

仕事のご依頼などはお問い合わせからどうぞ。

FOLLOW

カテゴリー:
関連記事

コメントを残す

メールアドレスが公開されることはありません。