Как редактировать CSS в WordPress

🗓️ Обновлено: 17.08.2022
💬Комментариев: 0
👁️Просмотров: 587

Как добавить свои стили в WordPress или редактировать существующие? Очень просто! Есть несколько способов, как это сделать.

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

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

Как не нужно редактировать CSS код в WordPress
Как не нужно редактировать CSS код в WordPress

Нажимаете кнопку «Обновить файл» и вот вы и добавили свой css код в WordPress. Но почему так нельзя делать? Потому что при следующем обновлении темы (а обновлять шаблоны нужно!) все изменения, которые вы внесли, пропадут.

Что же делать? Вы можете создать дочернюю тему и там редактировать файл css стили. Как это сделать мы расписали в этой статье.

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

Второй способ

Этот вариант более правильный. WordPress дает возможность редактировать css в встроенном специальном редакторе. Как это сделать?

  1. Выберете в админ панели вкладку «Внешний вид -> Настроить»;
  2. Далее в левом меню найдите вкладку «Дополнительные стили» (обычно в самом низу);
  3. Вставьте нужный вам css код и не забудьте нажать на кнопку «Опубликовать» вверху.

ВАЖНО! Данные стили будут сохраняться только для текущей вашей темы. То есть, если вы решите поменять шаблон, то ваш CSS код перестанет работать.

Но, повторимся, самым правильным по нашему мнению способом редактированию css кода в WordPress является создание дочерней темы и добавление/изменение стилей уже в ней.

Статья была полезной?
👍
Да - 2
👎
Нет - 1
💬Комментарии:

CSS Головоломки в Telegram
Подписывайся и не пропускай:
Актуальные новости
Интересные задачки
Полезные подборки
Наш рейтинг
🏆Лучший хостинг для сайта
9/10
8/10
8/10
4
8/10
8/10
7/10
7/10
Что читают?
🏆Популярные записи
Как сделать гамбургер (бургер) меню — готовый код и подробное объяснение
Просмотров: 18281
Появление элементов при скролле
Просмотров: 16837
Перенос сайта на Тильде на свой хостинг. Пошаговое руководство
Просмотров: 8527
Как выровнять картинку по центру с помощью CSS
Просмотров: 6951
Как сделать плавное увеличение картинки при наведении — эффект на чистом CSS
Просмотров: 6789
Проверка знаний
🤔Хорошо ли вы знаете CSS?
Есть два блочных элемента, которые идут друг за другом в html. Какой будет оступ (margin) между ними, если задать им такие стили:

.top {
  height: 30px;
  background-color: blue;
  margin-bottom: 10px;
}
.bottom {
  height: 30px;
  background-color: red;
  margin-top: 20px;
}
    
10px
20px
30px
Very Peri
🤔Цвет 2022 года
Институт цвета Pantone объявил цвет 2022 года. Это сиреневый оттенок под названием 17-3938 Very Peri.
#6667ab