Customize WP Theme Control - Part 1

Admin 2020.03.07 15:14 조회 수 : 8

WP 테마 제작하면서 필요한 정보를 기록으로 남긴다.

 

WP 관리자 메뉴에서 'Appearance > Customize' 에 사용자 정의 옵션 항목을 추가하는 방법이다.

참고사이트 : https://maddisondesigns.com/2017/05/the-wordpress-customizer-a-developers-guide-part-1/

 

 

테마 폴더내에 function.php 가 없으면 새롭게 생성한다. 테마에서 각종 기능을 선언하는 파일이다.

아래 구문을 function.php 에 추가한다.

 

/**

 * Add our Customizer content

 */

function my_customize_register( $wp_customize ) {

  // Add all your Customizer content (i.e. Panels, Sections, Settings & Controls) here...

};

 

add_action( 'customize_register', 'my_customize_register' );

 

 

클래스를 통해 커스터마이즈할 경우, 아래 구문을 function.php 파일내에 추가한후,

테마폴더내에 classes 서브 경로 아래에 class-my-customize.php 파일을 생성한다.

 

// Handle Customizer settings.

require get_template_directory() . '/classes/class-my-customize.php';

 

class-my-customize.php

if ( ! class_exists( 'MyTheme_Customize' ) ) {

  /**

  * CUSTOMIZER SETTINGS

  */

  class MyTheme_Customize {

    // Add all your Customizer content (i.e. Panels, Sections, Settings & Controls) here...

 

  }

 

  // Setup the Theme Customizer settings and controls.

  add_action( 'customize_register', array( 'MyTheme_Customize', 'register' ) );

}

 

1. Add Panel

 

 

/**
 * Add General Setting Panel - ID : mytheme_panel
 */
 $wp_customize->add_panel( 'mytheme_panel',
   array(
      'title' => __( 'General Setting' ),
      'description' => esc_html__( 'Adjust your General Setting sections.' ), // Include html tags such as
 
      'priority' => 160, // Not typically needed. Default is 160
      'capability' => 'edit_theme_options', // Not typically needed. Default is edit_theme_options
      'theme_supports' => '', // Rarely needed
      'active_callback' => '', // Rarely needed
   )
);

 

2. Add Section

Panel 에는 1개 이상의 section 이 등록되어 있어야 한다.

 

/**
 * Add our Sample Section
 */
$wp_customize->add_section( 'sample_custom_controls_section',
   array(
      'title' => __( 'Sample Custom Controls' ),
      'description' => esc_html__( 'These are an example of Customizer Custom Controls.' ),
      'panel' => 'mytheme_panel', // Only needed if adding your Section to a Panel
      'priority' => 160, // Not typically needed. Default is 160
      'capability' => 'edit_theme_options', // Not typically needed. Default is edit_theme_options
      'theme_supports' => '', // Rarely needed
      'active_callback' => '', // Rarely needed
      'description_hidden' => 'false', // Rarely needed. Default is False
   )
);

 

3. Add Setting

Setion 에는 1개 이상의 setting 과 control 이 등록되어 있어야 한다.

$wp_customize->add_setting( 'sample_default_text',
   array(
      'default' => '', // Optional.
      'transport' => 'refresh', // Optional. 'refresh' or 'postMessage'. Default: 'refresh'
      'type' => 'theme_mod', // Optional. 'theme_mod' or 'option'. Default: 'theme_mod'
      'capability' => 'edit_theme_options', // Optional. Default: 'edit_theme_options'
      'theme_supports' => '', // Optional. Rarely needed
      'validate_callback' => '', // Optional. The name of the function that will be called to validate Customizer settings
      'sanitize_callback' => '', // Optional. The name of the function that will be called to sanitize the input data before saving it to the database
      'sanitize_js_callback' => '', // Optional. The name of the function that will be called to sanitize the data before outputting to javascript code. Basically to_json.
      'dirty' => false, // Optional. Rarely needed. Whether or not the setting is initially dirty when created. Default: False
   )

 

);

 

4. Add Input control

$wp_customize->add_setting( 'sample_default_text',
   array(
      'default' => '',
      'transport' => 'refresh',
      'sanitize_callback' => ''
   )
);
 
$wp_customize->add_control( 'sample_default_text',
   array(
      'label' => __( 'Default Text Control' ),
      'description' => esc_html__( 'Text controls Type can be either text, email, url, number, hidden, or date' ),
      'section' => 'default_controls_section',
      'priority' => 10, // Optional. Order priority to load the control. Default: 10
      'type' => 'text', // Can be either text, email, url, number, hidden, or date
      'capability' => 'edit_theme_options', // Optional. Default: 'edit_theme_options'
      'input_attrs' => array( // Optional.
         'class' => 'my-custom-class',
         'style' => 'border: 1px solid rebeccapurple',
         'placeholder' => __( 'Enter name...' ),
      ),
   )

 

);

 

5. Add Checkbox control

$wp_customize->add_setting( 'sample_default_checkbox',
   array(
      'default' => 0,
      'transport' => 'refresh',
      'sanitize_callback' => ''
   )
);
 
$wp_customize->add_control( 'sample_default_checkbox',
   array(
      'label' => __( 'Default Checkbox Control', 'ephemeris' ),
      'description' => esc_html__( 'Sample description' ),
      'section'  => 'default_controls_section',
      'priority' => 10, // Optional. Order priority to load the control. Default: 10
      'type'=> 'checkbox',
      'capability' => 'edit_theme_options', // Optional. Default: 'edit_theme_options'
   )

 

);

 

6. Add Select control

$wp_customize->add_setting( 'sample_default_select',
   array(
      'default' => '',
      'transport' => 'refresh',
      'sanitize_callback' => ''
   )
);
 
$wp_customize->add_control( 'sample_default_select',
   array(
      'label' => __( 'Standard Select Control' ),
      'description' => esc_html__( 'Sample description' ),
      'section' => 'default_controls_section',
      'priority' => 10, // Optional. Order priority to load the control. Default: 10
      'type' => 'select',
      'capability' => 'edit_theme_options', // Optional. Default: 'edit_theme_options'
      'choices' => array( // Optional.
         'wordpress' => __( 'WordPress' ),
         'hamsters' => __( 'Hamsters' ),
         'jet-fuel' => __( 'Jet Fuel' ),
         'nuclear-energy' => __( 'Nuclear Energy' )
      )
   )

); 

 

7. Add Radio button control

$wp_customize->add_setting( 'sample_default_radio',
   array(
      'default' => '',
      'transport' => 'refresh',
      'sanitize_callback' => ''
   )
);
 
$wp_customize->add_control( 'sample_default_radio',
   array(
      'label' => __( 'Standard Radio Control' ),
      'description' => esc_html__( 'Sample description' ),
      'section' => 'default_controls_section',
      'priority' => 10, // Optional. Order priority to load the control. Default: 10
      'type' => 'radio',
      'capability' => 'edit_theme_options', // Optional. Default: 'edit_theme_options'
      'choices' => array( // Optional.
         'captain-america' => __( 'Captain America' ),
         'iron-man' => __( 'Iron Man' ),
         'spider-man' => __( 'Spider-Man' ),
         'thor' => __( 'Thor' )
      )
   )
);
 

 

8. Add Dropdown page control

$wp_customize->add_setting( 'sample_default_dropdownpages',
   array(
      'default' => '',
      'transport' => 'refresh',
      'sanitize_callback' => ''
   )
);
 
$wp_customize->add_control( 'sample_default_dropdownpages',
   array(
      'label' => __( 'Default Dropdown Pages Control' ),
      'description' => esc_html__( 'Sample description' ),
      'section' => 'default_controls_section',
      'priority' => 10, // Optional. Order priority to load the control. Default: 10
      'type' => 'dropdown-pages',
      'capability' => 'edit_theme_options', // Optional. Default: 'edit_theme_options'
   )
);
 

 

9. Add Textarea control

$wp_customize->add_setting( 'sample_default_textarea',
   array(
      'default' => '',
      'transport' => 'refresh',
      'sanitize_callback' => ''
   )
);
 
$wp_customize->add_control( 'sample_default_textarea',
   array(
      'label' => __( 'Default Textarea Control' ),
      'description' => esc_html__( 'Sample description' ),
      'section' => 'default_controls_section',
      'priority' => 10, // Optional. Order priority to load the control. Default: 10
      'type' => 'textarea',
      'capability' => 'edit_theme_options', // Optional. Default: 'edit_theme_options'
      'input_attrs' => array( // Optional.
         'class' => 'my-custom-class',
         'style' => 'border: 1px solid #999',
         'placeholder' => __( 'Enter message...' ),
      ),
   )

); 

 

10. Add Color control

$wp_customize->add_setting( 'sample_default_color',
   array(
      'default' => '#333',
      'transport' => 'refresh',
      'sanitize_callback' => ''
   )
);
 
$wp_customize->add_control( 'sample_default_color',
   array(
      'label' => __( 'Default Color Control' ),
      'description' => esc_html__( 'Sample description' ),
      'section' => 'default_controls_section',
      'priority' => 10, // Optional. Order priority to load the control. Default: 10
      'type' => 'color',
      'capability' => 'edit_theme_options', // Optional. Default: 'edit_theme_options'
   )

); 

 

11. Add Media control

$wp_customize->add_setting( 'sample_default_media',
   array(
      'default' => '',
      'transport' => 'refresh',
      'sanitize_callback' => ''
   )
);
 
$wp_customize->add_control( new WP_Customize_Media_Control( $wp_customize, 'sample_default_media',
   array(
      'label' => __( 'Default Media Control' ),
      'description' => esc_html__( 'This is the description for the Media Control' ),
      'section' => 'default_controls_section',
      'mime_type' => 'image'// Required. Can be image, audio, video, application, text
      'button_labels' => array( // Optional
         'select' => __( 'Select File' ),
         'change' => __( 'Change File' ),
         'default' => __( 'Default' ),
         'remove' => __( 'Remove' ),
         'placeholder' => __( 'No file selected' ),
         'frame_title' => __( 'Select File' ),
         'frame_button' => __( 'Choose File' ),
      )
   )

) ); 

 

12. Add Image control

$wp_customize->add_setting( 'sample_default_image',
   array(
      'default' => '',
      'transport' => 'refresh',
      'sanitize_callback' => ''
   )
);
 
$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'sample_default_image',
   array(
      'label' => __( 'Default Image Control' ),
      'description' => esc_html__( 'This is the description for the Image Control' ),
      'section' => 'default_controls_section',
      'button_labels' => array( // Optional.
         'select' => __( 'Select Image' ),
         'change' => __( 'Change Image' ),
         'remove' => __( 'Remove' ),
         'default' => __( 'Default' ),
         'placeholder' => __( 'No image selected' ),
         'frame_title' => __( 'Select Image' ),
         'frame_button' => __( 'Choose Image' ),
      )
   )
) );

 

 

13. Add Cropped Image control

$wp_customize->add_setting( 'sample_default_cropped_image',
   array(
      'default' => '',
      'transport' => 'refresh',
      'sanitize_callback' => ''
   )
);
 
$wp_customize->add_control( new WP_Customize_Cropped_Image_Control( $wp_customize, 'sample_default_cropped_image',
   array(
      'label' => __( 'Default Cropped Image Control' ),
      'description' => esc_html__( 'This is the description for the Cropped Image Control' ),
      'section' => 'default_controls_section',
      'flex_width' => false, // Optional. Default: false
      'flex_height' => true, // Optional. Default: false
      'width' => 800, // Optional. Default: 150
      'height' => 400, // Optional. Default: 150
      'button_labels' => array( // Optional.
         'select' => __( 'Select Image' ),
         'change' => __( 'Change Image' ),
         'remove' => __( 'Remove' ),
         'default' => __( 'Default' ),
         'placeholder' => __( 'No image selected' ),
         'frame_title' => __( 'Select Image' ),