Как изменить стили от плагинов в WordPress без изменения условий подключения

Автор: Егор Савельев | Опубликовано: 06.03.2026

В процессе разработки на WordPress часто возникает задача изменить визуальное оформление, которое добавляют сторонние плагины. При этом важно не просто добавить свои стили, а именно изменить или переопределить стили плагина без модификации его файлов или отключения самих стилей. Это позволяет сохранить обновляемость плагина и избежать конфликтов.

Почему просто отключать стили плагинов не всегда удобно

Некоторые плагины подключают свои CSS-файлы через wp_enqueue_style с определёнными условиями. Часто разработчики пытаются отключить эти стили полностью, используя wp_dequeue_style. Однако это может привести к потере базового оформления, и тогда нужно вручную писать все стили с нуля.

Кроме того, некоторые плагины подключают стили в нижней части страницы или с динамическими зависимостями, что усложняет их отключение.

Поэтому более гибкий подход — оставить подключение стилей, но переопределить нужные правила с помощью каскадности и специфичности CSS.

Как правильно переопределять стили плагинов в WordPress

Для переопределения стилей плагина следует:

Подключить собственный CSS файл после стилей плагина
Использовать более специфичные селекторы, чтобы переопределить нужные свойства
Если необходимо, применить !important с осторожностью, чтобы гарантировать применение нужных значений

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

function wpskins_enqueue_custom_plugin_styles() {
    wp_enqueue_style('wpskins-custom-plugin-overrides', get_stylesheet_directory_uri() . '/css/custom-plugin-overrides.css', array('plugin-main-style-handle'), '1.0');
}
add_action('wp_enqueue_scripts', 'wpskins_enqueue_custom_plugin_styles', 20);

Обратите внимание на приоритет 20, который заставляет подключить файл custom-plugin-overrides.css после стилей плагина с хендлом plugin-main-style-handle. Хендл нужно узнать, посмотрев в исходный код страницы или документацию плагина.

Пример переопределения стилей плагина Contact Form 7

Пусть нам нужно изменить цвет кнопки отправки формы и шрифт в полях.

В файле custom-plugin-overrides.css пишем:

.wpcf7 form input.wpcf7-submit {
    background-color: #0073aa !important;
    color: #ffffff !important;
    font-weight: 700;
}

.wpcf7 form input.wpcf7-text, .wpcf7 form textarea {
    font-family: 'Arial', sans-serif !important;
}

Использование !important здесь оправдано, так как оригинальные стили могут использовать высокую специфичность или инлайновые правила.

Автоматизация определения хендлов стилей плагинов

Часто сложно узнать, под каким хендлом подключен стиль плагина. Для этого можно воспользоваться функцией wp_styles() и вывести список всех стилей в админке или файле темы:

function wpskins_list_all_styles() {
    global $wp_styles;
    echo '<pre>';
    print_r($wp_styles->registered);
    echo '</pre>';
}
// Можно вызвать эту функцию на нужной странице или через админку

Это позволит найти нужный хендл и корректно указать его в зависимости при подключении своего CSS.

Использование плагинов для управления стилями

Если хочется более удобного интерфейса для управления стилями и их переопределения, советуем обратить внимание на плагин Clearfy Pro. Он позволяет отключать ненужные стили и скрипты, а также добавлять свои пользовательские стили с удобным редактором.

Для более тонкой настройки внешнего вида также подойдет плагин WPRemark с возможностью добавлять пользовательские CSS и JS к конкретным страницам и элементам.

Пример функции для динамического добавления стилей с изменением цвета кнопок плагина

Если цвета кнопок нужно менять динамически, например, по опциям темы, можно сделать так:

function wpskins_dynamic_plugin_button_color() {
    $button_color = get_theme_mod('wpskins_button_color', '#0073aa');
    $custom_css = ".plugin-button-class { background-color: {$button_color} !important; }";
    wp_add_inline_style('plugin-main-style-handle', $custom_css);
}
add_action('wp_enqueue_scripts', 'wpskins_dynamic_plugin_button_color', 25);

Здесь мы используем wp_add_inline_style, чтобы добавить CSS прямо после основного стиля плагина.