コピペで使えるWordPress テーマカスタマイザーAPI サンプル

theme-customizer.php

<?php
add_action('customize_register', 'themename_customize_register');

function themename_customize_register ($wp_customize) {

  $wp_customize->add_panel(
    'themename_panel', // パネルID
    array(
      'title'    => 'パネルタイトル',
      'priority' => 1000,
    )
  );

  $wp_customize->add_section(
    'themename_section', // セクションID
    array(
      'title'       => 'セクションタイトル',
      'description' => 'セクションの説明',
      'panel'       => 'themename_panel', // 紐付けるパネルIDを指定。省略すると最上位に表示される。
      'priority'    => 1000
    )
  );

  /////////////////////////////////////////////////////////////////////////////////////

  // Text 1行テキスト

  /////////////////////////////////////////////////////////////////////////////////////

  $wp_customize->add_setting(
    'themename_text', // 設定ID
    array(
      'default' => '',
      'priority' => 1000,
      'sanitize_callback' => 'sanitize_text_field'
    )
  );

  $wp_customize->add_control(
    'themename_control_text',
    array(
      'section'     => 'themename_section',  // 紐づけるセクションIDを指定
      'settings'    => 'themename_text',  // 紐づける設定IDを指定
      'label'       => '1行テキスト',
      'description' => '説明',
      'type'        => 'text'
    )
  );

  /////////////////////////////////////////////////////////////////////////////////////

  // Textarea テキストエリア 複数行テキスト

  /////////////////////////////////////////////////////////////////////////////////////

  $wp_customize->add_setting(
    'themename_textarea', // 設定ID
    array(
      'default' => '',
      'priority' => 1000,
      'sanitize_callback' => 'sanitize_text_field'
    )
  );

  $wp_customize->add_control(
    'themename_control_textarea',
    array(
      'section'     => 'themename_section',  // 紐づけるセクションIDを指定
      'settings'    => 'themename_textarea',  // 紐づける設定IDを指定
      'label'       => '複数行テキスト',
      'description' => '説明',
      'type'        => 'textarea'
    )
  );

  /////////////////////////////////////////////////////////////////////////////////////

  // Checkbox チェックボックス

  /////////////////////////////////////////////////////////////////////////////////////

  $wp_customize->add_setting(
    'themename_checkbox', // 設定ID
    array(
      'priority' => 1000,
      'sanitize_callback' => 'sanitize_text_field'
    );
  );

  $wp_customize->add_control(
    'themename_control_checkbox',
    array(
      'section'     => 'themename_section',  // 紐づけるセクションIDを指定
      'settings'    => 'themename_checkbox',  // 紐づける設定IDを指定
      'label'       => 'チェックボックス',
      'description' => '説明',
      'type'        => 'checkbox'
    )
  );

  /////////////////////////////////////////////////////////////////////////////////////

  // Radio ラジオボタン

  /////////////////////////////////////////////////////////////////////////////////////

  $wp_customize->add_setting(
    'themename_radio', // 設定ID
    array(
      'default' => 'value1',
      'priority' => 1000,
      'sanitize_callback' => 'sanitize_text_field'
    )
  );

  $wp_customize->add_control(
    'themename_control_radio',
    array(
      'section'     => 'themename_section',  // 紐づけるセクションIDを指定
      'settings'    => 'themename_radio',  // 紐づける設定IDを指定
      'label'       => 'ラジオボタン',
      'description' => '説明',
      'type'        => 'radio',
      'choices'     => array(
        'value1' => '選択肢 1',
        'value2' => '選択肢 2',
        'value3' => '選択肢 3'
      )
    )
  );

  /////////////////////////////////////////////////////////////////////////////////////

  // Select セレクトボックス

  /////////////////////////////////////////////////////////////////////////////////////

  $wp_customize->add_setting(
    'themename_select', // 設定ID
    array(
      'default' => 'value1',
      'priority' => 1000,
      'sanitize_callback' => 'sanitize_text_field'
    )
  );

  $wp_customize->add_control(
    'themename_control_select',
    array(
      'section'     => 'themename_section',  // 紐づけるセクションIDを指定
      'settings'    => 'themename_select',  // 紐づける設定IDを指定
      'label'       => 'セレクトボックス',
      'description' => '説明',
      'type'        => 'select',
      'choices'     => array(
        'value1' => '選択肢 1',
        'value2' => '選択肢 2',
        'value3' => '選択肢 3'
      )
    )
  );

  /////////////////////////////////////////////////////////////////////////////////////

  // Page Dropdown 固定ページドロップダウン

  /////////////////////////////////////////////////////////////////////////////////////

  $wp_customize->add_setting(
    'themename_page',
    array(
      'priority' => 1000,
      'sanitize_callback' => 'absint'
    )
  );

  $wp_customize->add_control(
    'themename_control_page',
    array(
      'section'     => 'themename_section',  // 紐づけるセクションIDを指定
      'settings'    => 'themename_page',  // 紐づける設定IDを指定
      'label'       => '固定ページ',
      'description' => '',
      'type'        => 'dropdown-pages',
    )
  );

  /////////////////////////////////////////////////////////////////////////////////////

  // Image Upload 画像アップロード URLを取得

  /////////////////////////////////////////////////////////////////////////////////////

  $wp_customize->add_setting(
    'themename_image',
    array(
      'default'           => get_theme_mod('themename_image'), // これを入れないとアップロードした画像のプレビューが消えてしまう
      'priority'          => 1000,
      'sanitize_callback' => 'esc_url_raw'
    )
  );

  $wp_customize->add_control(
    new WP_Customize_Image_Control(
      $wp_customize,
      'themename_control_image',
      array(
        'section'     => 'themename_section',  // 紐づけるセクションIDを指定
        'settings'    => 'themename_image',  // 紐づける設定IDを指定
        'label'       => '画像アップロード',
        'description' => '説明'
      )
    )
  );
  
  /////////////////////////////////////////////////////////////////////////////////////

  // Image Upload 画像アップロード 画像IDを取得

  /////////////////////////////////////////////////////////////////////////////////////

  $wp_customize->add_setting(
    'themename_image_id',
    array(
      'default'           => '',
      'priority'          => 1000,
      'sanitize_callback' => 'esc_url_raw'
    )
  );

  $wp_customize->add_control(
    new WP_Customize_Image_Control(
      $wp_customize,
      'themename_control_image_id',
      array(
        'section'     => 'themename_section',  // 紐づけるセクションIDを指定
        'settings'    => 'themename_image_id',  // 紐づける設定IDを指定
        'label'       => '画像アップロード',
        'description' => '説明'
      )
    )
  );
  

  /////////////////////////////////////////////////////////////////////////////////////

  // File Upload ファイルアップロード

  /////////////////////////////////////////////////////////////////////////////////////

  $wp_customize->add_setting(
    'themename_file',
    array(
      'default' => '',
      'priority' => 1000,
      'sanitize_callback' => 'themename_sanitize_file'
    )
  );

  $wp_customize->add_control(
    new WP_Customize_Upload_Control(
      $wp_customize,
      'themename_control_file',
      array(
        'section'     => 'themename_section',  // 紐づけるセクションIDを指定
        'settings'    => 'themename_file',  // 紐づける設定IDを指定
        'label'       => 'ファイルアップロード',
        'description' => '',
      )
    )
  );

  /////////////////////////////////////////////////////////////////////////////////////

  // Color Picker カラーピッカー

  /////////////////////////////////////////////////////////////////////////////////////

  $wp_customize->add_setting(
    'themename_color',
    array(
      'default'           => '',
      'priority'          => 1000,
      'sanitize_callback' => 'sanitize_hex_color'
    )
  );

  $wp_customize->add_control(
    new WP_Customize_Color_Control(
      $wp_customize,
      'themename_control_color',
      array(
        'section'     => 'themename_section',  // 紐づけるセクションIDを指定
        'settings'    => 'themename_color',  // 紐づける設定IDを指定
        'label'       => 'カラーピッカー',
        'description' => ''
      )
    )
  );
}

/////////////////////////////////////////////////////////////////////////////////////

// Sanitize Callback サニタイズ

/////////////////////////////////////////////////////////////////////////////////////

// チェックボックス用
function themename_sanitize_checkbox($input) {
  return $input ? true : false;
}

// ファイル用
function themename_sanitize_file($input, $setting) {
  $mimes = array(
    'jpg|jpeg|jpe' => 'image/jpeg',
    'gif'          => 'image/gif',
    'png'          => 'image/png',
    'svg'          => 'image/svg+xml',
    'bmp'          => 'image/bmp',
    'tif|tiff'     => 'image/tiff',
    'ico'          => 'image/x-icon'
  );
  $file = wp_check_filetype($input, $mimes);
  return ($file['ext'] ? $input : $setting->default);
}