Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
コピペで使えるWordPress テーマカスタマイザーAPI サンプル
<?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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment