Когда в редакторе WordPress, настройках темы или плагина нет опции, чтобы изменить внешний вид нужного элемента, это можно сделать при помощи собственного CSS-кода. Например, добавить отступ, изменить цвет или поведение элемента при наведении.
В этой статье рассмотрим основные нюансы работы со своим CSS в WordPress: когда использовать существующий CSS-класс, а когда создать свой, как заранее протестировать код, какие есть способы его добавить и как разобраться, если изменения не работают.
Общий принцип
В двух словах алгоритм добавления своего CSS-кода такой:
- Находите текущий CSS-класс элемента или назначаете ему свой.
- Если хотите, тестируете CSS-код сначала в инспекторе браузера.
- Добавляете CSS-код в WordPress.
- Проверяете результат и при необходимости корректируете код.
Дальше разберём каждый шаг подробнее.
Как найти CSS-класс элемента
Использовать существующий класс удобно, если одинаковое изменение нужно применить ко всем элементам с этим классом. Например, у стандартного блока «Кнопка» в WordPress есть класс .wp-block-button. Правило для него затронет все такие блоки на сайте. Для точечных изменений лучше создать новый класс.
Чтобы посмотреть существующий CSS-класс, откройте нужную страницу сайта, кликните правой кнопкой мыши по нужному элементу и выберите «Исследовать», «Просмотреть код» или «Inspect» (в разных браузерах может быть по-разному).
Откроется обозреватель HTML-кода (по-другому его ещё называют «инспектор кода»). Найдите интересующий вас элемент (при наведении на код мышкой элемент будет подсвечиваться на сайте) и посмотрите значение атрибута class.
Если у вас окно инспектора открыто не по горизонтали, а как боковая панель, но вы бы хотели изменить его ориентацию, нажмите на троеточие в правом верхнем углу и выберите более удобное положение.
Как добавить элементу свой CSS-класс
Использовать собственные классы удобно, чтобы внести точечные изменения для одного или нескольких элементов.
Чтобы назначить блоку собственный класс, выберите его в редакторе, раскройте раздел «Дополнительно» на боковой панели и введите название в поле «Дополнительные классы CSS». Например, special-button. Точку перед названием класса в этом поле ставить не нужно.
Есть нюанс: собственный класс назначается самому блоку, а элемент, который нужно изменить, может находиться внутри него. Например, вы назначили блоку «Кнопка» класс special-button, а потом в инспекторе видите такую структуру:
<div class="wp-block-button special-button">
<a class="wp-block-button__link wp-element-button">Залишити заявку</a>
</div>
Класс special-button относится ко всему блоку, а сама кнопка находится внутри него и имеет класс wp-block-button__link. Чтобы изменить именно её, можно использовать такой селектор:
.special-button .wp-block-button__link {
border-radius: 0;
}
Здесь .special-button указывает на выбранный блок, а .wp-block-button__link — на кнопку внутри него. Несмотря на использование стандартного класса, изменения распространятся не на все кнопки, а только на те, которые находятся внутри блоков с вашим дополнительным классом.
Как протестировать CSS в инспекторе
Необязательно каждый раз добавлять код в WordPress, чтобы посмотреть результат. Вы можете сначала протестировать, что вам нужно, прямо в инспекторе браузера на панели со стилями справа от HTML-кода.
Вы можете отключать текущие свойства при помощи галочек, изменять их значения и даже добавлять новые свойства, если кликните мышкой по пустому месту сразу после последнего свойства.
Все изменения в инспекторе временные и исчезнут после обновления страницы.
В верхней части панели со стилями есть также кнопки :hov и .cls. Кнопка :hov позволяет временно включить псеводклассы, например :hover, :active или :focus для соответствующих элементов, а кнопка .cls позволяет добавить выбранному HTML-блоку новый класс.
Куда добавлять CSS-код
Есть три способа добавить CSS в WordPress: для всего сайта, для отдельной публикации, для конкретного блока. Подходящее место зависит от того, насколько широко должны действовать изменения.
CSS для всего сайта
В WordPress есть специальное поле «Дополнительный CSS». Код из него применяется ко всему сайту. Местонахождение этого поля зависит от того, какая у вас тема: классическая или блочная.
Статья на тему 👀
«Классические vs блочные темы для WordPress»
В классической теме откройте раздел «Внешний вид – Настроить – Дополнительный CSS».
В блочной теме перейдите в «Внешний вид – Редактор – Стили», нажмите кнопку с тремя точками в верхней части редактора и выберите «Дополнительный CSS».
Лайфхак
Используйте комментарии, чтобы быстро находить нужный фрагмент кода и всегда понимать, за что он отвечает. Текст между /* и */ браузер не выполняет. Его можно использовать для любых пояснений к коду.
Пример:
/* Кнопка в шапке */
.header-button {
border-radius: 0;
}
/* Ссылки в подвале */
.footer-links a {
text-decoration: none;
}
CSS для отдельной публикации
Если свой CSS должен работать только на одной странице или в одной записи, можно установить плагин, который добавит такую возможность. А именно — бесплатный плагин Spectra Legacy. Он добавит в редактор публикаций отдельную панель для кастомного CSS. Подробнее о других возможностях плагина читайте в нашей отдельной статье.
Статья на тему 👀
«Обзор плагина Spectra Legacy»
CSS для отдельного блока
Начиная с WordPress 7.0 свой CSS можно добавить непосредственно к отдельному блоку. Для этого выберите блок в редакторе, раскройте раздел «Дополнительно» на боковой панели и найдите поле «Дополнительный CSS».
В этом поле не нужно самостоятельно указывать CSS-класс блока. Можно сразу написать свойства:
border-radius: 0;
margin-top: 30px;
WordPress сам свяжет этот код с выбранным блоком. Поэтому такой способ удобен для небольших изменений, которые должны относиться только к одному элементу.
Не путайте это поле с «Дополнительными классами CSS», о которых мы рассказывали выше.
Что делать, если CSS не работает
Если вы добавили CSS, но внешний вид элемента не изменился, проверьте такие вещи:
Очистите кеш. Если на сайте работает кеширование, после изменения CSS некоторое время может отображаться старая версия страницы.
Проверьте класс. Откройте элемент через инспектор и убедитесь, что в коде указано правильное название.
Проверьте, к какому элементу относится свойство. Например, собственный класс может находиться на блоке-контейнере, а изменить нужно элемент внутри него. Структуру можно посмотреть в инспекторе.
Посмотрите, не перекрывает ли ваше правило другой CSS. В панели стилей инспектора перечёркнутое свойство означает, что вместо него браузер применяет другое правило. В этом случае попробуйте добавить к вашему коду правило !important. Например:
.special-button {
border-radius: 0 !important;
}
Но используйте !important только при необходимости. Если таких правил становится много, в дальнейшем будет сложнее переопределять стили и разбираться в коде.
Что дальше
Надеемся, эта статья помогла вам разобраться, как работать со своим CSS в WordPress. Если у вас остались вопросы, что-то не получается или вы нашли неточность в статье, оставьте комментарий. Мы его увидим и ответим.
Кстати с помощью собственного кода в WordPress можно менять не только внешний вид сайта. Например, PHP-сниппеты позволяют добавлять новые функции или изменять стандартное поведение WordPress без редактирования файлов темы. У нас есть две статьи на эту тему.
Статьи на тему 👀
«Как добавлять сниппеты кода в WordPress»
«Подборка готовых сниппетов для WordPress»