Ваше простое руководство по глобальным стилям WordPress и вариациям глобального стиля

С помощью этого поста мы продолжаем серию редактирования сайта. Сегодня мы глубоко погружаемся в глобальные стили WordPress. Global Styles - это относительно новая функция в WordPress, представленную с полным редактированием сайта. Используя один набор правил стиля, эта система позволяет устанавливать и контролировать общую эстетику и макет сайта.

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

Эволюция настройки WordPress: Путешествие от настройки к глобальным стилям

Если вы новичок в WordPress, вам может быть интересно увидеть график ключевых этапов WordPress в более мощных настройках:

1. WordPress 3.4, 2011: ранняя настройка с настройщиком
   WordPress представила Customizer в версии 3.4, которая была выпущена в 2011 году. Этот инструмент дал пользователям просмотр изменений дизайна, позволяя им настраивать основные элементы, такие как цвета, шрифты и параметры макета. Несмотря на то, что в то время это был мощный инструмент для настройки, настройщик все еще был ограничен в своих возможностях.
2. WordPress 5.0, 2018: переход к полному редактированию сайта WordPress (FSE)
   Редактор Block Gutenberg был запущен в 2018 году с выпуска WordPress 5.0. Это крупное обновление позволило пользователям редактировать весь свой сайт, используя блоки, от заголовков до нижних колонтитулов. Этот сдвиг открыл новые возможности дизайна сайта, но выявил необходимость в более продвинутом инструменте настройки. Рассмотрим этот период как начало сдвига к полноценному редактированию.
3. WordPress 5.9, 2022: введение глобальных стилей WordPress
   Наконец, WordPress 5.9 представил глобальные стили в рамках полноценных функций редактирования. Используя этот новый интерфейс, пользователи могут управлять типографикой, цветами, макетами и стилями блоков во всем мире. Глобальные стили заменили настройку для блок -тем, и его главная цель состояла в том, чтобы централизовать все элементы управления, чтобы пользователи могли легко поддерживать сплоченный вид на своих сайтах.
4. WordPress 6.0+, 2023 и позже: глобальные стили как новый стандарт
   WordPress 6.0, выпущенная в 2023 году, глобальные стили стали стандартом для настройки блок -тем. Все улучшения в управлении типографикой, параметры градиента и настройки расширенного макета обеспечили еще большую поддержку для настройки по всему сайту.

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

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

Во -вторых, вы должны использовать блок -тему. В этом уроке я буду использовать Prime, бесплатную тема стартера WordPress MotoPress, которая полностью поддерживает полноценное редактирование. Вы можете скачать Prime с нашего официального веб -сайта или на wp.org.

30 октября 2024 года

20 лучших тем FSE, чтобы начать работу с Modern WordPress

4 июня 2024 года

RAFT против Ollie vs Prime: Какая лучшая тема блока для WordPress FSE?

Поиск глобальных стилей

Перейдите к внешнему виду> Редактор в меню администратора, чтобы найти настройки глобальных стилей. Дождитесь загрузки основного экрана, затем выберите появившуюся страницу. Нажмите на значок стилей в правом верхнем углу, который напоминает наполовину заполненный круг.

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

Некоторые темы, такие как Prime или двадцать двадцать пять, включают различные вариации стиля. Думайте о вариациях стиля как об игровой площадке.

Они позволяют экспериментировать с различными шрифтами, цветами, настройками типографии, интервалом, стилями блоков и многим другим. Варианты стиля - это альтернативные версии вашей блок -темы, вы можете легко поменять их на свежий вид. Если вы не видите вариант «Стиль просмотра», не волнуйтесь - у вас все равно будет доступ к предопределенным цветовым палитрам, созданным автором темы.

Типография

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

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

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

Для ссылок вы найдете те же настройки, что и для текста, но с дополнительной опцией украшения, которая включает в себя удар и подчеркивает.

Некоторые элементы имеют дополнительные настройки. Например, заголовки позволяют выбрать уровень заголовка. Расстояние между буквами позволяет контролировать пространство между символами. Кроме того, вы можете выбрать текстовые преобразования, такие как все Caps (AB), первая буква капитализирована (AB) и все строчные (AB).

Затем вы можете настроить типографику для подписей, которые используются в блоках изображения и обложки.

И последнее, но не менее важное, кнопки. Поскольку кнопки включают текст, вы можете легко настроить их настройки типографии, как и любой другой текстовый элемент.

Цвета

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

Вы также можете добавить пользовательские цвета в палитру вашего сайта и сделать их доступными в ваших цветовых настройках. Чтобы добавить один, нажмите кнопку + под пользовательским, затем выберите оттенок, используя цветовой сборщик или введите значение HEX, RGB или HSL. По умолчанию новый цвет обозначен Color 1, но вы можете переименовать его, нажав его. Нажмите «Сделано», чтобы сохранить.

Если вы не удовлетворены своим пользовательским цветом, удалите его и начните все сначала.

Вы также можете переключиться на вкладку «Градиенты», чтобы добавить параметры цвета градиента. Как и сплошные цвета, вы можете установить темы, по умолчанию и пользовательские градиенты. Нажатие на градиент открывает слайдер, который позволяет настроить его. Линейные градиенты создают плавный переход между двумя цветами вдоль прямой линии. Радиальные градиенты начинаются с центра и простираются наружу. Если вы выберете Linear, вы можете вручную отрегулировать угол градиента, введя значение в поле.

Другим вариантом является Duotone Filter, двухцветный цветовой эффект, которые пользователи могут применить к изображениям в блоках изображения и покрытия.

Как только вы закончите настроить свои палитры, мы можем вернуться на панель Colors. Под разделом палитры вы найдете варианты редактирования цвета для:

• Текст
• Фон
• Ссылки
• Подписи
• Кнопки
• Заголовки

Фон и тени

Знаете ли вы, что добавление фонового изображения на ваш сайт является еще одним вариантом? Просто нажмите кнопку «Добавить фоновое изображение» и загрузите изображение или выберите его из медиа -библиотеки. Конечно, вы можете нажать «Сбросить», чтобы избавиться от этого одновременно.

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

Макет

Панель макета позволяет управлять шириной области содержания вашего сайта.

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

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

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

17 февраля 2025 года

Как экспортировать тему блока WordPress: пошаговое руководство

27 января 2025 года

Как создать тему блока WordPress (без кода)

Измените стиль определенных блоков

Наконец, давайте посмотрим на блоки. В разделе блоков перечислены все доступные блоки, которые вы можете настроить по всему сайту. Любые изменения, которые вы вносите здесь, повлияют на все экземпляры этого блока на вашем сайте, если вы не настраиваете отдельный блок отдельно. Доступные параметры настройки варьируются в зависимости от блока. Исследуйте каждого, чтобы увидеть, что можно изменить.

Как просмотреть ваши изменения

Чтобы просмотреть свои изменения, используйте книгу в стиле WordPress (значок глаз). Окно предварительного просмотра книги «Стиль» содержит шесть вкладок, показывая, как разные блоки будут применяться после применения ваших глобальных изменений в стиле. Нажатие на блок предварительного просмотра перенесет вас непосредственно к глобальным стилям этого блока для дальнейшей настройки.

Дополнительные настройки

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

1. Нажмите на меню «Три-точка» в верхнем правом углу.
2. Выберите дополнительные CSS.
3. Введите свой пользовательский CSS в предоставленную коробку.

Эта функция обеспечивает еще более тонкий контроль над вашими стилями.

Сброс в стилях по умолчанию

Если вы хотите вернуться к внешнему виду по умолчанию, используйте функцию ревизий:

1. В настройках стилей нажмите меню «Трехлеть» в верхнем правом углу.
2. Выберите стили сброса.

Как только изменения были сохранены, параметр «Ревизии» позволяет восстановить предыдущие версии настройки ваших стилей.

Что нового в WordPress 6.7

Теперь, в качестве бонуса, давайте быстро рассмотрим некоторые улучшения глобальных стилей, доступных с WordPress 6.7 или более.

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

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

Более того, есть новые элементы управления пользовательским интерфейсом. Чтобы быть более точным, пользователи теперь могут добавлять фоновые изображения к большему количеству блоков, включая стихи, цитату и публикацию контента. Это означает, что вы можете создавать визуально привлекательные разделы даже без применения пользовательских CSS. Более того, WordPress 6.7 представляет опцию с фиксированным фоном, идеально подходящую для создания параллаксоподобного эффекта (эффект, который позволяет изображениям оставаться на месте во время прокрутки пользователей).

С этими обновлениями WordPress 6.7 позволяет просто создавать хорошо продуманные веб-сайты, даже не пишущая код.

Заключение по глобальным стилям WordPress

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

Часто задаваемые вопросы