WordPress テーマカスタマイザー 複数選択できるチェックボックスを作成する

class-customize-multiple-checkbox-control.php

<?php
// 複数選択できるチェックボックスを定義
class My_Customize_Multiple_Checkbox_Control extends WP_Customize_Control {

  public $type = 'multiple-checkbox';

  protected function render_content() {
    if ( empty( $this->choices ) ) return; ?>

    <?php if ( !empty( $this->label ) ) : ?>
      <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
    <?php endif; ?>

    <?php if ( !empty( $this->description ) ) : ?>
      <span class="description customize-control-description"><?php echo esc_html( $this->description ); ?></span>
    <?php endif; ?>

    <?php $multi_values = !is_array( $this->value() ) ? explode( ',', $this->value() ) : $this->value(); ?>

    <ul>
      <?php foreach ( $this->choices as $value => $label ): ?>
      <li>
        <label>
          <input type="checkbox" value="<?php echo $value; ?>" <?php checked( in_array( $value, $multi_values ) ); ?>>
          <?php echo esc_html( $label ); ?>
        </label>
      </li>
      <?php endforeach; ?>
    </ul>
    <input
      type="hidden"
      name="mulitiple-checkbox-value"
      <?php $this->link(); ?>
      value="<?php echo esc_attr( implode( ',', $multi_values ) ); ?>"
    >
  <?php
  }
}

functions.php

<?php
add_action( 'customize_controls_enqueue_scripts', 'my_customize_controls_enqueue_scripts' );
function my_customize_controls_enqueue_scripts() {
  wp_enqueue_script(
    'my-theme-customize',
    get_template_directory_uri() . '/path/to/theme-customize.js',
    array(),
    filemtime( get_template_directory() . '/path/to/theme-customize.js' ),
    true
  );
}

add_action( 'customize_register', 'my_customize_register' );
function my_customize_register( $wp_customize ) {

  // クラス定義はmy_customize_register関数内でなければならない
  include '/path/to/class-customize-multiple-checkbox-control.php';
  
  $wp_customize->add_section(
    'my-section', // セクションID 任意
    array(
      'title'       => 'セクション名',
      'description' => '説明文',
      'priority'    => 1000
    )
  );
  
  $wp_customize->add_setting(
    'my-setting', // 設定ID 任意
    array(
      'default' => [
        'twitter',
        'facebook',
        'hatebu',
        'pocket'
      ],
      'sanitize_callback' => 'my_sanitize_multiple_checkbox' // 自作のサニタイズ用関数を指定
    )
  );

  $wp_customize->add_control(
    new My_Customize_Multiple_Checkbox_Control (
      $wp_customize,
      'my-control', // コントロールID 任意
      array(
        'section'     => 'my-section',  // セクションIDを指定
        'settings'    => 'my-setting', // 設定IDを指定
        'label'       => 'ラベル名',
        'description' => '説明文',
        'choices'     => array(
          'twitter'  => 'Twitter',
          'facebook' => 'Facebook',
          'hatebu'   => 'はてなブックマーク',
          'pocket'   => 'Pocket'
        )
      )
    )
  );
}

// 値を配列で保存
function my_sanitize_multiple_checkbox( $values ) {
  $multi_values = !is_array( $values ) ? explode( ',', $values ) : $values;
  return !empty( $multi_values ) ? array_map( 'sanitize_text_field', $multi_values ) : array();
}

some-template.php

<?php
// UIに表示させる
$values = get_theme_mod( 'my-setting' ); // 配列形式

if ( !empty( $values )) {
  foreach ( $values as $value ) {
    echo $value;
  }
}

theme-customize.js

window.onload = function () {
  const $parents = document.querySelectorAll('.customize-control-multiple-checkbox')

  $parents.forEach((parent) => {
    const $checkboxes = parent.querySelectorAll('input[type="checkbox"]')
    const $hidden = parent.querySelector('[name="mulitiple-checkbox-value"]')

    $checkboxes.forEach((checkbox) => {
      checkbox.addEventListener('change', (event) => {
        const $checked = parent.querySelectorAll('input[type="checkbox"]:checked')
        const values = [...$checked].map((node) => {
          return node.value
        })

        $hidden.value = values.join(',')
        $hidden.dispatchEvent(new Event('change'))
      })
    })
  })
}