Хотите ли вы добавить пользовательские стили к виджетам WordPress?
Стилизация виджетов позволит вам сохранить единообразие вашего брендинга и выделить важную информацию для ваших пользователей.
В этой статье мы покажем вам, как легко добавить пользовательские стили к виджетам WordPress, не ломая ваш сайт.
Мы покажем вам три способа добавления пользовательских стилей к виджетам WordPress. Вы можете выбрать тот, который подходит вам больше всего.
- Добавление пользовательских стилей к виджетам WordPress с помощью редактора блоков
- Добавление пользовательских стилей к классическим виджетам в WordPress
- Добавление пользовательских стилей к виджетам WordPress с помощью CSS Hero (без кода)
Прежде чем мы начнем, эта статья требует некоторых знаний CSS, чтобы вы могли стилизовать виджеты. Вам также потребуется добавить пользовательский CSS в вашу тему WordPress.
Если вы предпочитаете метод без кода вместо CSS, вы можете перейти к методу 3.
Давайте начнем.
Добавление пользовательских стилей к виджетам WordPress с помощью редактора блоков
Виджеты WordPress теперь используют редактор блоков для добавления виджетов и блоков в области с поддержкой виджетов и боковые панели.
Одним из преимуществ использования блочного редактора для виджетов является то, что вы можете легко добавить пользовательские CSS классы к каждому блоку.
Просто перейдите в раздел Внешний вид » Виджеты перейдите на страницу и нажмите на виджет, к которому вы хотите добавить пользовательские стили.
Далее вам нужно прокрутить вниз до вкладки «Дополнительно» на панели блоков. Отсюда вы можете добавить пользовательский класс CSS.
Не забудьте сохранить изменения, нажав на кнопку «Обновить».
Теперь вы можете добавить пользовательский CSS в вашу тему WordPress, ориентируясь на этот конкретный класс CSS.
Просто перейдите в раздел Внешний вид » Настроить страницу и переключиться на вкладку Дополнительный CSS. Там вы увидите живой предварительный просмотр вашего сайта с полем для добавления ваших правил CSS.
Примечание: Если вы не можете увидеть Customize в меню Appearance, то посмотрите нашу статью о том, как исправить отсутствие настройки темы в админке WordPress или используйте плагин WPCode для добавления пользовательского CSS.
Вот некоторые базовые CSS, которые мы использовали.
.latest-articles
После добавления пользовательского CSS вы можете предварительно просмотреть свой сайт, чтобы увидеть его в действии.
Проблема с использованием виджетов редактора блоков заключается в том, чтобы найти нужный блок.
Проще было бы добавить блоки в блок Group, чтобы легко стилизовать их вместе. Вы можете прочитать больше о группировке блоков в нашем руководстве о том, как использовать редактор блоков WordPress.
Добавление пользовательских стилей к классическим виджетам в WordPress
Этот метод предназначен для вас, если вы используете старые классические виджеты на своем сайте WordPress.
Для этого метода вам нужно установить и активировать плагин Widget Options. Для более подробной информации смотрите наше пошаговое руководство по установке плагина WordPress.
Widget Options — это мощный плагин, который добавляет дополнительные опции к вашим виджетам WordPress. Это включает возможность показывать и скрывать виджеты в зависимости от устройства пользователя, его роли и других условий.
Плагин также добавляет возможность добавлять пользовательские классы CSS к виджетам WordPress.
Просто перейдите в раздел Внешний вид » Виджеты откройте страницу и нажмите на виджет, в который вы хотите добавить пользовательский стиль.
В настройках виджетов вы увидите расширенный набор опций. Здесь вам нужно нажать на значок шестеренки, чтобы добавить свой пользовательский CSS-класс.
Как только вы закончите, не забудьте нажать на кнопку Сохранить, чтобы сохранить настройки виджета.
Теперь вы можете добавить пользовательское правило CSS в вашу тему, используя класс CSS, который вы только что ввели. Например, мы использовали следующий CSS на нашем тестовом сайте.
.latest-articles
Вот как это выглядело на нашем тестовом сайте.
Применение пользовательских стилей к виджетам WordPress с помощью CSS Hero
Одна проблема с двумя вышеуказанными методами заключается в том, что вам необходимо написать код CSS. Однако не все пользователи знают CSS или просто не хотят писать код самостоятельно.
В этом случае вы можете использовать CSS Hero. Это плагин WordPress, который позволяет добавлять пользовательские CSS в вашу тему WordPress без написания кода.
Во-первых, вам нужно установить и активировать плагин CSS Hero. Для более подробной информации смотрите наше пошаговое руководство о том, как установить плагин WordPress.
После активации плагин добавит новый пункт меню на панель инструментов администратора WordPress в верхней части страницы.
Далее вам нужно посетить страницу, на которой находится виджет, который вы хотите стилизовать, и нажать на кнопку CSS Hero вверху.
Откроется страница в интерфейсе редактора CSS Hero.
Это живой редактор, в котором вы можете просто навести курсор на любой элемент вашего сайта и изменить его стиль.
Просто подведите курсор к виджету, который вы хотите стилизовать, и нажмите, чтобы выбрать его.
После этого вы можете использовать меню слева, чтобы стилизовать свой виджет так, как вы хотите.
Сюда входят расширенные возможности стилизации, такие как градиенты, типографика, отступы, поля и границы.
Как только вы закончите, не забудьте нажать кнопку Сохранить, чтобы сохранить ваши настройки.
Теперь вы можете предварительно просмотреть свой сайт, чтобы увидеть изменения в действии.
Надеемся, что эта статья помогла вам узнать, как добавить пользовательские стили к виджетам WordPress. Вы также можете посмотреть нашу подборку самых полезных виджетов WordPress для всех сайтов или наше руководство по созданию пользовательской темы WordPress с нуля без написания кода.
Источник: www.wpbeginner.com