Как применить jQuery UI Datepicker в WordPress

WordPress сильно изменился с версии 3.8, особенно тема пользовательского интерфейса администратора. Вслед за массами пользовательский интерфейс администратора WordPress теперь выглядит более плоским, без градиентов и теней. Это означает, что если у вас есть встроенная тема или плагин, в котором используется настраиваемый пользовательский интерфейс, пришло время для преобразования.

Например, здесь я добавил Data Picker на экране редактирования поста. И, как вы можете видеть ниже, пользовательский интерфейс календаря кажется немного неуместным.

Если у вас возникла та же проблема, следуйте этой статье, так как мы собираемся показать вам, как ее настроить, чтобы ваш пользовательский интерфейс выглядел более унифицированным с последней темой администратора WordPress.

Рекомендуемое чтение: настройка и тематика JQuery UI Datepicker

Добавление jQuery
Прежде чем продолжить, сначала позвольте мне показать вам, как я добавил Date Picker в область сообщений WordPress, как вы видели выше.

Для начала мы загружаем скрипт и стили jQuery UI на экране администратора WordPress. Добавьте эти коды ниже в файл functions.php вашей темы.

function hkdc_admin_styles () {
wp_enqueue_style (‘jquery-ui-datepicker-style’, ‘//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css’);
}
add_action (‘admin_print_styles’, ‘hkdc_admin_styles’);
function hkdc_admin_scripts () {
wp_enqueue_script (‘jquery-ui-datepicker’);
}
add_action (‘admin_enqueue_scripts’, ‘hkdc_admin_scripts’);

Затем мы добавим Meta Box, который покажет календарь.

function hkdc_post_date_field () {
эхоРазработчики X-Team, Он поставляется с восьмой цветовой схемой администратора WordPress, а именно: Свежий, Светлый, Синий, Кофейный, Эктоплазма, Полночь, Океан и Восход (см. Наш предыдущий пост, Настройка цветовой схемы администратора WordPress). Он также поставляется в формате LESS и Sass, что делает его легко настраиваемым.
Вы можете скачать источник с его Github хранилище, Скопируйте таблицу стилей CSS и поместите ее в каталог css вашей темы. Затем добавьте эту строку ниже в hkdc_admin_styles, чтобы загрузить таблицу стилей на экране администратора WordPress.

wp_enqueue_style (‘wp-jquery-ui-datepicker’, get_template_directory_uri (). ‘/css/datepicker.css’);

Это оно. Теперь, как вы можете видеть ниже, тема соответствует теме администрирования WordPress «Default». Это изменится в соответствии с выбранной пользователем темой.
Последняя мысль
По моему опыту, создание настраиваемой темы для выбора даты jQuery может быть очень сложным. К счастью, разработчики X-Team сделали всю тяжелую работу за вас. Эта таблица стилей должна быть включена, если вы создаете тему или плагин, который включает JQuery UI Date Picker,