Wordpressのカスタマイザーで設定できるオプションタイプとサンプルコードまとめ

カスタマイザーで使えるオプションのタイプ一覧とサンプルコードまとめ。

カスタマイザーの基本構造

カスタマイザーはfunctions.phpに書く。

セクション、設定、コントロール（フォーム）の３つを定義する必要がある。

セクションはグループなので１つでもOK。設定とコントロールは対になってるのでオプションごとに両方とも必要。

function mytheme_customize_register( $wp_customize ) {
  // セクション（グループ）を作成
  $wp_customize->add_section( 'your_section_id' , array(
		'title'      => __( 'Theme Color', 'theme_name' ),
		'priority'   => 21,
	) );
  // データベースに新しい設定項目を登録
	$wp_customize->add_setting( 'your_setting_id' , array(
    'default'   => 'Dark',
		'transport' => 'refresh',
	) );
  // 管理画面に表示するコントローラ（フォーム）を登録
  $wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'your_setting_id', array(
    'label'          => __( 'Dark or light theme version?', 'theme_name' ),
    'section'        => 'your_section_id',
    'settings'       => 'your_setting_id',
    'type'           => 'radio',
    'choices'        => array(
      'dark'   => __( 'Dark' ),
      'light'  => __( 'Light' )
    )
  ) ) );
}
add_action( 'customize_register', 'corp_customize_register' );

カスタマイザーで使えるオプションのタイプ

タイプ一覧。

• テキスト
• テキストエリア
• 日付
• 番号
• セレクト
• チェックボックス
• ラジオボタン
• 画像アップロード
• カラー設定

テキスト、テキストエリア

テキスト入力ができるオプションを追加。

テキストエリアの場合はtextの部分をtextareaに変更する。

$wp_customize->add_setting( 'text_setting_id', array(
  'capability' => 'edit_theme_options',
  'default' => 'テキスト',
  'sanitize_callback' => 'sanitize_text_field',
) );
$wp_customize->add_control( 'text_setting_id', array(
  'label' => __( 'Custom Text' ),
  'description' => __( 'This is a custom text box.' ),
  'section' => 'your_section_id',
  'type' => 'text', // textareaでテキストエリアに変更可能
) );

日付

カレンダーを追加。

$wp_customize->add_setting( 'date_setting_id', array(
  'capability' => 'edit_theme_options',
  'sanitize_callback' => 'my_sanitize_date',
) );

$wp_customize->add_control( 'date_setting_id', array(
  'label' => __( 'Custom Date' ),
  'description' => __( 'This is a custom date control.' ),
  'section' => 'your_section_id',
  'type' => 'date',
  'input_attrs' => array(
    'placeholder' => __( 'mm/dd/yyyy' ),
  ),
) );
function my_sanitize_date( $input ) {
  $date = new DateTime( $input );
  return $date->format('m-d-Y');
}

番号

番号フォームを追加。

$wp_customize->add_setting( 'number_setting_id', array(
  'capability' => 'edit_theme_options',
  'sanitize_callback' => 'my_sanitize_number',
  'default' => 1,
) );
$wp_customize->add_control( 'number_setting_id', array(
  'label' => __( 'Custom Number' ),
  'description' => __( 'This is a custom number.' ),
  'section' => 'your_section_id',
  'type' => 'number',
) );
function my_sanitize_number( $number, $setting ) {
  $number = absint( $number );
  return ( $number ? $number : $setting->default );
}

セレクト

セレクトフォームを追加。

$wp_customize->add_setting( 'select_setting_id', array(
  'capability' => 'edit_theme_options',
  'sanitize_callback' => 'my_sanitize_select',
  'default' => 'value1',
) );
$wp_customize->add_control( 'select_setting_id', array(
  'label' => __( 'Custom Select Option' ),
  'description' => __( 'This is a custom select option.' ),
  'section' => 'your_section_id',
  'type' => 'select',
  'choices' => array(
    'value1' => __( 'Value 1' ),
    'value2' => __( 'Value 2' ),
    'value3' => __( 'Value 3' ),
  ),
) );
function my_sanitize_select( $input, $setting ) {
  $input = sanitize_key( $input );
  $choices = $setting->manager->get_control( $setting->id )->choices;
  return ( array_key_exists( $input, $choices ) ? $input : $setting->default );
}

チェックボックス

チェックボックスを追加。

$wp_customize->add_setting( 'checkbox_setting_id', array(
  'capability' => 'edit_theme_options',
  'sanitize_callback' => 'my_sanitize_checkbox',
) );
$wp_customize->add_control( 'checkbox_setting_id', array(
  'label' => __( 'Custom Checkbox' ),
  'description' => __( 'This is a custom checkbox input.' ),
  'section' => 'your_section_id',
  'type' => 'checkbox',
) );
function my_sanitize_checkbox( $checked ) {
  // Boolean check.
  return ( ( isset( $checked ) && true == $checked ) ? true : false );
}

ラジオボタン

ラジオボタンを追加。

$wp_customize->add_setting( 'radio_setting_id', array(
  'capability' => 'edit_theme_options',
  'default' => 'blue',
  'sanitize_callback' => 'my_sanitize_radio',
) );
$wp_customize->add_control( 'radio_setting_id', array(
  'label' => __( 'Custom Radio Selection' ),
  'description' => __( 'This is a custom radio input.' ),
  'section' => 'your_section_id',
  'type' => 'radio',
  'choices' => array(
    'red' => __( 'Red' ),
    'blue' => __( 'Blue' ),
    'green' => __( 'Green' ),
  ),
) );
function my_sanitize_radio( $input, $setting ){
  $input = sanitize_key($input);
  $choices = $setting->manager->get_control( $setting->id )->choices;
  return ( array_key_exists( $input, $choices ) ? $input : $setting->default );
}

画像アップロード

画像アップロードボタンを追加。

$wp_customize->add_setting( 'media_setting_id', array(
  'sanitize_callback' => 'absint',
  'validate_callback' => 'my_sanitize_file',
) );
$wp_customize->add_control(
  new WP_Customize_Media_Control( $wp_customize, 'media_setting_id', array(
    'label' => __( 'Custom Core Media Setting' ),
    'description' => __( 'This is a Image Upload' ),
    'section' => 'your_section_id',
    'mime_type' => 'image',
)	)	);
function my_sanitize_file( $file, $setting ) {
  //allowed file types
  $mimes = array(
    'jpg|jpeg|jpe' => 'image/jpeg',
    'gif'          => 'image/gif',
    'png'          => 'image/png'
  );
    
  //check file type from file name
  $file_ext = wp_check_filetype( $file, $mimes );
    
  //if file has a valid mime type return it, otherwise return default
  return ( $file_ext['ext'] ? $file : $setting->default );
}

カラー設定

カラーの設定オプションを追加。

$wp_customize->add_setting( 'color_setting_id', array(
  'sanitize_callback' => 'sanitize_hex_color',
) );
$wp_customize->add_control(
  new WP_Customize_Color_Control( $wp_customize, 'color_setting_id',
  array(
    'label' => __( 'Core Color Setting' ),
    'description' => __( 'Select a color for something' ),
    'section' => 'your_section_id',
) ) );