Стандартный набор кнопок форматирования в редакторе WordPress знаком каждому: bold, italic, списки, цитаты. Но когда нужно регулярно вставлять кнопку конкретного цвета, блок с предупреждением или подпись к картинке в фирменной рамке, рутина включается на полную. Каждый раз: переключиться в текстовый режим, прописать style="", скопировать классы из шпаргалки. Одна кнопка вышла синей, другая голубой. Один блок с тенью, другой без.

Проблема не в отсутствии инструментов, а в том, что выпадающее меню «Форматы» в TinyMCE по умолчанию скрыто. А даже если его включить, оно пустое: WordPress не знает, какие стили вам нужны. Но их можно туда добавить.

Подходов три: через код в functions.php, через плагин с визуальным конструктором и через нативный механизм блочного редактора register_block_style(). Все три рабочие и покрывают разные сценарии: от ручного контроля над каждым пикселем до «нажал и применилось».

💡 Быстрый обзор:

• Включаем выпадающее меню «Форматы» в классическом редакторе фильтром mce_buttons_1 и наполняем его собственными стилями через tiny_mce_before_init, пошаговый код внутри.
• Создаём editor-style.css для живого предпросмотра прямо в редакторе: кнопка выглядит как кнопка ещё до публикации.
• Ставим TinyMCE Custom Styles, GUI-конструктор форматов без касания кода, с автосгенерированными CSS-файлами.
• Смотрим нативный путь для Gutenberg: регистрируем вариации блоков через register_block_style(), стили подключаем через theme.json или wp_add_inline_style().

Что такое кастомные стили и зачем они нужны

Кастомный стиль, это пресет CSS, который вы вешаете на выделенный фрагмент через выпадающее меню редактора. Вместо сотого оборачивания абзаца в <span style="..."> вы выбираете «Highlight» в меню «Форматы» и получаете жёлтую подсветку с закруглёнными углами. Один клик.

Три причины настроить это раз и забыть:

• Единообразие. Все кнопки, предупреждения и подписи выглядят одинаково от публикации к публикации. Дизайн не плывёт.
• Скорость. Редактор не лезет в CSS и не копирует магические классы из блокнота, жмёт одну кнопку.
• Безопасность. Никто случайно не затирает вёрстку через инлайн-стили в текстовом режиме.

Типичные сценарии: кнопка призыва к действию (theme-button), блок «Важно» с иконкой и цветной рамкой, маркированный список с галочками, подпись к картинке в фирменном стиле, выделение кода внутри абзаца.

Способ 1: Код, через functions.php и editor-style.css

Путь для тех, кто не боится один раз открыть functions.php. Итог: выпадающее меню «Форматы» появляется в тулбаре TinyMCE, а внутри, ваши собственные стили. Десять строк PHP, один CSS-файл, ноль лишних плагинов.

Шаг 1. Включаем кнопку «Форматы»

По умолчанию выпадающий список форматов styleselect скрыт. Этот фильтр возвращает его в первую строку редактора. Код поместите в functions.php активной темы или, что правильнее, дочерней темы:

1
function myprefix_mce_buttons_1( $buttons ) {
2
    array_unshift( $buttons, 'styleselect' );
3
    return $buttons;
4
}
5
add_filter( 'mce_buttons_1', 'myprefix_mce_buttons_1' );

Хук mce_buttons_1 добавляет кнопку в первую строку тулбара. Если предпочитаете вторую или третью, используйте mce_buttons_2 или mce_buttons_3.

Сохранили functions.php, открыли любую запись, слева в верхнем ряду появилось выпадающее меню «Форматы». Пока пустое.

Шаг 2. Регистрируем собственные стили

Теперь наполним меню реальными форматами. В тот же functions.php добавьте второй фильтр:

1
function myprefix_add_format_styles( $init_array ) {
2
    $style_formats = array(
3
        array(
4
            'title'    => __( 'Theme Button', 'text-domain' ),
5
            'selector' => 'a',
6
            'classes'  => 'theme-button',
7
        ),
8
        array(
9
            'title'    => __( 'Highlight', 'text-domain' ),
10
            'inline'   => 'span',
11
            'classes'  => 'text-highlight',
12
        ),
13
    );
14
    $init_array['style_formats'] = json_encode( $style_formats );
15
    return $init_array;
16
}
17
add_filter( 'tiny_mce_before_init', 'myprefix_add_format_styles' );

Что означают параметры каждого элемента:

• title, название, которое редактор увидит в выпадающем меню.
• selector, HTML-тег, к которому применяется стиль. 'a' означает, что «Theme Button» сработает только на ссылках.
• inline, оборачивает выделенный текст в тег (обычно span) с указанным классом. Идеально для подсветки слова или фразы внутри абзаца.
• classes, CSS-класс (или классы через пробел), добавляемый к элементу.

Добавляйте свои позиции в массив по тому же шаблону. Полный список принимаемых параметров, в документации TinyMCE на developer.wordpress.org.

Шаг 3. Пишем CSS для фронтенда

Меню наполнено, но браузер пока не знает, как выглядит .theme-button. Добавьте CSS в таблицу стилей темы (или дочерней темы):

1
.theme-button {
2
    display: inline-block;
3
    padding: 10px 15px;
4
    color: #fff;
5
    background: #1796c6;
6
    text-decoration: none;
7
}
8
.theme-button:hover {
9
    text-decoration: none;
10
    opacity: 0.8;
11
}
12
.text-highlight {
13
    background: #FFFF00;
14
}

После сохранения кнопка стилизована на фронтенде. Но в админке редактор её пока не показывает.

Шаг 4. Добавляем editor-style.css для предпросмотра в редакторе

Чтобы стили отображались прямо в визуальном редакторе до публикации, нужен отдельный файл editor-style.css. WordPress умеет его подхватывать:

1
function myprefix_theme_add_editor_styles() {
2
    add_editor_style( 'editor-style.css' );
3
}
4
add_action( 'init', 'myprefix_theme_add_editor_styles' );

Создайте файл editor-style.css в корне темы и скопируйте туда CSS из шага 3. Если работаете с чужой темой, создайте этот файл в дочерней теме: WordPress проверит дочернюю тему первой и, найдя editor-style.css там, загрузит его вместо родительского.

Итог: выделили текст, выбрали «Highlight», жёлтая подсветка видна сразу в редакторе. Кликнули по ссылке, выбрали «Theme Button», она превращается в синюю кнопку.

Способ 2: Плагин TinyMCE Custom Styles, без касания кода

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

Установите и активируйте TinyMCE Custom Styles. На июнь 2026 плагин насчитывает 8 000+ активных установок и поддерживает классический блок Gutenberg начиная с версии 1.1.1. Последнее обновление (v1.1.5, июнь 2024) закрывало уязвимости. Автор, Тим Ривз, открыто ищет преемника, но кодовая база стабильна: плагин не тянет внешних зависимостей и не затрагивает базу данных за пределами своей таблицы опций.

Плагин появляется в общем списке установленных. Убедитесь, что он активирован, прежде чем переходить к настройке.

После активации перейдите в Настройки → TinyMCE Custom Styles. Первый экран предлагает выбрать, где хранить CSS-файлы. Рекомендую третий вариант: создать отдельную папку (например tinymce-styles) в wp-content/uploads. Это убережёт стили при обновлении темы или самого плагина. Нажмите «Сохранить настройки».

Первый экран показывает три варианта размещения CSS. Выберите третий и задайте имя папки, например tinymce-styles.

Прокрутите страницу ниже и нажмите «Добавить новый стиль». Откроется конструктор, где вы задаёте:

• Заголовок, название в выпадающем меню (например «Большая синяя кнопка»).
• Тип, селекторный (применяется к конкретному тегу), инлайн (оборачивает в span) или блочный.
• Классы и CSS-свойства, прямо в интерфейсе, без файлов.

После сохранения настроек нажмите «Добавить новый стиль» в нижней части страницы. Откроется конструктор с полями заголовка, типа и CSS-свойств.

Сохраните, откройте любую запись и найдите выпадающее меню «Форматы» во второй строке тулбара. Новый стиль уже там. Выделили текст, выбрали, применяется мгновенно.

Плюс плагина: CSS-файлы (editor-style.css и editor-style-shared.css) создаются автоматически в выбранной папке. Забираете их по FTP, редактируете в удобном редакторе и загружаете обратно, без единой правки functions.php.

Способ 3: register_block_style(), нативный путь для Gutenberg

Два предыдущих способа работают в классическом редакторе TinyMCE и его Classic-блоке внутри Gutenberg. Но если вы живёте исключительно в блочном редакторе, есть более прямой путь: register_block_style().

Эта функция регистрирует вариацию стиля для конкретного блока, кнопки, заголовка, цитаты, группы. Вариация появляется в боковой панели блока, и редактор применяет её одним кликом.

Пример: добавим кнопке вариацию «Fancy» с жёлтым фоном и закруглёнными углами:

1
function myprefix_register_block_styles() {
2
    register_block_style(
3
        'core/button',
4
        array(
5
            'name'  => 'fancy',
6
            'label' => __( 'Fancy', 'text-domain' ),
7
        )
8
    );
9
}
10
add_action( 'init', 'myprefix_register_block_styles' );

CSS подключается либо через theme.json (для современных блочных тем), либо через wp_add_inline_style():

1
.is-style-fancy .wp-block-button__link {
2
    background-color: #f0c040;
3
    color: #fff;
4
    border: none;
5
    border-radius: 15px;
6
    padding: 10px 20px;
7
}

Этот подход не зависит от TinyMCE и работает нативно в Gutenberg. Для тем с theme.json (все современные блочные темы) стили можно описать прямо в разделе styles.blocks, без единой строки PHP.

⁉️🤔 Частые вопросы

Форматы не отображаются в редакторе. В чём дело?

Первым делом зайдите в Настройки → Advanced Editor Tools и убедитесь, что кнопка «Formats» не снята с тулбара. AET перехватывает управление рядами кнопок, и ваш фильтр mce_buttons_1 может игнорироваться, пока вы явно не добавите кнопку через интерфейс плагина. Также проверьте, что фильтр mce_buttons_1 зарегистрирован и возвращает массив с элементом 'styleselect'. Очистите кеш браузера и серверный кеш, часто проблема только в этом.

Можно ли привязать стиль к нескольким селекторам одновременно?

Да. Вместо строки 'selector' => 'a' передайте массив: 'selector' => 'a, button, span'. TinyMCE применит стиль к первому подходящему родительскому тегу из списка. На практике это полезно, когда один визуальный стиль должен работать и на ссылках, и на кнопках <button>. Порядок в массиве важен: если выделенный текст находится внутри ссылки, вложенной в div, а в селекторах указан 'div, a', стиль применится к div, а не к a. Ставьте более специфичные селекторы первыми.

Чем editor-style.css отличается от editor-style-shared.css?

Плагин TinyMCE Custom Styles создаёт два файла. editor-style.css загружается только в редактор TinyMCE. editor-style-shared.css загружается и в редактор, и на фронтенд, стили из него видны посетителям сайта. Если стиль нужен только для удобства редактирования, кладите его в editor-style.css. Если стиль должен работать на сайте, в editor-style-shared.css. При ручном подходе аналогом shared-файла выступает основная таблица стилей темы, а editor-style.css (отдельный файл, регистрируемый через add_editor_style()) влияет только на предпросмотр внутри TinyMCE.

Обязательно ли создавать дочернюю тему для этих правок?

Нет, код работает и в functions.php основной темы. Но при следующем обновлении темы все правки затрутся. Правило простое: любая кастомизация через functions.php идёт в дочернюю тему, это страховка от потери изменений. Если дочерней темы ещё нет, создайте её за десять минут по руководству по дочерним темам: два файла, style.css с заголовком и functions.php с импортом родительских стилей, и ваши кастомные форматы переживут любое обновление.

Плагин не обновлялся с 2024 года. Стоит ли его ставить?

На июнь 2026 плагин TinyMCE Custom Styles остаётся в каталоге WordPress.org с 8 000+ активных установок. Автор открыто ищет преемника, но кодовая база не заброшена: последнее обновление (v1.1.5, июнь 2024) закрывало уязвимости. Риск есть, но он управляемый: плагин не тянет внешних зависимостей и не лезет в базу данных глубоко. Если в будущем плагин перестанет обновляться, вы всегда перенесёте стили в ручной способ (шаги 1-4 выше) без потери CSS. Альтернатива с активной разработкой, Advanced Editor Tools (AET) от Automattic, но его опция «Create CSS classes menu» часто захламляет меню лишними классами. TinyMCE Custom Styles даёт ручной контроль над каждым элементом, поэтому они не конкуренты, а скорее дополняют друг друга.

Код, плагин или блоки: что выбрать под ваш сценарий

Выбор сводится к двум вопросам: в каком редакторе вы работаете и готовы ли один раз открыть functions.php.

Работаете в классическом редакторе или Classic-блоке Gutenberg и не боитесь кода, берите способ 1. Десять строк PHP, один CSS-файл, полный контроль.

Хотите визуальный конструктор форматов без касания кода и с автоматической генерацией CSS, ставьте TinyMCE Custom Styles. Помните про риск долгосрочной поддержки, но на сегодняшний день плагин отрабатывает заявленное.

Живёте в блочном редакторе, осваивайте register_block_style(). Этот путь нативен для Gutenberg, не зависит от TinyMCE и поддерживается ядром WordPress.

В любом из трёх сценариев вы получаете главное: форматирование в один клик вместо ручного копирования классов и инлайн-стилей. А это час-другой сэкономленного времени в месяц на любом регулярно публикуемом сайте.