Кнопка «Оставить заявку» на странице услуг слишком бледная, отступы съехали, а лезть в файлы темы страшно: после обновления WordPress всё может слететь. Андрей как раз так и сделал — открыл «Редактор файлов темы», вставил CSS в style.css родителя, а через месяц обновление темы стёрло цвет кнопки. За 15 минут вы добавите свой CSS в безопасное место, увидите правку на главной и на странице услуг, и поймёте, что стили переживут обновление темы, если не трогать папку родителя.
Свой CSS в WordPress безопаснее всего класть в «Дополнительный CSS» (классическая тема: Внешний вид → Настроить; блочная: Редактор → Стили → ⋮ → Additional CSS). Эти стили грузятся после файлов темы и не перезаписываются при её обновлении. Правки в style.css родителя — как карандаш на чужом чертеже: обновление их сотрёт. Крупный объём кода лучше перенести в дочернюю тему.
Мастер салона хочет заметнее кнопку записи — без верстальщика, через безопасное место для стилей. После WordPress 6.8 многие не находят «Дополнительный CSS»: в блочных темах CSS из редактора сайта и из customize.php лежат в разных местах, а пункт Additional CSS скрыт, пока не введёте первую строку.
- Зачем свой CSS владельцу сайта услуг и почему нельзя править файлы родительской темы
- Выберите способ: «Дополнительный CSS», дочерняя тема или плагин
- Добавьте CSS через «Внешний вид → Настроить → Дополнительный CSS»
- Перенесите крупные правки в style.css дочерней темы
- Оформите CSS только для одной страницы без лишнего !important
- Проверьте сайт после обновления темы и правок CSS
- Разберите типичные ошибки: родитель, inline, кеш и смена темы
- Как понять, что свой CSS настроен правильно
- Частые вопросы
- Можно ли добавить CSS в WordPress без дочерней темы?
- Куда вставить свой CSS в WordPress?
- Пропадёт ли CSS после обновления темы WordPress?
- Чем «Дополнительный CSS» отличается от дочерней темы?
- Почему CSS сохранил, а на сайте не видно?
- Где Additional CSS в Twenty Twenty-Five?
- Когда лучше не править CSS самому?
Зачем свой CSS владельцу сайта услуг и почему нельзя править файлы родительской темы
Сайт услуг живёт на кнопках «Записаться» и «Оставить заявку». Штатная тема часто даёт бледную кнопку или неудобные отступы на телефоне. Свой CSS (язык оформления страницы) меняет цвет, размер и отступы за минуты.
Типичная ошибка — не делайте правки в style.css родителя. При обновлении WordPress перезаписывает папку темы в wp-content/themes, и ваш код исчезает. В реальном проекте владелец студии потерял цвет CTA именно так — а в кастомайзере того же CSS не было, потому что правили не там. Безопасные зоны: «Дополнительный CSS» (Additional CSS), style.css дочерней темы или стили одного блока. Файлы родителя — только для чтения.
Выберите способ: «Дополнительный CSS», дочерняя тема или плагин
Три дороги без плагина по умолчанию. Плагин для CSS — запасной вариант, если хостинг режет доступ к настройщику.
| Способ | Когда подходит | Переживёт обновление темы? | Сложность |
|---|---|---|---|
| «Дополнительный CSS» в настройщике | 1-3 правки: кнопка, шрифт, отступ | Да, привязан к активной теме | Низкая |
| Дочерняя тема + style.css | Много строк CSS, свои шаблоны | Да, папка child отдельно | Средняя |
| CSS одного блока в редакторе | Один баннер или секция | Да, в составе страницы | Низкая |
| Плагин-сниппет CSS | Нет доступа к настройщику | Зависит от плагина | Низкая |
Вердикт: для салона, студии или эксперта с парой правок начните с «Дополнительного CSS». Когда код разрастается на сотни строк — перенесите в дочернюю тему. Плагин — только если встроенный путь недоступен.
Добавьте CSS через «Внешний вид → Настроить → Дополнительный CSS»
Для классической темы (Astra, Kadence, OceanWP и похожие) используйте самый прямой путь ниже. Блочная тема (Twenty Twenty-Five) — отдельный сценарий ниже.
Классическая тема — пошагово:
- Войдите в админку WordPress → «Внешний вид» → «Настроить» (Customizer).
- Внизу списка слева найдите «Дополнительный CSS» (Additional CSS).
- Вставьте тестовое правило, например для кнопки заявки: .wp-block-button__link { background-color: #0F766E; }
- Справа смотрите превью — кнопка должна сменить цвет без публикации всего сайта.
- Нажмите «Опубликовать» в настройщике — иначе правка не сохранится.
- Откройте главную и страницу услуг в режиме инкогнито и на телефоне.
- Если цвет не виден — жёсткое обновление Ctrl+Shift+R и очистка кеша плагина (WP Rocket и аналоги).
Блочная тема: «Редактор» → страница → «Стили» → ⋮ → «Additional CSS». В WP 6.9 пункт в меню ⋮. Запасной путь: /wp-admin/customize.php или Ctrl+K «Customize CSS». Пункт скрыт до первой строки CSS — это нормально. Не смешивайте CSS из customize.php и редактора сайта: выберите одно место для глобальных правок.
Перенесите крупные правки в style.css дочерней темы
Когда «Дополнительный CSS» превращается в простыню на 200+ строк, его трудно читать и копировать при смене хостинга. Перенесите код в дочернюю тему — отдельная папка, которую обновление родителя не трогает. Для файлов в child задайте версию в wp_enqueue_style, иначе кеш-плагин покажет старую версию стилей.
- Сделайте бэкап перед правками.
- Создайте child theme (Child Theme Configurator или вручную).
- Скопируйте CSS из настройщика в style.css child и активируйте дочернюю тему.
- Очистите «Дополнительный CSS» в настройщике, чтобы не было дубликата.
Оформите CSS только для одной страницы без лишнего !important
Нужен другой вид только на странице услуг, а главную и форму заявки не трогать? Не заливайте весь сайт правилами с !important — это костыль, который ломает соседние блоки.
Класс страницы: у каждой страницы есть служебный класс page-id-123 (номер виден в F12 у тега body). Пример: .page-id-123 .wp-block-button__link { background-color: #4F46E5; }
Класс блока: в настройках кнопки добавьте btn-zapis в «Дополнительные классы CSS», в глобальном CSS напишите .btn-zapis { font-size: 18px; }. Блок «Произвольный HTML» с тегом style — только для одной вставки, не для кнопок по всему сайту.
Проверьте сайт после обновления темы и правок CSS
Обновление темы — момент истины. Перед ним — бэкап. После — короткий обход, без которого легко пропустить сломанную заявку.
Главная → услуги → контакты → мобильная версия → кнопки CTA → очистка кеша → сравнение с бэкапом
- Главная: шапка, меню, первый экран — без «поехавших» отступов.
- Страница услуг: цвет и размер кнопки заявки, читаемость текста.
- Форма на контактах: поля не наезжают друг на друга, кнопка отправки видна.
- Телефон в вертикальной ориентации — те же проверки.
- Режим инкогнито — чтобы увидеть сайт глазами гостя, а не только кешированную админку.
Если после обновления стили пропали — скорее всего правили родителя или сменили тему. Подробнее о безопасном обновлении — в гайде обновить WordPress без поломки.
Разберите типичные ошибки: родитель, inline, кеш и смена темы
Родительская тема. Правка style.css родителя — главная причина потери дизайна после обновления. Inline в постах. Копипаст color и font-size в десятки записей — потом не сменить кнопку на всём сайте; соберите правила в одном месте. Кеш. CSS сохранён, на фронте старое — очистите кеш WP Rocket или аналога, CDN и браузер (Ctrl+Shift+R). Смена темы. «Дополнительный CSS» привязан к активной теме и при замене не подтянется — экспортируйте код в текстовый файл. Два поля в block theme. Не смешивайте customize.php и Site Editor без нужды.
Нужна помощь с сайтом под заявки — услуги, форма или Telegram. Ещё гайды — в блоге.
Как понять, что свой CSS настроен правильно
Это ваш чеклист успеха до того, как снова нажмёте «Обновить» у темы:
- Изменение видно на главной и на странице услуг в обычном и мобильном виде.
- Файлы родительской темы вы не редактировали.
- После тестового обновления темы (или на копии сайта) цвет кнопки CTA на месте.
- Вы знаете, где лежит CSS: настройщик, редактор стилей или style.css child.
- Для блочной темы нашли путь Styles → ⋮ → Additional CSS, если пункт был скрыт.
Все пункты отмечены — можно подкручивать оформление под заявки без страха обновлений.
Материал проверен: Андрей Дикий (создаёт сайты и продвигает их статьями, SEO/GEO).
Достоверность данных: WordPress Developer Handbook (CSS, Additional CSS), документация Styles overview (WP 6.9), обсуждения wordpress.org по Twenty Twenty-Five, Gutenberg #70095 о скрытом Additional CSS, материалы Pressable и WP Rocket о сохранении CSS и кеше; частотность запросов — по Яндекс Вордстат на 2026-09-11 (точные показы не получены, MCP недоступен).
Частые вопросы
Можно ли добавить CSS в WordPress без дочерней темы?
Да, через «Дополнительный CSS» в настройщике или редакторе стилей. Child theme нужна при большом объёме кода или правках шаблонов.
Куда вставить свой CSS в WordPress?
Классика: «Внешний вид → Настроить → Дополнительный CSS». Блочная тема: «Редактор → Стили → ⋮ → Additional CSS». Альтернатива — style.css дочерней темы.
Пропадёт ли CSS после обновления темы WordPress?
Нет, если CSS в настройщике или child theme. Пропадёт при правке файлов родителя. При смене темы стили не переносятся — сохраните код в файл.
Чем «Дополнительный CSS» отличается от дочерней темы?
Additional CSS в базе, удобен для мелочей. Дочерняя тема — папка с файлами для большого объёма. Обе переживают обновление родителя.
Почему CSS сохранил, а на сайте не видно?
Обычно кеш плагина или браузера. Очистите кеш, Ctrl+Shift+R. Проверьте «Опубликовать» в настройщике и совпадение селектора с классом кнопки.
Где Additional CSS в Twenty Twenty-Five?
Редактор → страница → «Стили» → ⋮ → «Additional CSS». Нет пункта — введите первую строку CSS или откройте /wp-admin/customize.php.
Когда лучше не править CSS самому?
При белом экране или сломанной форме — напишите через контакты или Telegram.
