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

Интерфейс JavaScript API настройщика WordPress: начнем

by
Length:ShortLanguages:
This post is part of a series called The WordPress Customizer JavaScript APIs.
Customizer JavaScript APIs: Panel, Section, and Control

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

Настройщик WordPress активно разрабатывается с момента его создания. API-интерфейсы постоянно развиваются, включая и JavaScript API. Однако данный интерфейс один из наименее задокументированных API-интерфейсов в WordPress кодексе. И есть лишь несколько обширных документов, которые описывают, как на практике использовать JavaScript API.

Использование JavaScript API настройщика WordPress поможет нам улучшить опыт конечного пользователя в реальном времени, во время настройки, темы с помощью передачи измененных настроек напрямую в окно предварительного просмотра.

Вам возможно известно как использовать JavaScript API настройщика, чтобы передавать изменение настроек в окно предварительного просмотра в режиме реального времени. Чтобы сделать это, мы настроим режим transport настроек на postMessage и добавим соответствующий код JavaScript.

Однако мы можем использовать функциональность API-интерфейса и далее, например, скрыть, показать, или переместить раздел, панель управления, изменить значение одного параметра на основе значения другого параметра, а также соединить взаимодействие  предварительного просмотра и управления. И все это мы рассмотрим в данном уроке.

Для новичков

Мы довольно таки широко рассмотрели настройщик WordPress в несколько статьях и сериях, охватывающих основы API-интерфейсов настройщика.

Я предполагаю, что вы поняли основные концепции настройщика WordPress, а также такие компоненты, как группы, секции, настройки и управления. Иначе, я рекомендую вам потратить немного времени на изучение наших уроков и видео курсов, прежде чем вы продолжите изучение этого урока.

Параметры и элементы управления

Для начала мы рассмотрим в настройщике «Настройки» и «Элементы управления», которые мы добавили для данного урока. Мы также рассмотрим код, который добавляет их на свои места.

The Settings and Controls

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

Кроме того, как вы можете видеть ниже, у нас также есть два элемента управления, которые находятся в разделе Colors, данные элементы предназначены для изменения цвета «Заголовока сайта», а также изменения цвета при наведении курсора на заголовок (hover).

Header Text Color and Hover Color

Базовый код

Наша тема основана на фреймворк Underscores, который включает код, относящийся к настройщику Wordpress в файле /inc/customizer.php.

И как вы можете видеть выше, мы внесли несколько изменений в код, отвечая потребностям данного урока

  • Мы опустили ниже встроенные параметры WordPress, blogdescription  на 12, так что флажок параметра display_blogname находится под полем ввода «Название сайта».
  • Мы создали новый элемент управления с именем display_blogname. Мы установили priority на 11, в нашем случае, данный элемент располагается между «Заголовоком сайта» и полем ввода «Подзаголовка сайта».
  • Задали цвет по умолчанию для header_text #f44336 и transport  postMessage.
  • Мы также создали новый параметр header_text_color. Аналогичным образом, мы установили priority на 11, таким образом, чтобы этот элемент отображался под параметром header_textcolor.

Все эти параметры устанавливаются с postMessage, а не refresh. Опция PostMessage позволяет значению передаваться асинхронно и отображаться в окне предварительного просмотра в режиме реального времени. Однако, нам придется написать наш собственный код JavaScript для обработки данных изменений.

Загружаем JavaScript

Нам нужно создать два файла JavaScript: первый файл, customizer-preview.js, для работы с интерфейсом предварительного просмотра; и другой файл, customizer-control.js, для обработки элементов управления внутри панели настройщика.

Данный код находится в файле customizer-preview.js.

В данный момент это пустая закрытая функция JavaScript. Мы рассмотрим более конкретно в следующем уроке данной серии, как просматривать изменения в окне предварительного просмотра.

В другой файл customizer-control.js, мы добавим следующий код:

Как вы можете видеть выше, мы включим наш код в событие ready настройщика. Это обеспечит, то что все в пределах настройщика, включая параметры, панели и элементы управления, полностью готово, прежде чем мы начнем выполнение любых настраиваемых функций.

И в заключении, после того как мы добавили код, мы загрузим эти JavaScript файлы в двух разных местах.

customizer-preview.js файл будет загружен в пределах окна предварительного просмотра настройщика через action hook customize_preview_init. Файл customizer-control.js будет загружен в back-end настройщика, где элементы настройки и управления доступны через action hook customize_controls_enqueue_scripts.

Что дальше?

С момента его создания WordPress инвестирует большие средства в PHP. Таким образом не будет сюрпризом, что большинство разработчиков экосистемы являются более опытными в PHP API, чем JavaScript API.

И всего лишь с недавнего времени JavaScript обширно включен в настройщик и WP-API.  Охватить JavaScript API в настройщике WordPress может представлять собой достаточно сложную задачу. Как уже упоминалось, эта часть WordPress в настоящее время наименее задокументирована. Таким образом, мы будем тщательно рассматривать данный вопрос.

В то же время, если вы ищете другие утилиты для создания набора инструментов для WordPress или код для изучения WordPress, не забывайте, что на Envato Market можно найти много интересного.

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

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

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.