Customize WP Theme Control - Part 2

Admin 2020.03.07 15:15 조회 수 : 15

WP 테마 제작 2번째

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

소스자료 : https://github.com/maddisondesigns/customizer-custom-controls

 

Github 의 소스자료를 다운로드한후, 테마폴더에 업로드 한다.

function.php는 이전 자료와 병합한다.

 

1. Add Toggle switch

$wp_customize->add_setting( 'sample_toggle_switch',
   array(
      'default' => 0,
      'transport' => 'refresh',
      'sanitize_callback' => 'skyrocket_switch_sanitization'
   )
);
 
$wp_customize->add_control( new Skyrocket_Toggle_Switch_Custom_control( $wp_customize, 'sample_toggle_switch',
   array(
      'label' => esc_html__( 'Toggle switch' ),
      'section' => 'sample_custom_controls_section'
   )
) );

 

2. Add Slider

$wp_customize->add_setting( 'sample_slider_control',
   array(
      'default' => 48,
      'transport' => 'postMessage',
      'sanitize_callback' => 'skyrocket_sanitize_integer'
   )
);
 
$wp_customize->add_control( new Skyrocket_Slider_Custom_Control( $wp_customize, 'sample_slider_control',
   array(
      'label' => esc_html__( 'Slider Control (px)' ),
      'section' => 'sample_custom_controls_section',
      'input_attrs' => array(
         'min' => 10, // Required. Minimum value for the slider
         'max' => 90, // Required. Maximum value for the slider
         'step' => 1, // Required. The size of each interval or step the slider takes between the minimum and maximum values
      ),
   )
) );

 

3.  Sortable Repeater

$wp_customize->add_setting( 'sample_sortable_repeater_control',
   array(
      'default' => '',
      'transport' => 'refresh',
      'sanitize_callback' => 'skyrocket_url_sanitization'
   )
);
 
$wp_customize->add_control( new Skyrocket_Sortable_Repeater_Custom_Control( $wp_customize, 'sample_sortable_repeater_control',
   array(
      'label' => __( 'Sortable Repeater' ),
      'description' => esc_html__( 'This is the control description.' ),
      'section' => 'sample_custom_controls_section',
      'button_labels' => array(
         'add' => __( 'Add Row' ), // Optional. Button label for Add button. Default: Add
      )
   )
) );

 

4. Image Radio Button

$wp_customize->add_setting( 'sample_image_radio_button',
   array(
      'default' => 'sidebarright',
      'transport' => 'refresh',
      'sanitize_callback' => 'skyrocket_text_sanitization'
   )
);
 
$wp_customize->add_control( new Skyrocket_Image_Radio_Button_Custom_Control( $wp_customize, 'sample_image_radio_button',
   array(
      'label' => __( 'Image Radio Button Control' ),
      'description' => esc_html__( 'Sample custom control description' ),
      'section' => 'sample_custom_controls_section',
      'choices' => array(
         'sidebarleft' => array// Required. Setting for this particular radio button choice
            'image' => trailingslashit( get_template_directory_uri() ) . 'images/sidebar-left.png', // Required. URL for the image
            'name' => __( 'Left Sidebar' ) // Required. Title text to display
         ),
         'sidebarnone' => array(
            'image' => trailingslashit( get_template_directory_uri() ) . 'images/sidebar-none.png',
            'name' => __( 'No Sidebar' )
         ),
         'sidebarright' => array(
            'image' => trailingslashit( get_template_directory_uri() ) . 'images/sidebar-right.png',
            'name' => __( 'Right Sidebar' )
         )
      )
   )

) ); 

 

5. Text Radio Button

$wp_customize->add_setting( 'sample_text_radio_button',
   array(
      'default' => 'right',
      'transport' => 'refresh',
      'sanitize_callback' => 'skyrocket_radio_sanitization'
   )
);
 
$wp_customize->add_control( new Skyrocket_Text_Radio_Button_Custom_Control( $wp_customize, 'sample_text_radio_button',
   array(
      'label' => __( 'Text Radio Button Control' ),
      'description' => esc_html__( 'Sample custom control description' ),
      'section' => 'sample_custom_controls_section',
      'choices' => array(
         'left' => __( 'Left' ), // Required. Setting for this particular radio button choice and the text to display
         'centered' => __( 'Centered' ), // Required. Setting for this particular radio button choice and the text to display
         'right' => __( 'Right' ) // Required. Setting for this particular radio button choice and the text to display
      )
   )

) ); 

 

6. Image Checkbox

$wp_customize->add_setting( 'sample_image_checkbox',
   array(
      'default' => 'stylebold,styleallcaps',
      'transport' => 'refresh',
      'sanitize_callback' => 'skyrocket_text_sanitization'
   )
);
 
$wp_customize->add_control( new Skyrocket_Image_checkbox_Custom_Control( $wp_customize, 'sample_image_checkbox',
   array(
      'label' => __( 'Image Checkbox Control' ),
      'description' => esc_html__( 'Sample custom control description' ),
      'section' => 'sample_custom_controls_section',
      'choices' => array(
         'stylebold' => array( // Required. Setting for this particular radio button choice
            'image' => trailingslashit( get_template_directory_uri() ) . 'images/Bold.png', // Required. URL for the image
            'name' => __( 'Bold' ) // Required. Title text to display
         ),
         'styleitalic' => array(
            'image' => trailingslashit( get_template_directory_uri() ) . 'images/Italic.png',
            'name' => __( 'Italic' )
         ),
         'styleallcaps' => array(
            'image' => trailingslashit( get_template_directory_uri() ) . 'images/AllCaps.png',
            'name' => __( 'All Caps' )
         ),
         'styleunderline' => array(
            'image' => trailingslashit( get_template_directory_uri() ) . 'images/Underline.png',
            'name' => __( 'Underline' )
         )
      )
   )

) ); 

 

7. Single Accordion

// Example 1
$sampleIconsList = array(
   'Behance' => __( '<i class="fa fa-behance"></i>', 'ephemeris' ),
   'Bitbucket' => __( '<i class="fa fa-bitbucket"></i>', 'ephemeris' ),
   'CodePen' => __( '<i class="fa fa-codepen"></i>', 'ephemeris' ),
   'DeviantArt' => __( '<i class="fa fa-deviantart"></i>', 'ephemeris' ),
   'Dribbble' => __( '<i class="fa fa-dribbble"></i>', 'ephemeris' ),
   'Etsy' => __( '<i class="fa fa-etsy"></i>', 'ephemeris' ),
   'Facebook' => __( '<i class="fa fa-facebook"></i>', 'ephemeris' ),
   'Flickr' => __( '<i class="fa fa-flickr"></i>', 'ephemeris' ),
   'Foursquare' => __( '<i class="fa fa-foursquare"></i>', 'ephemeris' ),
   'GitHub' => __( '<i class="fa fa-github"></i>', 'ephemeris' ),
);
 
$wp_customize->add_setting( 'sample_single_accordion',
   array(
      'default' => '',
      'transport' => 'refresh',
      'sanitize_callback' => 'skyrocket_text_sanitization'
   )
);
 
$wp_customize->add_control( new Skyrocket_Single_Accordion_Custom_Control( $wp_customize, 'sample_single_accordion',
   array(
      'label' => __( 'Single Accordion Control' ),
      'description' => $sampleIconsList, // Required. Passing an array of key/values pairs which are displayed in a list
      'section' => 'sample_custom_controls_section'
   )
) );
 
// Example 2
$wp_customize->add_setting( 'another_sample_single_accordion',
   array(
      'default' => '',
      'transport' => 'refresh',
      'sanitize_callback' => 'skyrocket_text_sanitization'
   )
);
 
$wp_customize->add_control( new Skyrocket_Single_Accordion_Custom_Control( $wp_customize, 'another_sample_single_accordion',
   array(
      'label' => __( 'Another Single Accordion Control' ),
      'description' => __( 'This is some simple text with an <a href="http://google.com">html link</a> included.' ),  // Required. Passing some text with some basic html content
      'section' => 'sample_custom_controls_section'
   )

) ); 

 

8. Simple Notice

$wp_customize->add_setting( 'sample_simple_notice',
   array(
      'default' => '',
      'transport' => 'postMessage',
      'sanitize_callback' => 'skyrocket_text_sanitization'
   )
);
 
$wp_customize->add_control( new Skyrocket_Simple_Notice_Custom_control( $wp_customize, 'sample_simple_notice',
   array(
      'label' => __( 'Simple Notice Control' ),
      'description' => __( 'This Custom Control allows you to display a simple title and description to your users. You can even include <a href="http://google.com" target="_blank">basic html</a>.' ),
      'section' => 'sample_custom_controls_section'
   )

) ); 

 

9. Dropdown Select2

// Test of Dropdown Select2 Control (single select)
$wp_customize->add_setting( 'sample_dropdown_select2_control_single',
   array(
      'default' => 'vic',
      'transport' => 'refresh',
      'sanitize_callback' => 'skyrocket_text_sanitization'
   )
);
$wp_customize->add_control( new Skyrocket_Dropdown_Select2_Custom_Control( $wp_customize, 'sample_dropdown_select2_control_single',
   array(
      'label' => __( 'Dropdown Select2 Control', 'skyrocket' ),
      'description' => esc_html__( 'Sample Dropdown Select2 custom control (Single Select)', 'skyrocket' ),
      'section' => 'sample_custom_controls_section',
      'input_attrs' => array(
         'placeholder' => __( 'Please select a state...', 'skyrocket' ),
         'multiselect' => false,
      ),
      'choices' => array(
         'nsw' => __( 'New South Wales', 'skyrocket' ),
         'vic' => __( 'Victoria', 'skyrocket' ),
         'qld' => __( 'Queensland', 'skyrocket' ),
         'wa' => __( 'Western Australia', 'skyrocket' ),
         'sa' => __( 'South Australia', 'skyrocket' ),
         'tas' => __( 'Tasmania', 'skyrocket' ),
         'act' => __( 'Australian Capital Territory', 'skyrocket' ),
         'nt' => __( 'Northern Territory', 'skyrocket' ),
      )
   )
) );
 
// Test of Dropdown Select2 Control (Multi-Select) with Option Groups
$wp_customize->add_setting( 'sample_dropdown_select2_control_multi',
   array(
      'default' => array ( 'Antarctica/McMurdo', 'Australia/Melbourne', 'Australia/Broken_Hill' ),
      'transport' => 'refresh',
      'sanitize_callback' => 'skyrocket_array_sanitization'
   )
);
$wp_customize->add_control( new Skyrocket_Dropdown_Select2_Custom_Control( $wp_customize, 'sample_dropdown_select2_control_multi',
   array(
      'label' => __( 'Dropdown Select2 Control', 'skyrocket' ),
      'description' => esc_html__( 'Sample Dropdown Select2 custom control (Multi-Select)', 'skyrocket' ),
      'section' => 'sample_custom_controls_section',
      'input_attrs' => array(
         'multiselect' => true,
      ),
      'choices' => array(
         __( 'Antarctica', 'skyrocket' ) => array(
            'Antarctica/Casey' => __( 'Casey', 'skyrocket' ),
            'Antarctica/Davis' => __( 'Davis', 'skyrocket' ),
            'Antarctica/DumontDurville' => __( 'DumontDUrville', 'skyrocket' ),
            'Antarctica/Macquarie' => __( 'Macquarie', 'skyrocket' ),
            'Antarctica/Mawson' => __( 'Mawson', 'skyrocket' ),
            'Antarctica/McMurdo' => __( 'McMurdo', 'skyrocket' ),
            'Antarctica/Palmer' => __( 'Palmer', 'skyrocket' ),
            'Antarctica/Rothera' => __( 'Rothera', 'skyrocket' ),
            'Antarctica/Syowa' => __( 'Syowa', 'skyrocket' ),
            'Antarctica/Troll' => __( 'Troll', 'skyrocket' ),
            'Antarctica/Vostok' => __( 'Vostok', 'skyrocket' ),
         ),
         __( 'Atlantic', 'skyrocket' ) => array(
            'Atlantic/Azores' => __( 'Azores', 'skyrocket'