Цей навчальний посібник розповість в деталях як для вашої теми в WordPress підключити Theme Customizer (далі настроювач тем).
Настроювач тим був анонсований в WordPress в версії 3.4. Він дозволяє адміністратору в середовищі редагування випробувати опції теми до того, як вони будуть застосовані до робочого сайту. У цьому керівництві ми розберемо, яким чином додати цю функцію до теми.
Зверніть увагу: Існує кілька шляхів підключити настроювач тим і зберегти настройки модифікації. Це керівництво буде розглядати метод theme_mod. Якщо ви не знаєте, що це означає, не біда. Вам не потрібно розуміти призначення різних методів, якщо ви дотримуєтеся цього посібника.
1. Додаємо сторінку налагоджувальника теми в меню адмін-панелі.
Спочатку відкриємо файл теми functions.php і додамо наступний код. Не має критичного значення, куди конкретно в самому файлі ми помістимо код, поки він не всередині іншої функції.
Це гарантує, що користувач має потрібний рівнем привілеїв для доступу до настройщик.
(Для більш детальної інформації по користувачам WordPress [пропозицію обривається - прим. Перекл.]
Зверніть увагу: Якщо ви створюєте тему для публічного користування, для параметрів $ page_title і $ menu_title повинна бути можливість їх переведення на інші мови. Більш детальну інформацію по локалізації ви зможете знайти на сторінці правил локалізації I18n for WordPress.
Тепер, якщо ми повернемося назад в адмін-панель WordPress, в меню «Appearance» буде доступна нова сторінка, що її названо «Customize». Натиснувши «Appearance> Customize», ми відкриємо нову сторінку налагоджувальника тим, яку тільки що створили. На панелі з лівого стороя екрану ми виявимо, що там вже є чотири секції настройки. «Тема сайту і стоку тегів», як і «Статична домашня сторінка» додані в настроювач автоматично. Розділи «Кольори» і «Шпалери» додані тому, що ця тема підтримує опцію настроюється фонового зображення, вбудовану в ядро WordPress. У наступному розділі ми будемо додавати вже свої власні секції.
2. Додаємо нову секцію в настроювач
Для створення нашої власної секції налаштувань помістимо наступний код в файл functions.php відразу за тим кодом, який ми тільки що додали раніше (і знову, розташування не грає великої ролі, просто зручніше поміщати код у впорядкованій послідовності).
Необов'язковий параметр. Залежно від того, чи підтримує тема конкретну особливість, секція відображається або приховується
У нашому прикладі вище ми не використали необов'язкові аргументи «capability» або «theme_supports«. Однак були використані необов'язкові аргументи «description» і «priority». так що ви можете відчути, як вони функціонують. Продовжуйте далі і змінюйте їх значення для розуміння їх роботи. У наступному розділі ми створимо опцію для нової секції.
3. Додаємо нову опцію
3.1. реєструємо опцію
Опції реєструються за допомогою методу add_setting (). Ми його поставимо відразу після виклику add_setting () і точно перед закриттям фігурних дужок функції example_customizer ().
Необов'язковий параметр. Ім'я функції, яка буде викликана для перевірки і коригування даних, що надходять з БД в настроювач тем. За замовчуванням: порожній рядок.
Ви, мабуть, звернули увагу на те, що в коді вище ми задіємо тільки аргумент «default». Більшість інших аргументів мають прийнятні значення за замовчуванням, так що ми не будемо турбуватися і додавати їх в наш виклик методу add_setting (). Деякі аргументи заслуговують більш пильної на них уваги, поки ми не пішли далі.
По-перше, аргумент «sanitize_callback» використовується для перевірки введених даних перед тим, як зберегти їх в БД. Заради спрощення я поки не задіяв цей аргумент, але повернуся до нього в подальшому в цьому керівництві. Я вважаю, що перевірці та коригування даних часто не приділяється належної уваги і я хочу це виправити.
По-друге, «sanitize_js_callback» може бути не тим, що ви, можливо, очікуєте. Зазвичай ведеться мова про перевірку і коригування даних, коли щось не те з введеними користувачем даними, перед збереженням в БД. Однак функція «sanitize_js_callback» викликається для перевірки і коригування даних, вже збережених у БД в момент їх передачі в настроювач тем. Єдиний випадок, в якому, по-моєму, виправданий виклик цієї опції - щоб додати «#» в початок шестнадцатиричного числа в разі, коли воно збережено в БД без цього знака.
Ну ось, це ми пройшли, тепер давайте дамо нашій опції елемент управління.
3.2 Створюємо елемент керування
Елементи управління це просто інтерфейс, використовуваний для зміни значень опцій. Кожна опція повинна мати елемент управління для того, щоб бути відображається в Настроювачі тем. Елемент управління додається через використання методу add_control (). Як і наші попередні методи, він приймає два параметри. Перший - це ідентифікатор (ID) елемента управління. Значення має бути рівним значенню ID опції, якій елемент управління належить. Так як наша опція вище мала ID «textbox», елемент управління також повинен мати «textbox». Як і раніше, другий параметр - це масив з аргументами. Ми розташуємо наш виклик методу add_control () відразу після виклику функції add_setting () і точно перед закриттям фігурної дужки функції example_customizer ().
Якщо значення «powered by» не було збережено, в підвалі відобразиться «Цей сайт працює завдяки WordPress». Однак, якщо значення було збережено, «WordPress» заміниться на цей кумедний вибір зі списку.
6. Перевірка і коригування даних
Вище я згадував, що для спрощення я не хотів би відразу з самого початку кидатися в таку складну тему, як перевірка даних. Однак, я не хочу залишити у вас враження, що я її не торкаюся, тому що вона неважлива. Вже так і бути, я виділяю цього цілий розділ цього посібника. Отже, так, я дійсно вважаю, що це дуже важливо. Однак, я не буду залазити в усі тонкощі і причини, чому це так важливо, чи описувати наслідки невиконання цієї перевірки. Я просто скажу так: ніколи не довіряйте введеним користувачем даним!
6.01 Перевірка текстового введення
Ще раз, WordPress автоматично обмежує типи файлів, які можуть бути завантажені, але завантаження в даному випадку не обмежена тільки картинками. Ви можете створити перевірочну функцію для завантаження тільки картинок. Але, оскільки це керівництво по настройщик тим, а не по перевірці та корекції даних, я залишу цю тему нерозкритою.
8. Створення призначених для користувача елементів управління
Отже, ми розповіли все про вбудованих в WordPress елементах управління, а що якщо ми хочемо створити додаткові елементи? Отто написав відмінну статтю по створенню призначених для користувача елементів управління, тому цей розділ буде заснований на ній.
Ви, можливо, помітили раніше, що тип введення текстової області (textarea) не входить у вбудовані в WordPress типи. Тут ми і створимо призначений для користувача елемент управління для використання типів введення textareas в Настроювачі тем.
Для створення нашого власного елемента управління нам знадобиться розширити WP_Customize_Control class і перевизначити функцію render_content () для виведення нашого нового елемента управління. Якщо ви знайомі з об'єктно орієнтованою мовою PHP, це для вас буде зрозуміло, якщо немає - нічого, просто йдіть за мною. Дуже складно не буде.
Розміщуємо наш клас всередині функції example_customizer (). яку ми створили на початку цього керівництва. Цю функцію ми використовували для налаштування і додавання всіх опцій в настроювач тем. Щоб клас працював, як треба, він повинен бути визначений в межах цієї функції:
- Змінили попереднє значення ID «color-setting» на «font-color» у всіх трьох місцях, де це присутнє.
- Поміняли колір за замовчуванням.
- Поміняли назву.
- І, нарешті, змінили властивість секції на «colors» для того, щоб опція додалася саме в існуючу секцію «Colors».
Ми вже розповідали, як використовувати збережені опції в темі, тому процедуру застосування збереженого кольору шрифту до теми я залишаю вам, як домашнє завдання.
Повернемося до розгляду параметра «transport» і його значення «postMessage«, які ми коротко розглянули в розділі 3. Додамо нову опцію для зміни кольору фону області вмісту на домашній сторінці. По-перше, ми додамо ще один вибір кольору до секції «Colors» налагоджувальника тем:
11. Використання AJAX для встановлених опцій
А що якщо ми захочемо змінити параметр transport у вбудованої опції? Така можливість теж є. Для демонстрації ми будемо міняти вбудовану опцію «Site Title» (Назва сайту) так, щоб вона була передана настройщик тим, використовуючи «postMessage«, а не як зазвичай, через «refresh«. Перше, ми додаємо наступний рядок в головну функцію example_customizer (). створену раніше:
Можливо помилка в Настроювачі який є у вашому шаблоні, на жаль для більш точної відповіді потрібно більше інформації.
Помилок в js немає (подивитися можна в консолі)?