Як редагувати CSS у WordPress

🗓️ Оновлено: 17.08.2022
💬Коментарів: 0
👁️Переглядів: 1811

Як додати свої стилі до WordPress або редагувати існуючі? Дуже просто! Є кілька способів, як це зробити.

Перший спосіб (неправильний!)

Найчастіший варіант, як люди редагують стилі в шаблоні, це коли вони просто переходять в адмінці в розділ Вигляд -> Редактор тем і там знаходять файл style.css, куди і вставляють свій CSS код.

Як не потрібно редагувати CSS код у WordPress

Натискаєте кнопку “Оновити файл” і ось ви додали свій css код в WordPress. Але чому так не можна робити? Тому що при наступному оновленні теми (а оновлювати шаблони потрібно!), всі зміни, які ви внесли, пропадуть.

Що ж робити? Ви можете створити дочірню тему та там редагувати файл css стилі. Як це зробити ми розписали у цій статті.

Також не варто редагувати файл style.css батьківської теми через менеджер файлів на хостингу або через FTP. Причина все та ж – після оновлення шаблону ваш код буде видалено.

Другий спосіб

Цей варіант правильніший. WordPress дає можливість редагувати CSS у вбудованому спеціальному редакторі. Як це зробити?

  1. Виберіть в адмін панелі вкладку “Вигляд -> Налаштувати”;
  2. Далі в лівому меню знайдіть вкладку “Додаткові код CSS” (зазвичай у самому низу);
  3. Вставте потрібний вам CSS код і не забудьте натиснути кнопку “Опублікувати” вгорі.

ВАЖЛИВО! Ці стилі будуть зберігатися тільки для поточної теми. Тобто, якщо ви вирішите змінити шаблон, ваш CSS код перестане працювати.

Але, повторимося, найправильнішим на нашу думку способом редагування css коду WordPress є створення дочірньої теми і додавання/зміна стилів вже в ній.

Стаття була корисною?
👍
Так - 5
👎
Ні - 2
💬Коментарі:

CSS Головоломки в Telegram
Підписуйся і не пропускай:
Актуальні новини
Цікаві завдання
Корисні добірки
Наш рейтинг
🏆Найкращий хостинг для сайту
9/10
8/10
8/10
4
8/10
8/10
7/10
7/10
Что читают?
🏆Популярные записи
Як зробити гамбургер (бургер) меню – готовий код та докладне пояснення
Переглядів: 56414
Як зробити плавне збільшення картинки при наведенні – ефект на чистому CSS
Переглядів: 42572
Поява елементів при скролі
Переглядів: 41858
Як змінити колір SVG у CSS
Переглядів: 29083
Як вирівняти картинку по центру за допомогою CSS
Переглядів: 25882
Перевірка знань
🤔Чи добре ви знаєте CSS?
Есть два блочных элемента, которые идут друг за другом в html. Какой будет оступ (margin) между ними, если задать им такие стили:

.top {
  height: 30px;
  background-color: blue;
  margin-bottom: 10px;
}
.bottom {
  height: 30px;
  background-color: red;
  margin-top: 20px;
}
    
10px
20px
30px
Viva Magenta
🤔Колір 2023 року
Дослідницький інститут Pantone обрав головний колір 2023 року. Ним став карміново-червоний відтінок із фіолетовим підтоном, який назвали Viva Magenta.
#bb2649