Добавление настройки выбора даты и времени в Theme Customizer

Для добавления настройки выбора даты и времени в Theme Customizer создадим класс, расширяющий WP_Customize_Control:

<?php
if (class_exists('WP_Customize_Control'))
{
    /**
     * Class to create a custom date picker
     */
    class Date_Picker_Custom_control extends WP_Customize_Control
    {
      
          public function enqueue()
          {
              // подключаем все необходимые скрипты: jQuery, datepicker
              wp_enqueue_script('jquery-ui-datepicker', array('jquery'), '',true);

              wp_register_script( 'datepicker', get_template_directory_uri() . '/date-time-custom-control/js/datepicker.js',array('jquery-ui-datepicker'), '1.0.0',true);
              wp_enqueue_script( 'datepicker' );

              wp_enqueue_script( 'timepicker', get_template_directory_uri() . '/date-time-custom-control/js/timepicker.js',array('datepicker'), '1.0.0',true);

              // подключаем нужные css стили
              wp_enqueue_style('jquery-ui', get_template_directory_uri() . '/date-time-custom-control/css/jquery-ui.min.css', false, null );
              wp_enqueue_style('timepicker-styles', get_template_directory_uri() . '/date-time-custom-control/css/datetimepicker.css', false, null );
              

              wp_localize_jquery_ui_datepicker();
          }

          /**
           * Render the content on the theme customizer page
           */
          public function render_content()
           {
                ?>
                    <label>
                      <span class="customize-date-picker-control"><?php echo esc_html( $this->label ); ?></span>
                      <input type="text" id="<?php echo $this->id; ?>" name="<?php echo $this->id; ?>" value="<?php echo $this->value(); ?>" <?php $this->link(); ?> class="input-date" />
                    </label>
                <?php
           }
    }
}
?>

Добавление настройки в секцию:

$wp_customize->add_setting( 'date' );
$wp_customize->selective_refresh->add_partial( 'date', array(
    'selector' => '.date'
) );

$wp_customize->add_control( new Date_Picker_Custom_control( $wp_customize, 'date', array(
    'section'     => 'section_1',
    'label'       => 'Выбор даты и времени'
) ) );

Скачать код настройки выбора даты и времени.

Подключить класс можно в functions.php:

include_once( dirname( __FILE__ ) . '/date-time-custom-control/date_picker_custom_control.php' );

Обновлено: 09.05.2018

Вам помогла эта статья? Оцените!
(1 оценок, среднее: 5,00 из 5)
Загрузка...

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *