Если вы похожи на меня и использовали старый палитру цветов Farbtastic для плагина WordPress, я уверен, что вы стремились использовать новый и улучшенный палитру цветов с выпуском WordPress 3.5.
Обновление вашего плагина для использования нового палитры цветов довольно просто. Трудно знать, как легко переключиться на палитру цветов Farbtastic для более старых версий WordPress.
В следующем скриншоте и статье мы поговорим о том, как это сделать, и предоставим полный пример плагина на Github, чтобы помочь вам начать работу.
Скринкаст
Шаги для реализации палитры цветов WP
Прежде чем перейти к самым мелким PHP и JavaScript, давайте взглянем на шаги по реализации нового средства выбора цвета.
- Определите версию WordPress, установленную на сервере.
- Поставьте в очередь как стили, так и скрипт для новой палитры цветов, если WordPress версии 3.5 или выше.
- Если версия WordPress меньше 3.5, поставьте в очередь стили и сценарии для устаревшего средства выбора цвета Farbtastic.
- В своем пользовательском файле JavaScript проверьте, существует ли новая функция выбора цвета, и, если это так, инициализируйте выбор цвета в поле ввода текста.
- Если нового палитры цветов не существует, инициализируйте палитру цветов Farbtastic.
Довольно легко, верно? Теперь давайте посмотрим на PHP, который мы используем в нашем плагине.
Используйте PHP для постановки правильных стилей и скриптов
Если вы только начинаете создавать плагины для WordPress, вам необходимо четкое понимание того, как создавать страницы настроек и как правильно называть ваши стили и скрипты на этих страницах.
Изучение того, как создать страницу настроек для вашего плагина, не входит в сферу этой статьи, но если вам нужна дополнительная информация о том, как обрабатывать настройки для вашего плагина, посмотрите Создание страниц пользовательских настроек в WordPress от Jeffrey Way.
Для наших целей вам нужно знать, что конечное поле ввода и необходимый div на нашей странице администратора выглядят так:
<input id="color" name="color_options[color]" type="text" value="" /> <div id="colorpicker"></div> просмотреть raw gistfile1.html
Как только вы правильно подключите свою функцию или метод через add_action() , вы будете использовать PHP для вызова ваших стилей и скриптов:
< ?php function add_styles_scripts(){ //Access the global $wp_version variable to see which version of WordPress is installed. global $wp_version; //If the WordPress version is greater than or equal to 3.5, then load the new WordPress color picker. if ( 3.5 <= $wp_version ){ //Both the necessary css and javascript have been registered already by WordPress, so all we have to do is load them with their handle. wp_enqueue_style( 'wp-color-picker' ); wp_enqueue_script( 'wp-color-picker' ); } //If the WordPress version is less than 3.5 load the older farbtasic color picker. else { //As with wp-color-picker the necessary css and javascript have been registered already by WordPress, so all we have to do is load them with their handle. wp_enqueue_style( 'farbtastic' ); wp_enqueue_script( 'farbtastic' ); } //Load our custom javascript file wp_enqueue_script( 'wp-color-picker-settings', plugin_dir_url( __FILE__ ) . 'js/settings.js' ); } ?>
В верхней части метода мы используем глобальную переменную $wp_version которая предоставляет нам номер версии для этой установки WordPress. Мы просто проверяем, используем ли мы 3.5 или выше, и если да, загружаем новый палитру цветов, используя предварительно зарегистрированные стили и скрипт. В противном случае мы загружаем старые стили и скрипт Farbtastic.
На данный момент мы загрузили правильные файлы, но нам нужно вызвать скрипт в нашем поле ввода текста. Мы делаем это через наш собственный файл JavaScript.
Используйте JavaScript для инициализации палитры цветов
Внизу add_styles_scripts() выше метода add_styles_scripts() что мы загружаем один файл JavaScript.
В краткосрочной перспективе более простым способом было бы иметь два файла Javascript, один для нового средства выбора цвета и один для Farbtastic. С этим плагином это было бы хорошо, но управлять им стало бы неэффективно, если бы нам приходилось обновлять два файла каждый раз, когда нам нужно было внести изменения в наш JavaScript.
Итак, как нам настроить только один файл JavaScript для инициализации правильного палитры цветов?
//Set up the color pickers to work with our text input field jQuery( document ).ready(function(){ "use strict"; //This if statement checks if the color picker widget exists within jQuery UI //If it does exist then we initialize the WordPress color picker on our text input field if( typeof jQuery.wp === 'object' && typeof jQuery.wp.wpColorPicker === 'function' ){ jQuery( '#color' ).wpColorPicker(); } else { //We use farbtastic if the WordPress color picker widget doesn't exist jQuery( '#colorpicker' ).farbtastic( '#color' ); } });
Оператор if проверяет, существует ли новый палитр цветов как виджет в пользовательском интерфейсе jQuery, сначала определив, является ли jQuery.wp объектом, и, если это так, убедившись, что wpColorPicker является функцией этого объекта. Если оба эти условия выполняются, мы вызываем новую палитру цветов. Если нет, мы загружаем Farbtastic.
Вот и все. Мы использовали новый инструмент выбора цвета WP, в то же время предоставляя более старые версии WordPress с удобным резервом.
Если вы ищете полный пример плагина, вы можете найти его на Github.