Розробники тем WordPress можуть використовувати theme.jsonфайл для спрощення процесу, який раніше переважно залежав від PHP. Однак, як і раніше, можна використовувати свої навички HTML, JavaScript і PHP для створення тем — і CSS не є винятком. Фактично, в theme.json використовуються властивості користувача CSS. Це може покращити етап проектування та забезпечити більшу гнучкість.
У цьому посібнику розглянемо властивості CSS безпосередньо, щоб вивчити, як вони працюють разом з WordPress і theme.json. Але перш ніж ми приступимо до цього, поговоримо про theme.json, повне редагування сайту (FSE - full site editing) і про те, як CSS вписується в цей новий підхід до дизайну.
Як theme.json працює з WordPress
Файл theme.json у редакторі коду.
Файл theme.jsonвперше з'явився у WordPress 5.8. Це революційний спосіб розробки тем WordPress, який використовує синтаксис JSON для створення конфігураційного файлу. WordPress зчитує його та застосовує результати без необхідності використання великої кількості PHP, CSS або JavaScript.
Глобальні налаштування та стилі у FSE керують різними візуальними аспектами теми. Вони можуть включати типові палітри кольорів і типографіку, а також параметри макета і окремі стилі блоків і елементів.
Хоча FSE інтуїтивно зрозумілий, потужний, адаптуємо та простий у використанні, theme.json допоможе скоротити розрив між ролями кінцевого користувача та розробника. Майже кожна опція, theme.json яку ви отримуєте, також видно у редакторі сайту.
Основний інтерфейс редактора сайту WordPress.
Використання theme.json дає багато переваг при створенні тем WordPress. На це є кілька причин:
- Ви маєте централізоване розташування конфігурації дизайну вашої теми, що спрощує управління та оновлення.
- Менше плутанини між інтерфейсом, редактором сайту та кодовою базою теми.
- Використання
theme.jsonзабезпечує сумісність з майбутніми розробками та дизайном WordPress. - Вбудована функціональність WordPress означає, що користувачам можна буде менше використовувати власні CSS.
Давайте подивимося, як theme.json співвідноситься з глобальними налаштуваннями та стилями FSE.
Посібник із глобальних налаштувань та стилів FSE
FSE являє собою нову еру розробки тем WordPress, і глобальні налаштування та стилі знаходяться на передньому краї. Це дозволяє користувачам налаштовувати практично кожен аспект зовнішнього вигляду сайту за допомогою функціональності редактора сайту.
Панель "Стилі" у редакторі сайтів WordPress.
Тут можна налаштувати аспекти макета теми за допомогою опцій, які раніше вимагали CSS або стороннього плагіна для конструктора сторінок. Нижче наведено приклад зміни полів, відступів та кордонів.
Робота з типовими елементами CSS, такими як відступи та поля, у редакторі сайту.
Можете включити або вимкнути більшу частину цієї функціональності всередині theme.json(або у власному файлі блоку block.json). Це підтримує налаштування інтерфейсу користувача разом із загальним дизайном сайту.
Проте наявні можливості — хоч і великі — можуть покривати всі потреби, що особливо актуально, якщо створюєте тему з нуля. Це одна з завдань, яку можуть вирішити властивості користувача CSS.
Дивіться також:
Як додати користувальницький CSS до WordPress: 4 методи для різних цілей.
Розуміння властивостей користувача CSS
У PHP, JavaScript та майже в кожній мові програмування змінні зберігають значення різних елементів коду. Наприклад, можна зберігати такі значення, як імена, дати та числа, та використовувати їх у програмі.
Змінні CSS3 — або властивості CSS, як ми їх називаємо в цьому пості — підтримуються більшістю сучасних браузерів. Хоча Internet Explorer їх не підтримує, як Opera Mini, але всі основні гравці підтримують.
На сайті Can I Use показана поточна підтримка властивостей користувача CSS.
Властивості CSS дозволяють зберігати значення для повторного використання в таблиці стилів. Це потужний спосіб створення більш динамічного та гнучкого CSS, де можна оновити кілька правил стилів, змінивши одне значення.
Концепція змінних CSS не зовсім нова. Препроцесори, такі як Sass, використовують подібну функціональність. Наприклад, візьмемо наступний Sass:
$font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack color: $primary-color
Він перетворюється на типовий CSS:
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
Однак властивості користувача CSS передають це безпосередньо в браузер, що дає деякі переваги:
- Динамічні поновлення. На відміну від більшості змінних препроцесора, можете оновлювати власні властивості CSS «на льоту» за допомогою JavaScript.
- Каскадна природа. Користувацькі властивості слідуватимуть каскаду CSS, що забезпечує більшу гнучкість і більш контекстно-залежну стилізацію.
Властивості користувача також будуть більш продуктивними за рахунок зниження надмірності коду. Менші таблиці стилів означають швидше завантаження.
Синтаксис властивостей користувача CSS
Як і у випадку з типовими змінними препроцесорами, синтаксис для властивостей властивостей CSS простий. Він використовує подвійні дефіси замість знаків долара для вказівки якості:
:root {
--primary-color: #007bff;
}
Далі використовуєте var()функцію призначення цих властивостей елементам:
.button {
background-color: var(--primary-color);
}
Зверніть увагу, що також можна призначати власні властивості за допомогою @властивості. Однак, коли зрозумієте, WordPress полегшує весь цей процес.
Де можна використовувати властивості CSS
Універсальність — це питання дня, коли справа стосується властивостей користувача CSS. З WordPress та theme.jsonу вас є кілька способів їх використання:
- Передустановки: можна встановити параметри кольору, шрифту та інтервалу.
- Стилі блоків: окремі блоки можуть використовувати власні властивості для одноманітного оформлення.
- Глобальні стилі: Властивості користувача безцінні для дизайну всього сайту.
Можете створити повністю власні властивості для будь-якої мети, яку захочете. Давайте розглянемо практичний приклад того, як можна використовувати власні властивості theme.json файлі:
{
"settings": {
"color": {
"palette": [
{
"slug": "primary",
"color": "#007bff",
"name": "Primary"
}
]
},
"custom": {
"line-height": {
"body": 1.5,
"heading": 1.2
}
}
},
"styles": {
"typography": {
"lineHeight": "var(--wp--custom--line-height--body)"
},
"blocks": {
"core/heading": {
"typography": {
"lineHeight": "var(--wp--custom--line-height--heading)"
}
}
}
}
}
Тут визначаємо передустановку кольору та використовуємо custom властивість визначення line-height значень заголовків та тіла сторінок. WordPress згенерує властивості CSS для елементів, визначених за допомогою custom. Далі можемо призначити ці властивості користувача різним стилям, налаштуванням, блокам і т.д.
Переваги використання властивостей користувача CSS
Може у вас вже з'явилися ідеї, як властивості користувача CSS можуть допомогти при розробці тем. Тим не менш, є багато переваг, які варто відзначити тут.
Ми вже говорили про модульність та можливість повторного використання. Всі загальні значення, які визначаються як властивості користувача, сприятимуть узгодженості і зменшувати надмірність. Ця надмірність призведе до кращої потенційної продуктивності теми.
Для кінцевого користувача властиві властивості забезпечують ряд переваг:
- Спрощене налаштування. Користувачі та власники сайтів можуть налаштовувати тему без складних знань CSS. Після того, як ви виставите змінні через
theme.jsonКористувачі зможуть отримати доступ до налаштувань через редактор сайту. - Найкраща сумісність з FSE. Властивості користувача відповідають принципам FSE, що дозволяє створювати більш гнучкі і динамічні дизайн тем.
- Простіше обслуговування та оновлення. Якщо потрібно оновити загальні значення в темі, властивість користувача означає зміну всього в одному місці. Це спрощує обслуговування та робить оновлення та налаштування більш керованими.
В цілому, властивості користувача можуть поліпшити робочий процес розробки теми. Їх визначення також простіше, ніж використання типових змінних CSS.
Як визначити властивості CSS в theme.json
Давайте розглянемо практичні аспекти визначення та використання власних властивостей CSS в theme.json. Перший крок – навчитися їх писати.
Синтаксис та угоди про імена
WordPress пропонує custom властивість, щоб допомогти з визначеннями, що трохи простіше у використанні, ніж @ властивість або визначення в псевдокласах, вона використовує стандартний формат ключ/значення:
{
"settings": {
"custom": {
"property-name": "value"
}
}
}
WordPress автоматично обробить це визначення і згенерує власну властивість CSS з використанням подвійних дефісів:
--wp--custom--<custom-element>
--wp--custom-- завжди буде частиною властивості CSS, і не використовуватиме camel case. Наприклад, якщо ви визначите його lineHeight як властивість користувача, WordPress перетворить його на «kebab case:»
--wp--custom--line-height
Що стосується угод про імена, можна за бажанням використовувати camel case, хоча ми рекомендуємо kebab case для імен властивостей користувача. Це відповідає угодам про імена WordPress, покращує читання та скорочує помилки обробки.
Примітка: властиві властивості CSS використовують подвійні дефіси, оскільки робоча група W3C CSS також хоче спонукати використати Sass (який використовує знаки долара для визначення властивостей). Таким чином, у вас є можливість використовувати обидва варіанти для покращення проектів.
WordPress вже визначає деякі властивості користувача - або, принаймні, теми мають таку можливість. Це означає, що можна побачити змінні CSS theme.json без явного оголошення:
{
"settings": {
"color": {
"palette": [
{
"slug": "primary",
"color": "var(--wp--preset--color--primary)",
"name": "Primary"
}
]
},
"custom": {
"spacing": {
"small": "1rem",
"medium": "2rem",
"large": "3rem"
}
}
},
"styles": {
"spacing": {
"blockGap": "var(--wp--custom--spacing--medium)"
}
}
}
У цьому прикладі визначаємо основний колір, використовуючи існуючий попередньо встановлений колір. Потім визначаємо деякі властивості користувача інтервалу, а потім встановлюємо їх за допомогою var().
Це означає, що не потрібно жорстко кодувати значення в theme.json. Більше того, користувачі можуть оновлювати ці значення у редакторі сайту та розповсюджувати їх по всій темі.
Передустановки та властивості користувача
Звичайно, theme.json також дозволяє визначати налаштування для кольорів, розмірів шрифтів та інших загальних елементів теми. З іншого боку, можна використовувати власні властивості для будь-якого значення, яке хочете повторно використовувати у своїй темі.
Найбільша відмінність тут у угодах про імена та доступність. Користувачі не зможуть отримати доступ до властивостей користувача в редакторі сайту без подальшої роботи з вашого боку. З передустановками WordPress буде генерувати CSS, який виглядає схоже на те, як він обробляє властивості користувача:
{
"settings": {
"color": {
"palette": [
{
"slug": "primary",
"color": "#007bff",
"name": "Primary"
}
]
},
"custom": {
"fontFamily": {
"base": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
"headings": "'Helvetica Neue', Helvetica, Arial, sans-serif"
}
}
}
}
Як тільки WordPress обробить це, ви побачите суттєві відмінності:
--wp--preset--primary: #007bff; --wp--custom--font-family--base: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif"; --wp--custom--font-family--headings: "'Helvetica Neue', Helvetica, Arial, sans-serif";
Зверніть увагу, що при подальшому вкладенні властивостей будуть використовуватися подвійні дефіси навіть після перетворення camel case в kebab case.
Глобальні та блокові властивості CSS проти властивостей користувача CSS
З класичним WordPress ви б використали додатковий та користувальницький CSS на фронтенді для проектування елементів у темі. Це, як і раніше, стосується theme.jsonі FSE, хоча підхід відрізняється від властивостей CSS.
Якщо зайти в редактор сайту та перейти на екран стилів, то побачите розділ «Додатковий CSS». Він діє приблизно так само, як панель «SCS користувача» в класичних установках WordPress
Розділ "Додатковий CSS" у редакторі сайтів WordPress.
Він є способом додавання глобального налаштування CSS у тему. Однак, насправді це спосіб надати користувачам можливість додавати CSS. Ви також можете використовувати його для внесення невеликих, незначних змін, які не потребують цілої таблиці стилів.
У файлі theme.json використовується властивість css, щоб визначити будь-який додатковий CSS, який потрібно додати:
{
"version": 3,
"styles": {
"css": "margin: 0"
}
}
Зверніть увагу, що не потрібно використовувати точку з комою для завершення операторів CSS. Також можете задати користувальницький CSS для блоків:
{
"version": 2,
"styles": {
"blocks": {
"core/post-title": {
"css": "letter-spacing: 1px;"
}
}
}
}
Щоразу, коли встановлюєте CSS таким чином у theme.json, ви побачите його в будь-яких додаткових полях CSS редактор сайту. Однак пам'ятайте, що все, що ви оголошуєте за допомогою css, є властивістю користувача CSS.
Використання селектора амперсанди (&)
Подібно до Sass, WordPress також підтримує селектор амперсанда, з деякими відмінностями. У цьому випадку це чудовий спосіб націлювання на вкладені елементи та властивості. Це може бути актуальним, якщо ви вирішите оголосити власні властивості CSS для окремих блоків.
Наприклад, візьмемо таке:
…
"styles": {
"blocks": {
"core/table": {
"css": "color:#333 & th{ background:#f5f5f5; }"
}
…
Код визначає колір тексту та колір фону для елемента заголовка таблиці. Після того, як WordPress обробить його, вийде чистий, простий CSS:
.wp-block-table > table {
color: #333;
}
.wp-block-table > table th {
background: #f5f5f5;
}
Селектори амперсанда чудові, якщо потрібно розширити цільовий CSS. Відомо, що селектор допомагає розділити елементи CSS. Візьмемо, наприклад, таке:
{
"version": 3,
"styles": {
"blocks": {
"core/avatar": {
"css": "& img {border-radius: 999px}"
}
}
}
}
Це додає радіус кордону до аватара і виводить CSS так, як і очікувалося:
.wp-block-image img {
border-radius: 999px;
}
Однак без амперсанда WordPress об'єднав би ваші оголошення:
… .wp-block-imageimg …
Використання селектора амперсанда для властивостей CSS стане для вас регулярною практикою.
Так Так theme.json є потужним файлом конфігурації для створення гнучких і підтримуваних тем WordPress, властивості CSS мають вирішальне значення для робочого процесу. Саме так ви створюватимете і оголошуватимете CSS для елементів, які не доступні редактору сайту. Це також матиме ключове значення, якщо ви створюєте власні блоки або просто хочете розробити унікальні теми WordPress з максимальною глибиною налаштування. А також з'являється можливість поділитись цим CSS з користувачами через редактор сайту.
Джерело: kinsta.com
Коментарі до запису: 0