Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress

Customizer JavaScript API: панель, раздел и управление

by
Length:ShortLanguages:
This post is part of a series called The WordPress Customizer JavaScript APIs.
The WordPress Customizer JavaScript APIs: Getting Started
Customizer JavaScript APIs: The Previewer

Russian (Pусский) translation by blacktreelab (you can also view the original English article)

Сегодня мы возобновим обсуждение JavaScript API в WordPress настройщике. В предыдущем уроке мы создали и загрузили два файла JavaScript, customizer-control.js и customizer-preview.js, данные файлы позволяют нам взаимодействовать с JavaScript API через фронт-енд и бэк-енд настройщика, или же через интерфейс окна предварительного просмотра. Так что не забудьте изучить предыдущий урок.

В этом уроке мы сосредоточимся на интерфейсе, состоящим из бэк-енда настройщика, панели, настроек и элементов управления. Если же эти три элемента для вас в новинку, я настоятельно рекомендую изучить предыдущую серию уроков: руководство по настройщику тем Wordpress.

Основные взаимодействия с JavaScript API настройщика

Помимо PHP API-интерфейса, с которой я уверен, некоторые из вас уже знакомы, панели, разделы и элементы управления доступны также через JavaScript API. Аналогичным образом, мы можем изменять эти элементы. Вот несколько примеров.

Выбираем конкретный элемент управления, раздел или панель:

Переделываем поряд их просмотра.

Перемещаем элемент управления «Заголовок сайта» в, например, в раздел color.

Переключаем отображение.

Можно даже разбирать элемент управления DOM, что в PHP было бы сильно запутанным делом.

Вот несколько вещей, которые можно сделать с панелями, разделами и элементами управления в JavaScript API-интерфейсе настройщика. Давайте их теперь сложим вместе в более значимый опыт пользователя.

Переключение секций и элементов управления

На данный момент у нас должно быть в целом четыре элемента управления. Два элемента управления, поле ввода «название сайта» и флажок «Отобразить название сайта», находятся в разделе «Идентификация сайта». Два других - палитра цветов. Они находятся в разделе «Цвета» и задают цвет текста «заголовока сайта» и изменение его цвета при наведении курсора соответственно.

Input Checkbox and Color picker in the Customizer pane
Наши четыре элемента управления в настройщике

Наш план отображать элементы управления цветом только тогда, когда флажок «Отображать название сайта» установлен, поскольку нет необходимость отображать элементы управления цветом заголовка сайта, если флажок отключен.

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

Отключаем поле управления вводом

Открываем файл customizer-control.js. Затем добавляем следующий код внутри события ready:

Здесь мы определил второе название для слова this, которое относится к Customizer JavaScript API. Затем мы подключили анонимную функции в параметр display_blogname, так как все изменения в настройщике, которые мы будем добавлять будут относительны значения этого конкретного параметра.

Далее мы выбираем поле ввода параметра «Название сайта».

Мы можем отключить ввод, если флажок display_blogname не установлен.

Как вы можете видеть выше, мы используем метод jQuery .prop() для задания свойства HTML disable для элемента поле ввода. Мы используем метод .get() для извлечения текущего значения. И наконец, с помощью метода .bind(), мы следим за изменениями значения и устанавливаем свойство disabled соответственно.

Disabled and Enabled input field in customizer
Слева: Поле ввода «Название сайта» влючено. Справа: Поле ввода «Название сайта» отключено. Обратите внимание на флажок.

Переключение отображения

Теперь приступим к коду для переключения отображения палитры цветов, которая задает цвет «Названия сайта». Как мы планировали, мы уберем палитру цветов, когда флажок не установлен и отобразим ее снова, когда флажок установлен.

Для начала, мы сгруппируем идентификаторы параметра палитры цветов в один массив.

Затем функция пройдет по этим идентификаторам, и определить переключение отображения, используя метод jQuery .toggle().

Структура приведенного выше кода похожа на предыдущий код, который отключает поле ввода. Каждый элемент управления в массиве мы выбираем с помощью метода .control(), как и было показано ранее в данном уроке. Далее, есть функция, которая переключает каждый элемент управления с помощью метода jQuery .toggle(), и запускает его после инициирования страницы настройщика, а также, когда изменяется значение.

Site Title input field is disabled and two color pickers are hidden
Флажок «Отобразить название сайта» отключен, поле ввода "Название сайта" недоступно, и соответствующая палитра цветов скрыта.

Что дальше

В данном уроке показан простой пример того, как использовать JavaScript API настройщика для улучшения пользовательского опыта в среде настройки. Пользовательский опыт можно улучшить еще более, как например, полностью удалив раздел "Цвета", если в этом разделе отсутствуют элементы или же изменяя оттенок цвета параметра "Цвет заголовка при наведенном курсоре" при изменении значения параметра "Цвет заголовка".

В следующем уроке данной серии мы рассмотрим более сложные примеры. Мы создадим «мост», который позволит окну предварительного просмотра настройщика взаимодействовать с панелью управления через бэк-енд. Таким образом, что, когда пользователь, к примеру, нажимает на название сайта в окне предварительного просмотра, настройщик отобразит соответствующее поле ввода данных.

Оставайтесь с нами!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.