Цей підручник покаже вам, як додати параметри теми, наприклад кольори теми, у WordPress Customizer і перекомпілювати таблицю стилів теми з вибраними змінними. Завдяки стилю теми в SCSS за допомогою бібліотеки ви можете легко дозволити користувачам теми налаштовувати будь-які змінні в таблиці стилів теми, не маючи необхідності редагувати файли SCSS самостійно.
Будь-яка хороша тема повинна дозволяти багато налаштувань. Принаймні має бути можливість встановити основні кольори теми. Замість того, щоб писати багато потворних CSS, щоб скрізь замінювати кольори теми, ви можете перекомпілювати повну таблицю стилів безпосередньо з Настроювача. Цей підручник навчить вас, як!
Що зробимо – і що нам потрібно
Я припускаю, що ваша тема вже має певний стиль у файлах SCSS, які ви вже скомпілювали в main теми style.css. І використовуючи SCSS, ви, швидше за все, визначаєте повторювані речі, такі як кольори, розміри або точки розриву, як змінні SCSS, і використовуєте ці змінні у своєму стилі.
Ви можете створити будь-яку кількість налаштувань настроювача для змінних у вашому файлі SCSS. Для цього ідеально підходять засоби вибору кольорів, введення чисел і тексту. Поки користувач змінює налаштування в WordPress Customizer, він побачить попередній перегляд теми зі зміненими змінними. І коли вони натискають «Зберегти», остаточний CSS буде скомпільовано до основного CSS-файлу таблиці стилів із використанням вибраних значень.
Як приклад для цього підручника я припустю, що головний SCSS-файл таблиці стилів теми виконує @importфайл variables.scss. Там ми визначили три змінні, які ми хочемо настроювати в Customizer: два кольори та один розмір тексту в px.
$main: #594c74 !default;
$secondary: #555 !default;
$text-size: 12px !default;Будь ласка, зверніть увагу, щоб дозволити SCSS перевизначати змінні, вони повинні бути визначені за допомогою !default. Це правило в SCSS. Щоб цей посібник працював; будь-які змінні, які ви хочете налаштувати, повинні бути визначені як типові у ваших файлах SCSS.
Ви вирішуєте, коли (чи чи) ви хочете перезаписати файл CSS. У цьому підручнику передбачається, що коли користувач натискає «Зберегти» в настроювачі, він перекомпілює та записує CSS теми. Однак, коли попередній перегляд настроювача активний і користувач змінює налаштування (перед тим, як натиснути кнопку «Зберегти»), ми просто виводимо скомпільований CSS у заголовок для попереднього перегляду веб-сайту. Ми не хочемо відразу перезаписувати файл CSS, якщо користувач захоче скасувати внесені зміни.
Пам’ятай…
Цей підручник перезаписуватиме файл теми щоразу style.css, коли зберігаються налаштування Настроювача.
Я припускаю, що ви вже скомпілювали свої файли SCSS за допомогою програми компілятора (наприклад, Koala або командного рядка). Наявність цього коду у вашій темі перезапише файл CSS, але не змінить вихідні файли SCSS. Це означає, що щоразу, коли ви вносите зміни в Customizer, а потім повертаєтеся до вихідних файлів SCSS і перекомпілюєте, ваші налаштування Customize будуть втрачені!
Існує кілька способів обійти це, і це залежить від вашого проекту та способу роботи. У більшості випадків це не буде проблемою. Зазвичай про це слід пам’ятати під час розробки теми. Якщо ви передаєте завершену тему комусь іншому, вони все одно не торкатимуться ваших файлів SCSS.
Покінчивши з цим, давайте почнемо дивитися, як це зробити:
- Знайомство з бібліотекою SCSSPHP і включення її в нашу тему
- Створіть налаштування настроювача для кожної змінної SCSS, яку ми хочемо налаштувати
- Переконайтеся, що настроювач попередньо переглядає зміни на ходу
- Під час збереження налаштувань настроювача ми перекомпілюємо та перезаписуємо файл CSS теми.
1 Бібліотека SCSSPHP
Для компіляції файлів SCSS ми будемо використовувати бібліотеку SCSSPHP від leafo (ліцензія MIT). Зверніть увагу, що цей підручник призначений для бібліотеки SCSS. Автор бібліотеки дійсно має подібну бібліотеку LESS PHP, якщо ви бажаєте використовувати LESS, але пам’ятайте, що наступний підручник стосується бібліотеки SCSS.
Бібліотека SCSSPHP дуже проста у використанні! Ось спрощений огляд того, як ми будемо використовувати бібліотеку в PHP нашої теми:
- Включаємо бібліотеку
- Створіть новий екземпляр класу компілятора з бібліотеки
- Завантажте вміст вихідного файлу SCSS і передайте його об’єкту компілятора
- Визначити асоціативний масив; Назви змінних SCSS (включаючи
$) як ключі та їхні значення. Будь-який елемент у цьому масиві замінить однойменні змінні у наданому файлі SCSS. - Ми просимо об’єкт компілятора скомпілювати та отримати скомпільований CSS як рядок у відповідь. Потім ми можемо або вивести цей CSS всередину, або записати його у файл
headтемиstyle.css
Які типи змінних SCSS ми можемо скомпілювати?
Проста відповідь: будь-яка допустима змінна SCSS!
Бібліотека SCSSPHP може скомпілювати будь-яку дійсну змінну SCSS, але майте на увазі, що ви повинні переконатися, що вони правильно відформатовані за допомогою Customizer. Наприклад, кольори повинні або мати префікс #для шістнадцяткових кольорів, або мати формат rgb()або rgba()визначення. Змінна розміру зазвичай має бути додана з " px", " em", " %", і так далі.
Якщо ви плануєте створити розширену систему для компіляції змінних SCSS за допомогою теми Customizer, переконайтеся, що у вас є хороша система для правильного форматування кожного типу змінної!
Давайте зробимо перший крок із шляху; завантаження та включення бібліотеки в нашу тему:
Завантаження та включення бібліотеки SCSSPHP у вашу тему
Першим кроком є завантаження бібліотеки SCSSPHP. На сторінці за посиланням натисніть кнопку «Завантажити» у самому верху. Якщо ви бажаєте використовувати Composer, на сайті є посібник із цього приводу.
Розпакуйте zip у підпапку десь у вашій темі. Як приклад, я поміщаю його в theme/inc/scssphp/папку.
Відкрийте файл PHP, у який ви хочете додати свій код для компіляції. Він може бути безпосередньо у вашій темі functions.phpабо у файлі PHP, включеному functions.php. Для простоти я пишу все всередині functions.php.
Перш ніж ми зможемо використовувати бібліотеку, нам потрібно її включити; так:
require_once(get_stylesheet_directory(). '/inc/scssphp/scss.inc.php');Відповідно відкоригуйте шлях до файлів. Нам потрібно включити scss.inc.phpфайл, знайдений у кореневій папці бібліотеки. Тепер, після цього рядка, ми можемо використовувати класи бібліотеки!
2 Створення параметрів Настроювача для змінних SCSS
Давайте створимо налаштування WordPress Customizer для наших змінних. Заради підручника ми додамо налаштування для змінних SCSS, згаданих вище: два палітри кольорів і введення числа.
Я не буду вдаватися в подробиці, пояснюючи, як додати налаштування Настроювача – для цього є багато посібників. У наведеному нижче прикладі коду я створив новий розділ і вставив у нього три налаштування:
Цей код підключається до customize_registerрозділу під назвою «Змінні теми» та додає його. Потім він продовжує додавання палітри кольорів «theme-main», іншої палітри кольорів «theme-secondary» і введення числа «theme-text-size». Це всі стандартні функції WordPress. Я також додаю встановлення для кожного параметра за замовчуванням тих самих значень, як визначено у variables.scssфайлі. Це лише для того, щоб переконатися, що параметри настроювача ініціюються з правильними кольорами.
Виглядає чудово! Але наразі нічого не відбувається, коли ви налаштовуєте ці змінні. Давайте продовжимо крок 3; обробка попереднього перегляду в настроювачі.
3 Скомпілюйте CSS на ходу в попередньому перегляді Customizer
Цей крок обробляє оновлення попереднього перегляду настроювача, поки користувач змінює налаштування, і не записує жодного з наших файлів. Натомість ми виведемо скомпільований CSS у <head>вікні попереднього перегляду всередині <style>тегу. Таким чином ми гарантуємо, що вбудований CSS перевизначає всі стилі з оригінального файлу CSS.
Щоб перевірити, чи ми зараз використовуємо попередній перегляд Customizer, ми використовуємо функцію [is_customize_preview](https://developer.wordpress.org/reference/functions/is_customize_preview/)(). Коли це повертається true, ми створюємо функцію, підключену до wp_head. Усередині функції ми запускаємо та налаштовуємо бібліотеку SCSSPHP, отримуємо поточні значення параметрів, компілюємо CSS і виводимо його в <style>тег.
У рядку #7ми визначаємо шлях до вихідного файлу SCSS і завантажуємо його вміст у змінну в #8. У рядку #9ми #10встановлюємо шлях імпорту для бібліотеки, щоб гарантувати @importправильну роботу будь-яких s у наших файлах SCSS. Ви можете прочитати більше про це на сайті документації бібліотеки під заголовком «Шляхи імпорту». Загалом, бібліотеці SCSSPHP потрібно знати відносний шлях до вашої папки SCSS, щоб усі @importшляхи були правильними.
У рядку #12-16ми створюємо масив для компілятора; асоціативний масив з іменами змінних як ключами. Для значень, які ми використовуємо [get_theme_mod](https://developer.wordpress.org/reference/functions/get_theme_mod/)()для отримання значень із Customizer. Функція get_theme_mod()дозволяє вам визначити значення за замовчуванням як другий параметр, якщо значення не було збережено. Це позбавляє нас від збою компілятора з такими значеннями, як null. Тому ми надаємо те саме значення за замовчуванням, що й у нашому файлі змінних SCSS і під час реєстрації налаштувань настроювача.
Також зауважте, що код у рядку #15додає " px", гарантуючи, що фактичне значення змінної є дійсним. Інакше він компілюється як «$text-size: 12;», коли нам потрібен «$text-size: 12px;». Ми надаємо компілятору масив змінних у рядку #17, вказуючи йому компілювати з використанням цих змінних.
Потім у рядку #19-22ми викликаємо compile()функцію, яка має повернути скомпільований CSS у вигляді рядка. Виводимо <style>тег із рядком CSS всередині. Оскільки ми підключилися до wp_head, настроювач відтворюватиме попередній перегляд зі зміненим CSS щоразу, коли буде внесено зміну.
4 Збережіть скомпільований CSS у таблиці стилів теми
Код для компіляції CSS дуже схожий на попередній крок. Єдина відмінність полягає в тому, що тепер ми записуємо CSS у файл, а не виводимо його. Ви дійсно повинні подумати про розміщення цього у функції, щоб не повторювати код, але для ясності я вирішив розділити ці два.
Ми встановлюємо, [customize_save_after](https://developer.wordpress.org/reference/hooks/customize_save_after/)які тригери спрацьовують щоразу, коли хтось натискає «Зберегти» в настроювачі WordPress. На цьому етапі ми отримуємо вихідний SCSS, визначаємо значення змінних і компілюємо його в CSS. З рядком CSS ми використовуємо просту функцію PHP, щоб записати його у файл CSS теми.
Єдина відмінність від попереднього полягає в рядку, #8де ми визначаємо цільовий файл для запису, і рядку, #19де ми записуємо у файл.
Висновок
Тепер у нас є налаштування настроювача, які керують змінними у файлі SCSS теми та перезаписують основну таблицю стилів теми, використовуючи ці змінні. Немає обмежень на те, скільки або які параметри ви хочете налаштувати користувачам теми! Витратьте деякий час на налаштування відповідної системи для обробки форматування різних типів змінних (наприклад, префіксів або постфіксів) і правильного структурування налаштувань Настроювача. Користувачі теми оцінять гнучкість і те, як легко налаштувати тему!
Ви також можете придумати різні способи обробки запису файлів остаточного CSS. Якщо ви не хочете перезаписувати основну таблицю стилів, можливо, ви захочете вивести її в інший файл. Ви також можете розглянути використання умов if-else у SCSS.
Цей підручник був написаний, щоб дати вам трамплін у тому, як ви можете налаштувати свою тему WordPress за допомогою Customizer. Дайте мені знати, чи було це для вас корисно – чи ви хочете отримати більш просунутий посібник, який гарантує, що таблиця стилів теми не буде перезаписана!