Коли в редакторі 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»