「レーダーチャート」ブロックのチャート色をスキンのサイトカラーに変更する方法

はじめに

「レーダーチャート」ブロックのチャート色は、Gutenbergエディターで個別に設定されます。

この記事では、メイド・イン・ヘブン設定→基本カラー→サイトカラーの設定の色に変更する方法について説明します。

完成イメージ

実装手順

以下のコードをfunctions.phpに追加します。

add_filter('render_block_cocoon-blocks/radar', function ($content, $block) {
  if (!defined('HVN_MAIN_COLOR')) {
    return $content;
  }

  // サイトカラー取得
  $main_color = get_theme_mod('hvn_main_color_setting', HVN_MAIN_COLOR);

  // 16進カラーをRGBに変換
  $rgb = colorcode_to_rgb($main_color);
  $css = "{$rgb['red']},{$rgb['green']},{$rgb['blue']}";

  // レーダーチャートのチャート色を変更
  $content = preg_replace(
    "/backgroundColor: 'rgba\(.+?,\s*0\.2\)'/",
    "backgroundColor: 'rgba(" . $css . ", 0.2)'",
    $content
  );

  // レーダーチャートのポイントの枠線の色を変更
  $content = preg_replace(
    "/borderColor: 'rgba\(.+?,\s*0\.9\)'/",
    "borderColor: 'rgba(" . $css . ", 0.9)'",
    $content
  );

  return $content;
}, 10, 2);

さいごに

今回紹介した方法を使えば、レーダーチャートのチャート色をスキンのサイトカラーに変更できます。
これにより、サイト全体のデザインと統一感を持たせることができます。