Настройщик темы WordPress: первые шаги

Я уже объяснил, как быстро и легко создать страницу параметров темы. Создание пользовательской страницы для параметров темы оптимально, если вы хотите предложить своим пользователям множество функций. Но есть и другой способ реализации страницы для параметров темы. WordPress уже давно предлагает настройщик тем. Это идеально, если ваша тема не предлагает слишком много вариантов. Большим преимуществом настройщика является предварительный просмотр в реальном времени. Каждое изменение, внесенное в тему, можно проверить перед переносом на веб-сайт. В этой статье показано, как «накормить» настройщик своими функциями.

Создание параметров темы с помощью Theme Customizer относительно просто и предлагает своим пользователям большое преимущество предварительного просмотра в реальном времени перед сохранением изменений. Настройщик тем появился в WordPress версии 3.4.

Важно знать: больше нет страниц параметров темы для тем WordPress.org

Если вы хотите создать тему для индекса тем WordPress.org, вы должны использовать настройщик тем. Страницы параметров темы больше не разрешены с 21 октября прошлого года.

Создание параметров темы для настройщика тем

В качестве примера мы используем тему Ari от Elmastudio. Он предоставляет только предопределенные параметры и, таким образом, может быть хорошо расширен в ходе этого руководства. Далее мы создадим совершенно новую страницу Theme Customizer для темы.

Важно: все следующие фрагменты кода можно щелкнуть, чтобы загрузить код непосредственно с GitHub.

Четыре метода объекта $wp_customize

Предопределенные настройки

WordPress поставляется с некоторыми настройками по умолчанию, которые не нужно определять.

• title_tagline — Название сайта и слоган
• цвета — Цвета
• заглавное изображение — Заглавное изображение
• изображение на заднем плане — Изображение на заднем плане
• навигация — Навигация
• static_front_page — Статическая главная страница

Транспортные версии — обновление против postMessage

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

Обновить означает, что после ввода ваших настроек в Theme Customizer страница предварительного просмотра обновляется напрямую. После этого будут видны новые настройки.

СообщениеСообщение однако означает изменения в реальном времени. Например, когда вы меняете название блога в настройщике тем, введенные буквы сразу видны. По способу транспортировки postMessageвам понадобится дополнительный небольшой файл jQuery.

Важно знать: стандартные функции WordPress

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

Создание параметров темы с помощью настройщика тем

Пожалуйста, создайте новый файл с именем настройщик.php в главном файле index. Вы можете создать файл в текстовом редакторе, таком как TextEdit, или в редакторе HTML.

Вставьте следующий код в настройщик.php:

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

Разрешение пользователю настраивать цвета

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

Во-первых, код описывает параметры, которые может изменить пользователь, например, цвет ссылок и текста. Кроме того, для каждого из двух параметров устанавливается стандарт, который уже определен в таблице стилей CSS темы. Таким образом, вам не нужно определять настройки для каждого из параметров цвета. Настройки, которые пользователь может изменить в настройщике тем, также определяются таким образом. Без этой конфигурации новый раздел параметров настройки не появится в настройщике.

Наконец, код также определяет аудиты, которые допускают эти настройки.

Здесь, новый WP_Customize_Color_Control активирует палитру цветов, которая позволяет вам определять пользовательские цвета.

Кстати, мне не нужно было настраивать раздел «цвета», так как это происходит автоматически, когда в этом разделе определены аудиты.

Теперь наш настройщик тем выглядит так:

Вы также можете настроить цвета с помощью палитры цветов, но в тему пока не будут внесены изменения. Чтобы разрешить применение изменений к теме, вам необходимо настроить тему заголовок.php. Таким образом, скопируйте следующий код прямо в верхнюю часть отделки. тег в header.php:

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

Две переменные берут изменения из настройщика и передают значения в небольшой встроенный CSS, который отвечает за отображение новых цветов.

Отображение параметров в теме

Здесь мы различаем функции, предоставляемые WordPress по умолчанию, и те, которые мы определили сами.

Реализация рекламного блока

В этом случае это будет не так просто, как при редактировании цветов. Необходимо больше кода. Для начала необходимо настроить новый раздел, чтобы можно было отобразить новый пункт меню. Для этого мы используем $customizer_object->добавить_раздел метод.

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

Определение настроек

Вот где $customizer_object->add_setting метод вступает в игру.

Создание ввода для настроек

Для создания элемента управления, отвечающего за отображение параметров настройки в кастомайзере, нам понадобится $customizer_object->add_control($controller_object) метод.

Существует множество различных объектов контроллера, в зависимости от того, что вам нужно. Здесь мы использовали WP_Customize_Control, что полезно для полей ввода. Вы можете использовать его для создания текстовой области, текстовой зоны, флажков, переключателей и цветов. Существуют также другие объекты контроллера, такие как WP_Customize_Color_Control, WP_Customize_Upload_Controlи WP_Customize_Image_Control для ввода цветов или загрузки файла или изображения.

Предварительный результат в настройщике

Отображение рекламного блока в теме

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

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

JavaScript для отображения изменений в реальном времени

Создайте файл JavaScript в индексе темы. Назови это тема-customizer.js. Введите в файл следующий код:

Результат в теме — рекламный блок

Недавно определенный рекламный блок теперь можно размещать повсюду в теме, заполняя текстом, баннерами или рекламными объявлениями.

Активация темной темы темы Ари

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

Я установил флажок для активации темной темы Ari. Поставив галочку, вы активируете темную тему.

Конечно, цвета текстов и ссылок нужно потом подкорректировать, как мы уже сделали выше.

Необходимые корректировки в теме — header.php

Небольшое изменение должно быть сделано в теме заголовок.phpчтобы можно было активировать темную тему.

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

Настройки WordPress по умолчанию в режиме реального времени

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

Кроме того, для отображения в реальном времени требуется немного jQuery.

Изменения в header.php

И снова тема заголовок.php приходится редактировать. Нам нужно добавить класс CSS для заголовка веб-сайта и описания, чтобы упростить доступ к элементам с помощью jQuery.

Результат в настройщике

Создание и ссылка на весь JavaScript

Нам нужен jQuery, который мы назовем тема-customizer.js, для рекламных блоков наших функций, названия блога и описания блога. Он выглядит так и относится к основному индексу темы:

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

Ссылка на JavaScript

Чтобы настройщик темы мог использовать jQuery, нам нужно сослаться на него. Это делается в настройщик.php файл внутри класса Ari_Customizerно вне функции регистр().

Последние штрихи

Запуск функций Customizer и JavaScript.

Скопируйте следующую строку кода в папку темы functions.php таким образом настройщик.php доступ.

При активации темы Ari в разделе » должно отображаться следующее изображение.Дизайн => Редактировать«:

Полные файлы и отредактированная тема для загрузки

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

Заключение

Theme Customizer, безусловно, интересная вещь, с которой приходится сталкиваться каждому разработчику, когда он хочет предлагать темы в официальном каталоге. Это неизбежно приведет к тому, что новые высококачественные темы крупных провайдеров больше не будут там перечислены. Это связано с тем, что крупные провайдеры, такие как WooThemes, Krisi и Co., по-прежнему отдают приоритет своей собственной странице параметров темы, поскольку это единственный способ реализовать огромное количество настроек, которые поставляются с сегодняшними премиальными темами.

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

Дальнейшее чтение

(дпе)