【WPカスタマイザー】サイトで使用するカラーをカスタマイザーで変更できるようにする方法

前にどこかで実装して、それだけで満足しちゃって、なんの仕事でやったか忘れてしまったっていう…😫（あるある）

なので、未来の自分に向けてメモしときます。
誰かのお役に立てたら幸いです！

カスタマイザーへ「🎨 カラー設定」項目を追加する（functions.php）

今回は、基本の５色を設定できるようにします。

ちなみにWP管理画面でいうと「外観＞カスタマイズ」の中に新しい項目ができているはずです。（うまくいっていれば）

/*======================
WPカスタマイザー
======================*/
function wp_customizer( $wp_customize ) {
  // カラー
	$wp_customize->add_section(
		'color_section',
		array(
			'title'    => '🎨 カラー設定',
			'priority' => 40,
		)
	);
  $wp_customize->add_setting('color_black', array('default' => '#1E1913',));
  $wp_customize->add_control(
    new WP_Customize_Color_Control (
      $wp_customize,
      'color_black',
      array (
        'section'  => 'color_section',
        'label'    => 'Black',
        'settings' => 'color_black',
      )
    )
  );
  $wp_customize->add_setting('color_white', array('default' => '#F4F1EE',));
  $wp_customize->add_control(
    new WP_Customize_Color_Control (
      $wp_customize,
      'color_white',
      array (
        'section'  => 'color_section',
        'label'    => 'White',
        'settings' => 'color_white',
      )
    )
  );
  $wp_customize->add_setting('color_primary', array('default' => '#726353',));
  $wp_customize->add_control(
    new WP_Customize_Color_Control (
      $wp_customize,
      'color_primary',
      array (
        'section'  => 'color_section',
        'label'    => 'Primary',
        'settings' => 'color_primary',
      )
    )
  );
  $wp_customize->add_setting('color_secondary', array('default' => '#C2B2A2',));
  $wp_customize->add_control(
    new WP_Customize_Color_Control (
      $wp_customize,
      'color_secondary',
      array (
        'section'  => 'color_section',
        'label'    => 'Secondary',
        'settings' => 'color_secondary',
      )
    )
  );
  $wp_customize->add_setting('color_accent', array('default' => '#cca97e',));
  $wp_customize->add_control(
    new WP_Customize_Color_Control (
      $wp_customize,
      'color_accent',
      array (
        'section'  => 'color_section',
        'label'    => 'Accent',
        'settings' => 'color_accent',
      )
    )
  );
}
add_action('wp_enqueue_scripts', 'enqueue_custom_script');

head内にCSS変数（カスタムプロパティ）として出力する（functions.php）

先ほど作成したカスタマイザーで色合いを調整したときにサイト内へ反映されるように、入力された値をhead内でCSS変数として設定します。

function hook_head() {
?>
<!-- hook_head START -->
<style id="wp_customizer">
  :root {
    --wp--preset--color--black: <?php echo get_theme_mod( 'color_black', '#000'); ?>;
    --wp--preset--color--white: <?php echo get_theme_mod( 'color_white', '#FFF'); ?>;
    --wp--preset--color--primary: <?php echo get_theme_mod( 'color_primary', '#000'); ?>;
    --wp--preset--color--secondary: <?php echo get_theme_mod( 'color_secondary', '#000'); ?>;
    --wp--preset--color--accent: <?php echo get_theme_mod( 'color_accent', '#000'); ?>;
  }
</style>
<link rel="stylesheet" href="<?php echo get_theme_file_uri('/assets/css/style.css'); ?>?<?php echo date('Ymd-His'); ?>">
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
<!-- css -->
<!-- hook_head END -->
<?php
}
add_action('wp_head', 'hook_head');

出力したCSS変数を、CSS内で反映できるようにする（CSSファイル）

あくまで見本ですが、こんな感じで変数をCSS内でも反映できるようにします。

//カラー（基本）
$color-base: var(--wp--preset--color--white); //背景色
$color-text: var(--wp--preset--color--black); //文字色
$color-primary: var(--wp--preset--color--primary);
$color-secondary: var(--wp--preset--color--secondary);
$color-accent: var(--wp--preset--color--accent);
$color-white: var(--wp--preset--color--white);
$color-black: var(--wp--preset--color--black);