Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
WordPress テーマカスタマイザー 複数選択できるチェックボックスを作成する
<?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
}
}
<?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();
}
<?php
// UIに表示させる
$values = get_theme_mod( 'my-setting' ); // 配列形式
if ( !empty( $values )) {
foreach ( $values as $value ) {
echo $value;
}
}
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'))
})
})
})
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.