Для добавления настройки выбора даты и времени в 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
Вам помогла эта статья? Оцените!