カスタマイザーでラジオボタンとチェックボックスをトグルUIにする方法

はじめに

WordPressのカスタマイザーは、テーマ設定を直感的に操作できる便利な機能ですが、標準のラジオボタンやチェックボックスは見た目がやや無骨で、UIとしての訴求力に欠けることがあります。
そこで、CSSだけでこれらのフォーム要素をトグルスイッチやセグメントボタン風にデザイン変更する方法が有効です。

この記事では、この方法について説明します。

完成イメージ

実装手順

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

add_action('customize_controls_enqueue_scripts', function () {
  ob_start();
  ?>
  .wp-customizer .customize-control-checkbox input,
  .wp-customizer .customize-control-radio input {
    display: none;
  }

  /* ラジオ → セグメントボタン */
  .wp-customizer .customize-control-radio {
    display: flex;
    flex-wrap: wrap;
  }

  .wp-customizer .customize-control-radio .customize-control-title {
    width: 100%;
  }

  .wp-customizer .customize-control-radio .customize-inside-control-row {
    margin: 0;
    padding-bottom: 0;
  }

  .wp-customizer .customize-control-radio label {
    box-shadow:
      inset 1px 1px 0 0 #2271b1,
      1px 1px 0 0 #2271b1,
      1px 0 0 0 #2271b1,
      0 1px 0 0 #2271b1;
    color: #2271b1;
    cursor: pointer;
    padding: 5px 12px;
  }

  .wp-customizer .customize-control-radio input:checked + label {
    background-color: #2271b1;
    color: #fff;
  }

  /* チェックボックス → トグル */
  .wp-customizer .customize-control-checkbox .customize-inside-control-row {
    align-items: center;
    display: flex;
    gap: 10px;
    margin: 0;
    padding-bottom: 0;
    padding-top: 0;
  }

  .wp-customizer .customize-control-checkbox label {
    cursor: pointer;
    padding-left: 50px;
    position: relative;
  }

  /* スイッチ背景 */
  .wp-customizer .customize-control-checkbox label::before {
    background-color: #ccc;
    border-radius: 999px;
    content: '';
    height: 22px;
    left: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: .2s;
    width: 42px;
  }

  /* スイッチ */
  .wp-customizer .customize-control-checkbox label::after {
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    content: '';
    height: 16px;
    left: 3px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: .2s;
    width: 16px;
  }

  /* スイッチオン */
  .wp-customizer .customize-control-checkbox input:checked + label::before {
    background-color: #2271b1;
  }

  .wp-customizer .customize-control-checkbox input:checked + label::after {
    transform: translate(20px, -50%);
  }
  <?php
  wp_add_inline_style('wp-admin', ob_get_clean());
});

さいごに

今回紹介した方法を使えば、WordPressカスタマイザーのラジオボタンやチェックボックスを、トグルスイッチやボタン型UIへ変換でき、視認性と操作性を大きく向上させることができます。
テーマや子テーマのデザイン統一にも役立つので、ぜひ実装してみてください。