Как редактировать любые CSS-стили в дочерней теме

Если вы используете какую-то многофункциональную тему для WordPress, одну из тех, которые продаются в маркетплейсе themeforest.net, то после создания дочерней темы, наверняка можете столкнуться с проблемой переопределения стилей.

Как правило, не все ограничивается файлом style.css. Кроме него вы можете обнаружить еще стили,  разнесенные по различным папкам таким как:

/wp-content/themes/theme-name/assets/css/layout_3/main.css
/wp-content/uploads/stm_uploads/skin-custom.css 

И как с этим быть, как переопределись их в дочерней теме? Я пересмотрел много вариантов и нашел следующее решение. Нам понадобится функция wp_enqueue_style(),  подробное описание контрой вы найдете ниже. А пока я приведу пример практического применения данной функции, используя указанные ранее пути.

Пошаговое руководство

В файле functions.php дочерней темы прописываете строки:

wp_enqueue_style( 'main.css', '/wp-content/themes/theme-name/assets/css/layout_3/');
wp_enqueue_style( 'skin-custom.css', '/wp-content/uploads/stm_uploads/');

В файле style.css дочерней темы переопределяются нужные вам стили, например:

h2 {color: #7A7A7A !important; margin-top: 20px !important;}

Очистка кэша браузера

Совет: для отладки при переопределении стилей рекомендую использовать Google Chrome, подключив расширение Classic Cache Killer.

Оно автоматически очищает кеш браузера перед загрузкой страницы. Может быть включено/отключено одним кликом мышки.

Увы, Safari для веб-разработки не очень удобен, так для него нет такого количества расширений. Даже перезагрузка страницы без обращения к кэшу не всегда срабатывает (удерживая клавишу ⌥, нажать на значок обновления страницы, возле адресной строки браузера).

Только если нажать ⌘ + ⌥ + [E], кэш браузер обнулится. Но, согласитесь, каждый раз дополнительно нажимать комбинацию из трех славишь несколько рутинно. Гораздо проще использовать расширение Classic Cache Killer и только обновлять страницу. Все остальное будет сделано автоматически.

Функция wp_enqueue_style()

Функция wp_enqueue_style() правильно добавляет файл CSS стилей. Она регистрирует стиль, если указан источник (не перезаписывает), и ставит в очередь.

Если файл стилей был предварительно зарегистрирован через wp_register_style(), то его можно добавить в очередь, указав название (идентификатор) в первом параметре $handle. Если файл не был предварительно зарегистрирован, то эта функция зарегистрирует файл и добавит его в очередь.

Синтаксис

wp_enqueue_style( string $handle, string $src = '', string[] $deps = array(), string|bool|null $ver = false, string $media = 'all' )

Параметры

$handle

(string) (Обязательно) Имя таблицы стилей. Должно быть уникальным.

$src

(string) (Опционально) Полный URL-адрес таблицы стилей или путь к таблице стилей относительно корневого каталога WordPress.

Значение по умолчанию: ''

$deps

(string[]) (Опционально) Массив зарегистрированных стилей обрабатывает эту таблицу стилей, от которой он зависит.

Значение по умолчанию: array()

$ver

(string|bool|null) (Опционально) Строка, указывающая номер версии таблицы стилей, если она есть, которая добавляется к URL-адресу в виде строки запроса для очистки кеша. Если для параметра version задано значение false, автоматически добавляется номер версии, равный текущей установленной версии WordPress. Если установлено значение null, версия не добавляется.

Значение по умолчанию: false

$media

(string) (Опционально) Медиа, для которого была определена эта таблица стилей. Принимает типы мультимедиа, такие как «все», «печать» и «экран», или мультимедийные запросы, например ‘(orientation: portrait)’ и ‘(max-width: 640px)’.

Значение по умолчанию: 'all'

Использование

Безопасный способ добавить/поставить в очередь файл таблицы стилей на созданную страницу WordPress.

wp_enqueue_style( $handle, $src, $deps, $ver, $media );