Расшифровка WordPress: Введение в глобальные стили

Блоки WordPress и функции полноценного редактирования сайта (FSE) делают создание и стилизацию успешного сайта быстрым и легким.

Глобальные стили могут помочь вам унифицировать внешний вид вашего сайта на WordPress без необходимости редактирования отдельных блоков или страниц. Так что, будь то изменение цвета фона или корректировка типографики заголовков, вы сможете вносить свои изменения в одном месте, что приведет к более гармоничному и в целом лучшему пользовательскому опыту (UX).

В этом посте мы расскажем вам о Глобальных Стилях. Мы объясним, что это такое, каковы их преимущества и как работают новые функции. Затем мы обсудим, как использовать их для стилизации вашего сайта на WordPress. Начать сейчас!

Обзор глобальных стилей WordPress

Перед работой с Глобальными стилями важно понять, что они собой представляют и как функционируют. Эта функция работает в сочетании с theme.json, новым файлом настроек темы. Разработчики могут использовать theme.json для определения настроек по умолчанию для сайта, а также отдельных блоков. Gutenberg автоматически применяет этот JSON, когда вы помещаете файл в корневой каталог темы на основе блоков.

Этот файл является одним из самых полезных инструментов нового полноценного редактора сайтов в WordPress 5.9. Файл позволяет авторам тем делиться глобальными стилями и глобальными настройками. WordPress переформатирует данные, полученные из этих JSON объектов, и превращает их в CSS. Затем пользователи могут дополнительно настраивать стили в редакторе WordPress.

В предыдущих версиях плагина Gutenberg, вы должны были зарегистрировать поддержку стилевых свойств блока, прежде чем вы могли начать работать с ними в theme.json. Также в классических темах и старых версиях вам нужно было использовать PHP для определения таких вещей, как выбор цвета и шрифтов. Затем вам необходимо было добавить стили для frontend и backend сторон вашей темы.

Тем не менее, с последним обновлением, когда вы используете тему с файлом theme.json, WordPress автоматически добавляет стили, определенные там, в вашу таблицу стилей. Вы можете использовать эту систему, чтобы добавить совершенно новые цветовые палитры, изменить типографику тем и многое другое.

Зачем использовать глобальные стили WordPress

Независимо от уровня ваших навыков, использование Глобальных стилей, скорее всего, будет интуитивно понятным и доступным. В общем, это может упростить процесс веб-дизайна, делая проще изменение внешнего вида и ощущений вашего сайта. Если вы новичок в WordPress, использование этих Глобальных стилей может означать, что вам не потребуется нанимать разработчика для того, чтобы разработать ваш сайт. Извините, разработчики.

С другой стороны, эта новая функция может быть особенно полезной для разработчиков тем. Это связано с тем, что Global Styles помогает разработчикам WordPress стилизовать блоки в Редакторе блоков. Это может быть очень выгодно, особенно для новых авторов тем. Она предлагает разнообразие контролов, которые уменьшают необходимость создания пользовательских решений для стилизации сайта.

Другими словами, Global Styles значительно упрощает разработку тем. В результате это может помочь разработчикам избежать разрушительных ошибок в дизайне.

Создание файла theme.json

Файл theme.json содержит две важные части: настройки и стили. Настройки относятся к списку глобальных или контекстных конфигурационных значений, которые определяют поведение редактора и блоков. Например, они влияют на то, какие элементы управления включены по умолчанию, какие элементы управления скрыты из пользовательского интерфейса (UI), доступная палитра цветов, настройки типографики и т.д.

Styles определяет язык дизайна темы и позволяет авторам темы определять элементы, такие как:

• Размер шрифта
• Высота строки
• Цвета фона
• Цвета ссылок

Если вы хотите создать файл theme.json, вы можете создать новый файл с таким именем и затем поместить его в корневую папку вашей темы. Все содержимое вашего файла должно быть вставлено внутри двух фигурных скобок: { }.

Далее, вы будете использовать имена свойств и значения в двойных кавычках, разделенные двоеточием, например:

{

"property-name": "значение"

}

Имя свойства может быть либо настройкой, либо названием блока. Ниже приведен пример очень простого файла theme.json:

{

    "version": 1,

    "settings": {},

    "styles": {},

    "customTemplates": {},

    "templateParts": {}

}

Версия 1 формата theme.json является самой ранней и стабильной версией. Однако с WordPress 5.9 начинает использоваться версия 2. В то время как раздел версии должен быть первым после открывающей фигурной скобки, последующие разделы можно располагать в любом порядке.

Как мы уже упоминали, два основных раздела файла – это Настройки и Стили. Давайте более подробно рассмотрим предустановки для каждого из них.

Наборы настроек

Пресеты относятся к стандартным элементам управления, а также к любым пользовательским свойствам CSS и генерируются на основе значений в theme.json. Некоторые из основных категорий пресетов включают:

• Цвет
• Типографика
• Компоновка
• Отступы

Категории также могут иметь подкатегории. Например, подкатегория категории Цвет может быть Палитра цветов:

{

"версия": 2,

"настройки": {

"цвет": {

"палитра": [

{

Каждый пресет также создает пользовательское CSS-свойство с использованием конвенции именования “–wp–preset–{preset-category}–{preset-slug}”.

Существует множество шаблонов и примеров, которые вы можете использовать для создания вашего файла theme.json, поэтому мы не будем рассматривать все их здесь. Однако вы можете обратиться к Руководству WordPress для получения более подробной информации.

Предустановки стилей

Предустановки стилей контролируют стили объектов внутри блоков. Например, следующее может быть способом использования шестнадцатеричного значения для фона и глобальной предустановки стилей для цвета текста:

{

        "версия": 2,

"настройки": { ... },

"стили": {

"цвет": {

"фон": "#FBF",

"текст": "var(--wp--preset--color--purple)"

}

}

}

Если бы мы хотели изменить цвет заголовка блока, это выглядело бы примерно так:

{

        "version": 2,

"settings": {...},

"styles": {

...,

               "blocks": {

             "core/heading": {

     "color": {

      "text": "var(--wp--preset--color--blue)"

     }

Снова, существует почти бесконечное количество примеров и способов использования предустановок для стилей блоков. Вы можете обратиться к документации WordPress для полного разбора.

Существуют также разделы Шаблоны и части шаблонов. Они включают базовые файлы вашей темы, такие как index.html, а также разделы для организации и структурирования вашей темы.

Как стилизовать ваш сайт на WordPress с помощью глобальных стилей

Если вы ищете простой в использовании способ применения Глобальных Стилей для оформления вашего сайта, вы можете использовать интерфейс Глобальных Стилей с темой блока WordPress. Обратите внимание, что доступ к интерфейсу Стилей будет только с WordPress 5.9 или выше.

Выбор темы на основе блоков

Во-первых, вам понадобится тема на базе блоков. Чтобы найти её, вы можете перейти в Каталог тем WordPress из вашей административной панели, пройдя в Внешний вид > Темы > Добавить новую. Затем вы можете кликнуть на Фильтр функций и выбрать Редактирование всего сайта, после чего нажать Применить:

Когда вы найдете тему WordPress, которая вам нравится, вы можете навести на неё курсор, затем выбрать Установить, а после Активировать. Мы будем использовать Twenty Twenty-Two, которая может быть уже установлена, если вы используете WordPress 5.9 или новее.

Доступ к интерфейсу стилей

Далее перейдите в редактор тем (Внешний вид > Редактор). В правом верхнем углу экрана вы увидите полузатененный круг, который представляет панель стилей:

Когда вы впервые нажмете на это, появится Руководство по стилям. Если вам потребуется доступ к этому в будущем, вы можете найти его, нажав на три вертикальные точки в правом верхнем углу и выбрав Руководство по стилям.

Окно предварительного просмотра показывает, как выглядит текущий стиль вашей темы. В панели Стили вы найдете настройки для:

• Типографика
• Цвета
• Макет
• Блоки

Давайте рассмотрим каждый из них поподробнее.

Типографика

В разделе Typography вы можете управлять настройками типографики для двух элементов: Text и Links.

Вы можете изменить семейство шрифтов и размер:

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

Цвета

Под Colors, вы найдете стандартные цветовые пресеты, которые идут в комплекте с вашей темой. Чтобы создать свои собственные цветовые палитры, вы можете ввести числа значений HEX или использовать конструктор цветов drag-and-drop для генерации предпочитаемых цветов:

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

Затем вы можете изменить цвета для трех основных элементов: Фон, Текст и Ссылки. Вы также можете выбрать любой из этих элементов для настройки стиля. Изменения будут применены мгновенно во время редактирования.

Макет

В разделе Layout вы можете настроить отступы и другие элементы. Это просто и может быть очень полезным, когда вам нужно сделать небольшую корректировку (например, ради симметрии страницы).

Блоки

Наконец, вы можете изменить внешний вид отдельных блоков. После того как вы выберете Блоки в панели стилей, вы найдете список блоков на вашем сайте.

Допустим, вы хотите изменить стиль вашего блока заголовка. Вы можете выбрать Heading из списка, затем настроить его Colors и Typography настройки:

Когда вы закончите, вы можете нажать на Сохранить. Если вы захотите вернуться к стилям темы, которые были до внесения изменений, вы можете перейти на панель стилей, нажать на три вертикальные точки, а затем выбрать Сбросить настройки.

Лучший способ использования и стилизации WordPress

WordPress постоянно работает над улучшением процесса редактирования для своих пользователей. Теперь благодаря Global Styles разработка тем стала гораздо проще как для начинающих, так и для опытных профессионалов.

Как обсуждалось в этом посте, вы можете создать файл theme.json, чтобы применить конфигурации глобальных стилей к вашей теме. Вы также можете использовать редактор стилей с блочной темой, чтобы настроить внешний вид вашего сайта. Всё это делает процесс создания успешного сайта очень простым.

DreamHost — это команда опытных специалистов в области интернет-технологий. Мы понимаем важность оптимизации вашего опыта работы с WordPress. Мы обещаем поддерживать ваши усилия, используя последние технологии open-source и награжденную поддержку. Посмотрите наши тарифные планы управляемого хостинга WordPress сегодня, чтобы узнать больше!