Як додати користувальницький CSS в WordPress: 4 методи для різних цілей

У міру того, як ви будете більше знайомитися з WordPress, ви майже напевно захочете додати хоча б трохи користувача CSS на свій сайт. Але додавання користувача CSS в WordPress може бути трохи складним, тому що не рекомендується просто редагувати таблицю стилів батьківської теми і вставляти свій код прямо туди.

Щоб допомогти вам правильно додати користувальницький CSS до WordPress, ми поділимося чотирма різними способами.

Спосіб 1: Використання WordPress Customizer (Налаштувач)

Почнемо з WordPress Customizer, тому що це найдоступніший метод.

Плюси використання WordPress Customizer для CSS

• Вам не потрібно налаштовувати чи встановлювати плагін. Це частина ядра WordPress.
• Ви можете побачити свої зміни користувача CSS в режимі попереднього перегляду вашого сайту в режимі реального часу.
• Він включає базову перевірку, щоб переконатися, що ви нічого не зіпсували.

Недоліки використання WordPress Customizer для CSS

Будь-який користувач CSS, який ви додаєте, прив'язаний до вашої теми. Тому, якщо ви змінюєте теми, потрібно скопіювати свій власний CSS.

Як використовувати WordPress Customizer для CSS

Запустіть інтерфейс Customizer WordPress, перейшовши в Зовнішній вигляд → Налаштувати на панелі інструментів WordPress:

Потім натисніть опцію Добавить CSS на бічній панелі WordPress Customizer (вона має бути внизу):

Тепер просто додайте свій CSS-код у вікні. Якщо ви зіпсуєте синтаксис, редактор попередить вас про помилки:

Коли закінчите додавати CSS, натисніть «Опублікувати»щоб зміни збереглися в реальному часі.

Дивіться також:

5 правок у CSS, які допоможуть новачкові покращити зовнішній вигляд свого блогу

Спосіб 2. Використання безкоштовного плагіна простий CSS

Плюси використання плагіна Simple CSS

• Ви можете додати CSS за допомогою WordPress Customizer для перегляду в реальному часі.
• Плагін включає окремий повнофункціональний редактор CSS поза WordPress Customizer.
• Ви можете додати CSS користувача до окремих записів або сторінок.
• Всі додані CSS не залежать від теми. Тому навіть якщо ви перемикаєте теми, ваш CSS все одно буде там.

Недоліки використання Simple CSS

Відсутня перевірка коду, подібна до методу Customizer WordPress.

Як використовувати плагін простий CSS

Після встановлення та активації плагіна існує кілька різних способів додавання користувача CSS в WordPress.

По-перше, ви можете перейти в Зовнішній вигляд → Налаштувати та використовувати параметр Simple CSS. Це дасть вам попередній перегляд ваших змін CSS, як і попередній метод:

По-друге, ви можете перейти в Зовнішній вигляд → Simple CSS, щоб використовувати повний редактор. Код цього редактора в області Simple CSS буде ідентичний коду в WordPress Customizer:

Нарешті, ви також можете додати користувача CSS в окремий запис або сторінку через новий мета-код Simple CSS в редакторі WordPress:

Загалом, Простий CSS плагін – наш улюблений метод додавання базових CSS-налаштувань.

Дивіться також:

Редагуємо CSS-стилі вашої теми WordPress на льоту за допомогою плагіну CSS Hero

Спосіб 3: Використовуйте стилі для своєї дочірньої теми

Якщо потрібно додати багато користувацьких CSS, а не просто кілька налаштувань тут і там, вам краще використовувати таблицю стилів теми.

Але не можна помістити власний CSS в таблицю стилів своєї батьківської теми, тому що він перезаписуватиметься щоразу, коли ви оновлюєте тему.

Натомість вам потрібно використовувати дочірню тему. Таким чином, ваш власний CSS залишиться незмінним навіть при оновленні батьківської теми.

Плюси використання дочірньої теми

Добре для додавання великої кількості CSS (наприклад, 1000 рядків і більше).

Недоліки використання дитячої теми

• Немає попередніх переглядів у WordPress Customizer, як у попередніх двох методах.
• Не так зручно, як два інші методи загалом.
• Ваш власний CSS прив'язаний до вашої теми, тому вам потрібно буде перемістити його, якщо ви зміните тему.

Як використовувати дочірню тему для користувача CSS

Якщо ваша тема не включала дочірню тему, з якою ви можете працювати, використовуйте безкоштовний плагін для дочірньої теми  One-Click Child Theme.

Після встановлення та активації плагіна перейдіть на вкладку Зовнішній вигляд → Child Theme і:

• Введіть дані для імені, опису та автора.
• Натисніть Create Child.

Як тільки плагін створить вашу дочірню тему, він автоматично активує її. Потім ви можете перейти прямо до таблиці стилів вашої дочірньої теми:

Або можете отримати доступ до неї, перейшовши в Зовнішній вигляд → Редактор:

Як і метод WordPress Customizer, тут WordPress виконуватиме базову перевірку коду на будь-якому доданому CSS (це нещодавно додана функція).

Спосіб 4. Впровадження власного стилю користувача

Більшість користувачів WordPress не захочуть використати цей метод.

Але ми включили його, тому що деякі люди намагаються додати свою власну таблицю стилів, включивши її безпосередньо до розділу наступним чином:

Вищезгаданий метод – це не правильний спосіб зробити це у WordPress.

Натомість вам потрібно буде використовувати wp_enqueue_style, щоб додати таблиці стилів.

Наприклад, щоб додати таблицю стилів з ім'ям customstyles.css, яку ви завантажили в папку своєї теми, ви додайте цей фрагмент коду у ваш файл functions.php або плагін, такий як Фрагменти коду.

wp_enqueue_style ('customstyles', get_stylesheet_directory_uri(). '/customstyles.css');

Заключні думки про те, як додати користувальницький CSS до WordPress

Якщо ви просто хочете додати кілька бітів CSS, використання WordPress Customizer або плагіна Simple CSS безумовно буде найпростішим способом.

Якщо вам потрібно додати багато користувачів CSS (скажімо, більше 1000 рядків), вам може бути краще використовувати таблицю стилів вашої дочірньої теми.

Нарешті ви завжди можете встановити свою власну таблицю стилів.

Джерело: wplift.com

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, який спеціалізується на створенні сайтів на WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/