Как добавить уникальные стили для конкретных блоков в WordPress

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

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

Почему важно добавлять уникальные стили для блоков WordPress

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

Уникальные стили позволяют:

Делать блоки визуально отличающимися для пользователей.
Изменять дизайн только нужного элемента без касания других.
Сохранять чистоту и поддержку кода.

Добавление уникальных стилей с помощью пользовательских CSS классов

Самый простой способ — назначить уникальный CSS класс нужному блоку и написать для него стили. В редакторе Gutenberg можно добавить класс в настройках блока (в панели справа в разделе «Дополнительные CSS классы»).

Например, добавим класс wpskins-highlight-block к блоку:

.wpskins-highlight-block {
    background-color: #f0f8ff;
    border-left: 4px solid #0073aa;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 4px;
}

Этот стиль сделает блок с выделением светло-голубым фоном и синей полосой слева.

Как добавить CSS в WordPress

CSS можно добавить несколькими способами:

В кастомайзере: В меню Внешний вид → Настроить → Дополнительные стили CSS вставьте код.
Через дочернюю тему: добавьте стили в файл style.css.
С помощью плагина Clearfy Pro, который позволяет удобно управлять стилями и оптимизировать код сайта. Подробнее о Clearfy Pro на официальном сайте.

Динамическое добавление стилей для блоков на основе ID или атрибутов

Иногда нужно стилизовать блоки не по классам, а по уникальному ID или другим атрибутам. Для этого можно использовать PHP и хуки WordPress.

Например, добавим уникальный стиль для блока с определённым ID:

function wpskins_add_custom_block_style() {
    if (is_single()) { // Добавляем только на страницах записей
        ?>
        <style>
            #post-123 .wp-block-paragraph {
                color: #d6336c;
                font-weight: bold;
            }
        </style>
        <?php
    }
}
add_action('wp_head', 'wpskins_add_custom_block_style');

В данном коде мы меняем цвет и жирность текста параграфа внутри поста с ID 123.

Программное добавление классов в блоки Gutenberg

Можно добавить уникальные CSS классы к блокам программно, используя фильтр render_block:

function wpskins_add_custom_class_to_block($block_content, $block) {
    if ($block['blockName'] === 'core/paragraph') {
        $block_content = str_replace('class="', 'class="wpskins-custom-paragraph ', $block_content);
    }
    return $block_content;
}
add_filter('render_block', 'wpskins_add_custom_class_to_block', 10, 2);

Этот код добавит класс wpskins-custom-paragraph ко всем параграфам, что позволит писать CSS, ориентируясь на них.

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

Для тех, кто не хочет писать код, есть полезные плагины:

Advanced Gutenberg — расширяет возможности редактирования блоков, включая добавление пользовательских классов и стилей.
WPBakery Page Builder или Elementor — конструкторы с визуальным редактором CSS для отдельных элементов.
Clearfy Pro — оптимизирует работу плагинов и добавляет дополнительные настройки для стилей и скриптов на сайте.

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

Пример: создание уникального стиля для блока с кнопкой

Допустим, нужно выделить кнопку в тексте. Добавим класс wpskins-unique-button и применим стили:

.wpskins-unique-button {
    background-color: #ff5722;
    color: #fff;
    padding: 12px 25px;
    border-radius: 30px;
    text-transform: uppercase;
    font-weight: 700;
    transition: background-color 0.3s ease;
}

.wpskins-unique-button:hover {
    background-color: #e64a19;
    color: #fff;
}

В Gutenberg добавьте этот класс к кнопке, и она будет выглядеть по-новому. Такой приём помогает создавать стильные и запоминающиеся элементы интерфейса без глобальных изменений.

Оптимизация: как не перегружать сайт стилями

При добавлении уникальных стилей важно не создавать избыточный CSS, который замедляет загрузку. Вот несколько советов:

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

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

Заключение по теме уникальных стилей для блоков WordPress

Добавление уникальных стилей для конкретных блоков — важный инструмент кастомизации сайтов на WordPress. Это улучшает визуальное восприятие и позволяет гибко управлять дизайном. Используйте встроенные возможности редактора, пишите свои CSS и PHP решения, или комбинируйте с плагинами для максимального контроля. Если нужна оптимизация стилей и скриптов, рекомендуем обратить внимание на Clearfy Pro — отличный инструмент для профессиональной настройки.