Theme Customizer — настройка в WordPress

Для начала чтобы понять что такое Theme Customizer посмотрите видео из youtube, думаю, многое станет понятно. После просмотра видео, вам скорее всего будет не нужен плагин OptionTree о котором я говорил раньше.

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

Существующие параметры

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

  • Есть моды, которые поддерживаются для работы с темой, управлять этими модами можно при помощи функций set_theme_mod и get_theme_mod. Эти функции поддерживаются Settings API WordPress и отлично работают.
  • Индивидуальные настройки для каждой темы. Не самый лучший способ создания тем, но тоже имеет место быть и также поддерживается в Theme Customizer.
  • Serialized Settings — По сути, вы сохраняете настройки в массиве, а затем сохранить этот массив использованием set_option или get_option, как одна строка в базе данных. Это метод самый оптимальный и его который мы будем рассматривать в этой статье.

Два других метода мы вкратце упомянули и если они нам понадобятся, то мы их рассмотрим.
Во первых в Theme Customizer левая часть делится на разделы и на это стоит обратить внимание! Все работает через специальный экшен (хук) customize_register.

Функция получает в качестве параметра $wp_customize это основной объект. С ним мы будем работать при добавлении разделов, элементов управления и тому подобного.

Разделы в Theme Customizer

Итак, первое, что нужно сделать, это добавить раздел. Вот один из способов сделать это:

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

Второй параметр это массив. В этом массиве есть два индекса. Индекс title для указания заголовка раздела и его описания. Индекс priority это приоритет разделов, который определяет их порядок.

Настройки для раздела

Далее, давайте настроим некоторые параметры. Предложим параметры для нашего раздела и рассмотрим 3 варианта.

Объявляем настройки вот так:

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

№2 вариант настроек. При сохранении будет создана переменная. Имя переменной будет включать в себя название темы и имя опции, которую будем хранить.

№1 вариант настроек. При сохранении будет создана переменная, которая в своем названии будет хранить только имя опции.

Мы будем пользоваться вариантом №3

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

Рассмотрим вывод элемента управления типа checkbox в Theme Customizer

Рассмотрим пример вывода элемента управления типа select в Theme Customizer

Рассмотрим пример вывода элемента управления типа text input в Theme Customizer

Рассмотрим пример вывода элемента управления типа image upload в Theme Customizer

Рассмотрим пример вывода элемента управления типа File Upload в Theme Customizer

Рассмотрим пример вывода элемента управления типа Color Picker в Theme Customizer

Рассмотрим пример вывода элемента управления типа Page Dropdown в Theme Customizer

С типами мы с вами закончили, в общем как оказалось не все так сложно и даже объектно ориентировано, что честно говоря меня очень порадовало в WordPress, понемногу исправляются ). Думаю, для начала разработки собственных тем с этим инструментом будет вполне достаточно.

Просмотр и вывод на экран опций, которые сохраняли в Theme Customizer

Предварительный просмотр в реальном времени

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

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

Этот экшен выведет функцию в футере сайта после выполнения кода, которая покажет изменения при помощи JQUERY, изменяя содержимое элемента $( ‘#logo a’ ).html( newval ). Внимание у меня логотип обозначен ‘#logo a’ у вас может быть по другому.

Код $wp_customize->get_setting( ‘…’)->transport = ‘postMessage’ насколько я понял нужен для передачи названия опции таким образом чтобы дальше можно было его использовать для вывода предварительного просмотра, пробовал без этого кода но ничего не вышло ), на английском тоже ответа не нашел особо. Если у кого-то есть ответ, пишите в комментариях. Хотя код и так работает.

Вот код JQUERY плагина:

Заменяем код на вот такой:

Подробнее о get_option читайте в статье «Рассмотрим механизмы работы с опциями«.

Да уж, думал статья будет покороче, но вышло почти полное руководство по работе с Theme Customizer. Видимо увлекся темой ).

Так как тема не простая я решил выложить для вас некоторые исходники.
zip wordpress настройка Theme Customizer


Купить хостинг WordPress
Репетитор по wordpress
Услуги репетитора онлайн. Список курсов которые я веду
  • Базовый курс по веб-дизайну;
  • Верстка сайтов;
  • Общий курс по CMS WordPress и продолжение курса по разработке шаблонов;
  • Разработка сайтов на PHP.
Подробнее читайте на странице репетитор по WordPress
*/

При копировании урока, просьба оставлять обратную ссылку на статью автора, то есть меня!


Theme Customizer – налаштування у WordPress

Для початку щоб зрозуміти що таке Theme Customizer подивіться відео з youtube, думаю, багато чого стане зрозуміло. Після перегляду відео, вам швидше за все буде не потрібний плагін OptionTree, про який я говорив раніше.

Думаю, після перегляду у вас з’явиться багато ідей як можна використовувати цю корисну панель, а ось як вона працює, розглянемо трохи нижче.

Існуючі параметри

Перше що думаю важливо розглянути це існуючі методи налаштування теми, як пишуть багато авторів їх 3 варіанти, будемо їм вірити і спробуємо навчитися користуватися цими методами.

  • Є моди, які підтримуються до роботи з темою, керувати цими модами можна з допомогою функцій set_theme_mod і get_theme_mod. Ці функції підтримуються Settings API WordPress і добре працюють.
  • Індивідуальні параметри для кожної теми. Не найкращий спосіб створення тем, але теж має місце бути і підтримується в Theme Customizer.
  • Serialized Settings — По суті, ви зберігаєте налаштування в масиві, а потім зберегти цей масив за допомогою set_option або get_option, як один рядок в базі даних. Це найоптимальніший метод і його який ми будемо розглядати в цій статті.

Два інші методи ми коротко згадали і якщо вони нам знадобляться, ми їх розглянемо.
По-перше, у Theme Customizer ліва частина ділиться на розділи і на це варто звернути увагу! Все працює через спеціальний екшен (хук) customize_register.

Функція отримує як параметр $wp_customize це основний об’єкт. З ним ми будемо працювати при додаванні розділів, елементів керування тощо.

Розділи у Theme Customizer

Отже, перше, що потрібно зробити, це додати розділ. Ось один із способів зробити це:

Поки немає елементів керування в розділі і вони не налаштовані, новий розділ не відображатиметься, про елементи керування поговоримо трохи пізніше, а зараз давайте розглянемо код який ми описали вище.

themename_color_scheme — перший параметр є унікальним ідентифікатором для відображення, цей ідентифікатор нам знадобиться пізніше, коли ми будемо поміщати елементи керування в розділ.

Другий параметр – це масив. У цьому масиві є два індекси. Індекс title для вказівки заголовка розділу та його опису. Індекс priority – це пріоритет розділів, який визначає їх порядок.

Налаштування розділу

Далі, налаштуємо деякі параметри. Запропонуємо параметри для нашого розділу та розглянемо 3 варіанти.

Оголошуємо налаштування ось так:

№3 варіант налаштувань. При збереженні буде створено масив з ім’ям, що включає ім’я теми та індекс, який буде ім’ям нашої опції.

№2 варіант налаштувань. При збереженні буде створено змінну. Ім’я змінної буде включати назву теми та ім’я опції, яку будемо зберігати.

№1 варіант налаштувань. При збереженні буде створено змінну, яка у своїй назві зберігатиме лише ім’я опції.

Ми будемо користуватися варіантом №3

Крім того, що ми задали налаштування для теми WordPress і за допомогою add_setting записали їх у базу, необхідно ще задати елементи керування. Спробуємо додати один з них, після додавання у Theme Customizer з’явиться розділ з елементами управління типу радіо кнопок.

Розглянемо виведення елемента керування типу checkbox у Theme Customizer

Розглянемо приклад виведення елемента керування типу select у Theme Customizer

Розглянемо приклад виведення елемента керування типу text input у Theme Customizer

Розглянемо приклад виведення елемента керування типу image upload у Theme Customizer

Розглянемо приклад виведення елемента керування типу File Upload у Theme Customizer

Розглянемо приклад виведення елемента керування типу Color Picker у Theme Customizer

Розглянемо приклад виведення елемента керування типу Page Dropdown у Theme Customizer

З типами ми з вами закінчили, загалом не все так складно і навіть об’єктно орієнтовано, що чесно мене дуже порадувало в WordPress, потроху виправляються). Думаю, для початку розробки власних тем із цим інструментом буде цілком достатньо.

Перегляд та виведення на екран опцій, які зберігали у Theme Customizer

Попередній перегляд у реальному часі

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

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

Наприкінці нашої функції themename_customize_register, перед її закриттям, вставте код:

Цей екшен виведе функцію у футері сайту після виконання коду, яка покаже зміни за допомогою JQUERY, змінюючи вміст елемента $(‘#logo a’).html(newval). Увага логотип позначений ‘#logo a’ у вас може бути інакше.

Код $wp_customize->get_setting( ‘…’)->transport = ‘postMessage’ наскільки я зрозумів потрібен для передачі назви опції таким чином, щоб далі можна було його використовувати для виведення попереднього перегляду, пробував без цього коду але нічого не вийшло), англійською теж відповіді не знайшов особливо. Якщо у когось є відповідь, пишіть у коментарях. Хоча код і так працює.

Ось код JQUERY плагіна:

Замінюємо код на такий:

Докладніше про get_option читайте докладніше «Розглянемо механізми роботи з опціями«.

Так, думав стаття буде коротшим, але вийшло майже повне керівництво по роботі з Theme Customizer. Мабуть, захопився темою ).

Оскільки тема не проста я вирішив викласти зібраний код.
zip wordpress настройка Theme Customizer


Купить хостинг WordPress
Репетитор по wordpress
Услуги репетитора онлайн. Список курсов которые я веду
  • Базовый курс по веб-дизайну;
  • Верстка сайтов;
  • Общий курс по CMS WordPress и продолжение курса по разработке шаблонов;
  • Разработка сайтов на PHP.
Подробнее читайте на странице репетитор по WordPress
*/

При копіюванні уроку прохання залишати зворотне посилання на статтю автора, тобто мене!

Николаенко Максим

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


Вам может также понравиться...

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Шаблоны для WordPress
Самый лучший хостинг в Украине
Стабильный хостинг для Drupal