Кастомный CSS в WordPress

Способы добавить CSS в WordPress

На self-hosted WordPress.org нет ограничений на добавление CSS. Доступны три основных способа:

Способ	Где	Когда использовать
Additional CSS в Customizer	Внешний вид → Настройка → Дополнительный CSS	Быстрые стили, не требующие child theme
Child theme `style.css`	Файлы темы	Системный подход, переживает обновления
Глобальные стили в Site Editor	Внешний вид → Редактор сайта → Стили	Блочные темы, визуальный редактор

В WordPress.com custom CSS доступен только на платных тарифах. На self-hosted ограничений нет.

Additional CSS в Customizer

Самый простой способ для классических тем:

Внешний вид → Настройка → Дополнительный CSS.
Вставьте CSS-код.
Предпросмотр обновляется мгновенно.
Нажмите Опубликовать.

/* Пример: изменить цвет заголовков */
h1, h2, h3 {
    color: #1a73e8;
}

/* Пример: скрыть мета-информацию на страницах */
.page .entry-meta {
    display: none;
}

Плюсы: не нужен child theme, мгновенный предпросмотр. Минусы: CSS хранится в базе данных, не в файлах темы.

CSS в Child Theme

Для системного подхода создайте child theme и добавьте стили в style.css:

/*
 Theme Name: My Child Theme
 Template: twentytwentyfour
 Version: 1.0.0
*/

/* Ваши стили ниже */
.site-header {
    background: #f5f5f5;
    border-bottom: 3px solid #333;
}

Плюсы: CSS в системе контроля версий, переживает обновление parent theme. Минусы: требует создания child theme.

CSS-классы для отдельных блоков

В WordPress Editor можно добавить произвольный CSS-класс любому блоку:

Выделите блок в редакторе.
В боковой панели → Дополнительно.
В поле Дополнительные классы CSS введите имя класса (без точки).
Пропишите стили в Customizer или child theme:

.my-custom-box {
    background: #e8f5e9;
    border-left: 4px solid #4caf50;
    padding: 1rem;
}

Советы по CSS-классам блоков:

Давайте осмысленные имена: .feature-card, а не .box1.
Используйте префиксы, чтобы избежать конфликтов: .mytheme-hero.
Не переопределяйте системные классы WordPress — добавляйте свои.

Где искать помощь с CSS

Если вы не уверены в CSS-решении:

Инструменты разработчика в браузере (F12) — для инспектирования текущих стилей и экспериментов.
Форумы WordPress.org — сообщество помогает с CSS-задачами.
Stack Overflow — тег [wordpress] + [css].
Официальная документация CSS — MDN Web Docs (developer.mozilla.org).

Прежде чем писать CSS, проверьте, нет ли встроенной настройки. Многие темы позволяют менять цвета, шрифты и отступы без кода — через Site Editor или Customizer.