Стандартний набір кнопок форматування в редакторі 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.

У будь-якому з трьох сценаріїв ви отримуєте головне: форматування в один клік замість ручного копіювання класів та інлайн-стилів. А це година-друга зекономленого часу на місяць на будь-якому регулярно публікованому сайті.