С появлением редактора сайта WordPress (он же Full Site Editing) и блочных тем, представление пользователей WordPress о том, как изменять свои сайты и темы, кардинально изменилось. Что такое блочная тема и как ее изменить, читайте дальше наш перевод.
В наши дни вместо style.css и functions.php существует новый центральный файл для блочных тем: theme.json. Кроме того, вместо CSS и PHP, чтобы вносить изменения, вам нужно быть знакомым с новым типом разметки. Его название — JSON.
Хотя это может звучать пугающе, хорошая новость заключается в том, что JSON на самом деле вполне доступен. При наличии небольшого технического опыта и упорства его не так уж сложно понять и начать самостоятельно вносить изменения в темы.
Чтобы помочь вам быстрее достичь этого, данный пост представляет собой руководство для абсолютных новичков по JSON и его использованию в WordPress. В частности, мы расскажем, что такое JSON, какую функцию выполняет файл theme.json в блочных темах WordPress и как использовать его для изменения тем.
Сделайте глубокий вдох и держите голову открытой, все будет хорошо, я обещаю.
Что такое JSON?
Давайте начнем со слона в комнате. О чем именно мы говорим, когда говорим JSON?
Возможно, вы уже слышали об этом, особенно в связи с WordPress JSON REST API. JSON, сокращение от JavaScript Object Notation, — это облегченный формат обмена данными. То есть это способ представления, хранения и обмена данными между различными системами, приложениями или платформами.
Существуют и другие подобные форматы, например XML или CSV. Однако особенность JSON и причина его популярности в последние годы заключается в том, что его не только легко разбирают и генерируют машины, но и читают и пишут люди. Подробнее об этом ниже.
Несмотря на то, что JSON возник на основе JavaScript, он стал форматом, не зависящим от языка. Большинство языков программирования теперь имеют встроенную поддержку или библиотеки для разбора и генерации данных JSON. Это также одна из причин, почему он широко используется в веб-приложениях и API для передачи данных.
Основной синтаксис JSON
Как уже упоминалось ранее, JSON на самом деле довольно прост. В основном он представляет данные в виде пар «ключ-значение», то есть дает вам название чего-либо и показывает, какое значение оно имеет, например "color": "#ffffff". Если вы когда-нибудь работали с CSS, то такой формат должен показаться вам очень знакомым.
Помимо этого, разметка JSON имеет следующие особенности:
- Ключи — это строки, то есть слова, а значение может быть строкой, числом, булевой функцией (true или false), null, массивом (то есть списком значений) или другим объектом JSON.
- Объекты JSON разграничиваются фигурными скобками («{}»), а массивы — квадратными скобками («[]»).
- Ключи и строковые значения заключаются в двойные кавычки.
- Формат данных является строгим, и любое отклонение от стандартного синтаксиса приведет к ошибке разбора.
Уже чувствуете себя потерянным? Давайте рассмотрим пример, чтобы прояснить ситуацию:
{
"version": 2,
"settings": {
"color": {
"palette": [
{
"color": "#ffffff",
"name": "Base",
"slug": "base"
},
{
"color": "#000000",
"name": "Contrast",
"slug": "contrast"
},
],
},
"styles": {
"color": {
"background": "var(--wp--preset--color--base)",
"text": "var(--wp--preset--color--contrast)"
},
}
}
}Сначала в приведенном выше примере определяется версия файла. Она разделена на секции настроек и стилей, в обеих из которых задаются определенные цвета. В части настроек цвета назначаются палитре подкатегории и отображаются в виде массива, содержащего несколько цветов, а также значения name и slug.
В сегменте стилей задаются два цвета: один для фона, другой для текста. Оба цвета задаются только как переменные. Вы можете видеть, что все форматирование, о котором говорилось выше, применяется, и легко понять, какие ключи и значения принадлежат друг другу.
Понятно ли это вообще? Да, но хорошая новость заключается в том, что приведенный пример взят непосредственно из WordPress. Итак, если вы чувствуете, что это не было невозможно понять, то вы готовы начать использовать JSON для изменения тем блока WordPress.
Что такое файл WordPress theme.json?
С момента появления полносайтового редактирования/редактора сайта и блочных тем в платформе WordPress произошел технологический сдвиг. Вместо CSS и PHP она все больше полагается на JavaScript и JSON.
Лучший пример тому — файл theme.json. Это файл конфигурации для блочных тем, который помогает управлять глобальными стилями и настройками. Он позволяет разработчикам тем задавать стили, опции и конфигурации по умолчанию для всего сайта и отдельных блоков темы.
Таким образом, theme.json может изменять как внешний вид темы, так и параметры, доступные пользователям для внесения собственных изменений. Это дает вам единый, централизованный способ создания и изменения блочных тем, тем более что все, что вы настраиваете здесь, применяется как к передней части вашего сайта, так и к редактору WordPress в задней части. Более того, WordPress будет читать разметку в файле и создавать необходимые CSS-стили для вас.
Раньше редактор и фронтальная часть сайта использовали разные таблицы стилей, которые нужно было поддерживать отдельно. Кроме того, разработчики тем предлагали разные варианты настроек, даже при использовании WordPress Customizer.
Теперь, с новым, унифицированным подходом, пользователи получат более согласованный опыт.
Конечно, как следует из названия файла, theme.json написан в JSON. Как следствие, если вы хотите научиться работать с ним и блокировать темы, вам необходимо ознакомиться с разметкой, в которой он написан. Именно этим мы и займемся в этой статье.
Структура файла theme.json
файлtheme.json состоит из трех основных частей: настроек, стилей и частей пользовательских шаблонов/шаблонов. Вот что вы можете контролировать в каждой секции:
- Настройки — Содержит глобальные стили, то есть доступные colorовые палитры, семейства и размеры шрифтов, а также другие параметры текста, ширину темы, интервалы и границы. В общем, основные элементы управления для изменения внешнего вида вашей темы. То же самое можно сделать и для отдельных блоков, а также задать пользовательские переменные CSS.
- Стили — здесь вы определяете стилистику темы по умолчанию, то есть значения по умолчанию, которые она должна использовать для многих параметров, упомянутых выше. Например, вы можете задать цвет фона темы и семейства шрифтов, которые она будет использовать для заголовков и основного текста. То же самое можно сделать и для отдельных блоков. По сути, это то, что раньше делал
style.css. - Пользовательские шаблоны и части шаблона — здесь вы определяете шаблоны страниц и части шаблона, которые будут доступны в вашей теме, и указываете теме на сопутствующие HTML-файлы.
Использование JSON для настройки блочных тем WordPress
Чтобы вы лучше поняли, как это относится к изменению блочных тем WordPress, давайте рассмотрим несколько практических примеров.
Загрузка локальных пользовательских шрифтов для изменения типографики темы
Первое, что мы сделаем, это загрузим некоторые файлы шрифтов, размещенные на сервере, чтобы привнести в вашу тему другой вид типографики. У нас есть подробная статья на эту тему, если вы хотите увидеть больше деталей, поэтому здесь мы приведем немного сокращенную версию.
Параметры для этого находятся в файле theme.json в разделе settings > typography и затем в разделе fontFamilies.
{
"version": 2,
"settings": {
"typography": {
"fontFamilies": {
}
}
}
}В блочных темах вы добавляете новые шрифты, используя эти значения:
fontFamily— это имя нового шрифта, которое будет отображаться в разметке CSS. Оно может включать в себя запасные шрифты.name— Название шрифта, которое будет отображаться в редакторе WordPress.slug— Уникальный идентификатор, который WordPress использует для создания пользовательского свойства CSS.fontFace— соответствует правилу CSS@font-face. Это часть, которая действительно запрашивает шрифт.
Для того чтобы fontFace работал, он должен включать в себя несколько других частей информации:
fontFamily— еще раз название шрифта.fontWeight— Список доступных весов шрифта, разделенных пробелами.fontStyle(необязательно) — Здесь можно задать атрибутfont-style, например,normalилиitalic.fontStretch(необязательно) — Например, для семейств шрифтов, имеющих сокращенную версию.src— Путь к локальному файлу шрифта.
Вот пример того, как это выглядит:
{
"version": 2,
"settings": {
"typography": {
"fontFamilies": [
{
"fontFamily": "Advent Pro",
"slug": "advent-pro",
"fontFace": [
{
"fontFamily": "Advent Pro",
"fontStyle": "normal",
"fontWeight": "400",
"src": [
"file:./fonts/advent-pro-v20-latin-regular.woff"
]
},
{
"fontFamily": "Advent Pro",
"fontStyle": "italic",
"fontWeight": "400",
"src": [
"file:./fonts/advent-pro-v20-latin-italic.woff"
]
}
]
}
]
}
}
}Обратите внимание, что в fontFace можно включить несколько файлов шрифтов, например, чтобы загрузить разные стили. Как уже говорилось, для этого их нужно разделить фигурными скобками и запятой.
Чтобы добавить локальные шрифты Google в тему без ручного изменения разметки, вы также можете воспользоваться плагином Create Block Theme.
Изменение стилей Hover и Focus
Далее мы хотим разобраться с тем, как изменить стили hover и focus для таких элементов, как ссылки и кнопки, в блочных темах WordPress. Обратите внимание, что на момент написания этой статьи в WordPress Core этого еще нет. Если вы хотите воспользоваться этим преимуществом, вам нужно установить плагин Gutenberg, чтобы вы могли использовать последние улучшения и функции.
Чтобы внести изменения в стили hover и focus, можно использовать псевдоэлементы :hover, :focus, :active и, для свойства outline, :visited. Настройки для этого находятся в файле themes.json в разделе styles > elements > link или, как вариант, button.
{
"version": 2,
"styles": {
"elements": {
"button": {
},
"link": {
}
}
}
}Вот как определить стили для ваших ссылок:
"styles": {
"elements": {
"link": {
":hover": {
"typography": {
"textDecoration": "none"
}
},
":focus": {
"outline": {
"width": "2px",
"color": "#111",
"style": "solid"
}
},
":active": {
"color": {
"text": "var(--wp--preset--color--secondary)"
},
"typography": {
"textDecoration": "none"
}
}
}
}
}Приведенная выше разметка делает следующее:
- Указывает, что ссылки не должны быть подчеркнуты при наведении на них курсора мыши.
- В состоянии
фокусадобавляется обводка шириной два пикселя, сплошная и имеет colorовой код#111111. - В активном состоянии текст ссылки приобретает цвет, определяемый переменной CSS, и, опять же, не имеет значения
text-decoration.
Изменение цвета темы блока
В этом примере мы хотим ввести пользовательскую цветовую палитру, а также отключить возможность для пользователей создавать свои собственные варианты цветов. Это нужно сделать, например, для того, чтобы убедиться, что все пользователи вашего сайта могут использовать только утвержденные фирменные цвета, а не вносить в дизайн сайта что-то другое. Мы также рассмотрим, как добавлять цвета к определенным блокам или элементам, чтобы заранее определить, как они будут выглядеть.
Понимание стандартных настроек цвета WordPress
Для этого сначала нужно узнать, какие colorовые палитры доступны в Gutenberg по умолчанию. К ним относятся:
- colorовая palette WordPress по умолчанию — она всегда доступна. В ней представлены цвета, которые будут преобладать даже при смене темы. Именно поэтому они используются для блочных шаблонов.
- colorовая palette темы — поставляется вместе с темой и зависит от того, какую тему вы используете.
- Пользовательская palette — цвета, добавляемые пользователем с помощью доступной палитры цветов. Вы можете задать их в глобальных стилях в разделе цвета > palette.
Один или несколько из них всегда появляются при обращении к опциям цвета для любого из блоков или глобальных стилей.
Устранение опций цвета
Сначала давайте скроем цветовую палитру и градиенты по умолчанию. Это можно сделать в разделе настроек и цвета следующим образом:
{
"version": 2,
"settings": {
"color": {
"defaultPalette": false,
"defaultGradients": false
}
}
}Как и многие другие опции, это можно сделать и для отдельных блоков. Например, для блока заголовка:
{
"version": 2,
"settings": {
"blocks": {
"core/heading": {
"color": {
"defaultPalette": false
}
}
}
}
}Кроме того, вы можете отключить функцию выбора цвета, чтобы пользователи сайта не пытались создавать и использовать свои собственные цвета.
{
"version": 2,
"settings": {
"color": {
"custom": false,
"customGradient": false,
"defaultPalette": false,
"defaultGradients": false
}
}
}Если вы введете приведенную выше разметку, все обычные варианты цветов будут недоступны, за исключением цветов темы.
Добавление пользовательской colorовой палитры
Далее мы хотим добавить собственную цветовую палитру. Мы сделаем это в том же месте в файле theme.json, добавив ключ palette, а затем добавив массив с slug, цвет и name для каждого из цветов, которые вы хотите включить.
{
"version": 2,
"settings": {
"color": {
"palette": [
{
"color": "#1B1031",
"name": "Base",
"slug": "base"
},
{
"color": "#FFFFFF",
"name": "Contrast",
"slug": "contrast"
},
{
"color": "#FF746D",
"name": "Primary",
"slug": "primary"
},
{
"color": "#551C5E",
"name": "Secondary",
"slug": "secondary"
},
{
"color": "#FB326B",
"name": "Tertiary",
"slug": "tertiary"
}
]
}
}
}Присутствуя в файле theme.json, вы найдете свои собственные варианты цветов в бэкграунде (и, в этом случае, также примените их к своему сайту).
То же самое можно сделать для градиентов и дуотонов. Почти во всех случаях вы можете использовать практически любое объявление цвета CSS. Hex, RGB/A, названия цветов — все, что угодно, даже переменные CSS. Только дуотоны строго принимают значения цветов Hex и RGB.
Кроме того, то же самое можно сделать и для отдельных блоков (убедитесь, что имена и слоганы отличаются от тех, что указаны в настройках сайта):
{
"version": 2,
"settings": {
"color": {
"blocks": {
"core/paragraph": {
"color": {
"palette": [
{
"color": "#1B1031",
"name": "Block base",
"slug": "block-base"
},
{
"color": "#FFFFFF",
"name": "Block contrast",
"slug": "block-contrast"
},
{
"color": "#FF746D",
"name": "Block primary",
"slug": "block-primary"
}
]
}
}
}
}
}
}Установка цветов по умолчанию
Наконец, давайте рассмотрим, как установить цвета по умолчанию для блоков и элементов страницы. Вот как изменить цвет фона и текста блока цитат:
{
"version": 2,
"styles": {
"blocks": {
"core/quote": {
"color": {
"background": "#222",
"text": "#fff"
}
}
}
}
}Как видите, установка цветов по умолчанию происходит в разделе стилей. Здесь мы нацеливаемся на блок core/quote в разделе блоков и определяем цвет фона и текста. Вот как это выглядит на странице:
Кстати, если вы хотите узнать, какие еще настройки можно изменить в файле theme.json, обратитесь к руководству разработчика.
Внедрение дополнительных стилей темы
Одной из лучших особенностей редактора сайтов является наличие вариаций стилей. Они позволяют пользователям WordPress полностью изменить внешний вид своей темы (цвета, шрифты, стили блоков) одним нажатием кнопки.
ВTwenty Twenty-Three их целая куча.
Как вы можете реализовать это в теме? Очень просто, включив дополнительные файлы theme.json.
Несколько замечаний:
- Чтобы WordPress подхватил дополнительные файлы, вам нужно поместить их в директорию с названием
stylesв папке с темой. - Дополнительные файлы загружаются в дополнение к основному файлу и отменяют включенные стили. Это означает, что вам нужно включить только разметку для того, что вы хотите изменить. Это похоже на дочерние темы.
- Вы можете назвать новые файлы как угодно, лишь бы они заканчивались на
.json. Редактор сайта автоматически использует имя файла (без расширения) в качестве отображаемого имени в бэкграунде. Однако вы также можете указать собственное имя, добавив"title": "[предпочитаемое вами название]"в верхней части файла.
Например, вот (сокращенное) содержание одного из вариантов стиля, с которым поставляется Twenty Twenty-Three:
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"title": "Canary",
"settings": {
"color": {
"duotone": [
{
...
}
],
"palette": [
...
]
},
"layout": {
"wideSize": "650px"
},
"typography": {
"fontSizes": [
...
]
}
},
"styles": {
"blocks": {
...
},
"elements": {
"button": {
...
},
"h1": {
"typography": {
"fontSize": "var(--wp--preset--font-size--small)"
}
},
"h2": {
"typography": {
"fontSize": "var(--wp--preset--font-size--small)"
}
},
"h3": {
"typography": {
"fontSize": "var(--wp--preset--font-size--small)"
}
},
"h4": {
"typography": {
"fontSize": "var(--wp--preset--font-size--small)"
}
},
"heading": {
"typography": {
"fontWeight": "700"
}
},
"link": {
"typography": {
"textDecoration": "none"
}
}
},
"typography": {
"fontFamily": "var(--wp--preset--font-family--ibm-plex-mono)",
"fontSize": "var(--wp--preset--font-size--small)"
}
}
}Это theme.json для стиля темы «Canary». Как вы можете видеть, он вводит новые дуотоны и цветовую палитру, настраивает ширину макета и размер шрифта. Он также настраивает стилистику для нескольких блоков и элементов, таких как кнопки, заголовки и ссылки. В завершение изменяется размер шрифта общей темы.
Всего этого достаточно, чтобы довольно сильно изменить внешний вид темы:
При этом файл вариации темы делает все это примерно в 250 строках разметки, в то время как оригинальный theme.json Twenty Twenty-Three занимает более 700 строк.
Кстати, еще один вариант создания вариаций тем — использовать вышеупомянутый плагин Create Block Theme. Он имеет возможность экспортировать ваш текущий измененный дизайн в качестве вариации для использования на других сайтах.
Изменение стиля отдельных блоков
Выше мы уже показывали, как можно изменять отдельные блоки. Чтобы формально упомянуть об этом здесь в более общем виде, вы можете изменять единичные блоки в настройках и стилях, каждый из которых находится под блоками.
{
"version": 2,
"styles": {
"blocks": {
"core/paragraph": {
"typography": {
"letterSpacing": "-0.019rem"
"textTransform": "uppercase"
}
}
}
}
}Вот как выглядит приведенная выше разметка в действии:
Можно нацеливать блоки через core/blockname, например, core/paragraph для блока paragraph. Названия всех основных блоков можно найти здесь.
Добавление частей шаблона и шаблонов
Последнее, о чем мы хотим поговорить в плане изменения тем блоков через theme.json, — это возможность добавлять шаблоны и части шаблонов. Вы найдете их в качестве опций в редакторе сайта, если нажмете на логотип WordPress в левом верхнем углу.
Естественно, чтобы они отображались в теме, их нужно где-то зарегистрировать, что и происходит в файле theme.json. Точное местоположение находится в разделах templateParts и customTemplates. Они располагаются на базовом уровне файла, то есть так же, как и версия.
{
"version": 2,
"customTemplates": [
{
"name": "blog-alternative",
"postTypes": [
"page"
],
"title": "Блог (альтернатива)"
},
{
"name": "404",
"postTypes": [
"page"
],
"title": "404"
}
],
"templateParts": [
{
"area": "header",
"name": "header",
"title": "Header"
},
{
"area": "footer",
"name": "footer",
"title": "Footer"
},
{
"area": "uncategorized",
"name": "comments",
"title": "Комментарии"
}
]
}Каждая запись в разделе templateParts содержит три ключа:
name— Это имя/слог файла для этой части шаблона, например, если вы ввели «small-header», ваш файл должен называтьсяsmall-header.html.area— Это важно для того, чтобы редактор сайта знал, куда назначить каждую часть.templatePartsзнает три области:header,footerиuncategorized. Если вы не укажете ни одну из первых двух, часть шаблона по умолчанию будет соответствовать последней.title— это название части шаблона, видимое в редакторе, убедитесь, что оно описательное.
Объекты в разделе customTemplates также имеют три атрибута:
name— То же, что и дляtemplateParts. Должен соответствовать имени связанного HTML-файла.title— То же, что и выше, отображается в редакторе.postTypes— Массив типов сообщений, которые поддерживает данный пользовательский шаблон, напримерpostилиpage.
Пользовательские шаблоны и файлы частей шаблона должны быть размещены в папках templates и parts в директории темы соответственно. Вы должны создать их из блочной разметки, что также можно сделать, создав их в визуальном редакторе и экспортировав. Подробнее об этом здесь.
Генераторы WordPress theme.json
Если вы хотите создать свой собственный theme.json, ниже приведены полезные инструменты, которые помогут вам ускорить этот процесс. Они позволяют просто выбрать настройки и стили из визуального пользовательского интерфейса, а затем загрузить или скопировать соответствующий файл theme.json в вашу тему.
- Генератор тем блока ThemeGen
- Генератор theme.json для WPTurbo
Ресурсы
Для получения дополнительной информации о JSON и о том, как использовать его в блочных темах WordPress, ознакомьтесь с этими ресурсами:
Готовы к изменению блочных тем WordPress с помощью JSON?
Модификация блочных тем сильно отличается от работы с классическими темами. Вместо functions.php и style.css большая часть работы происходит в файлах theme.json и HTML.
Поначалу это может немного пугать, особенно если вы не знакомы с JSON. Однако, как вы, вероятно, видели выше, разметка довольно проста для понимания и привыкания. Кроме того, она предлагает мощный способ кардинально изменить внешний вид и поведение вашей темы.
Надеемся, что благодаря приведенным выше примерам вы почувствуете себя способным реализовать некоторые из них самостоятельно.
А вы уже изменяли свою тему WordPress с помощью разметки JSON?
Медленная админка WordPress?
Узнайте 15 способов как ускорить бэкенд панели управления сайтом wp-admin. Как увеличить производительность dashboard панели
Переведено с сайта Torquemag