Добавление пользовательских стилей в редактор WordPress

Важно: предполагается базовое знание HTML и CSS (что такое классы, блоки, атрибуты).

Почему это полезно

Редактор WordPress по умолчанию не даёт удобного интерфейса для добавления произвольных CSS-классов к выделенным фрагментам. Приходится переключаться в текстовый режим и вручную править HTML. Добавив преднастройки стилей в редактор, вы ускорите работу контент-редакторов, снизите ошибки и сохраните единообразие внешнего вида контента.

Пример панели редактора WordPress с пунктом Форматы

Основные подходы

Плагин: TinyMCE Custom Styles — быстрое внедрение, автоматическое создание editor stylesheet. Рекомендуется, если вы не хотите править код темы.
Ручной метод: добавление кнопки выбора стилей в TinyMCE и подключение editor-style.css через functions.php. Рекомендуется, если вы хотите полный контроль и минимизировать плагины.

1. Использование плагина TinyMCE Custom Styles

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

Установите и активируйте плагин: «Плагины → Добавить новый» → TinyMCE Custom Styles.
Откройте настройки: «Настройки → TinyMCE Custom Styles». При первом запуске плагин попросит место для файла editor stylesheet — выберите вариант, который подходит вашей теме. Если у вас дочерняя тема Genesis (как в примере), выбирайте соответствующий путь. Нажмите «Сохранить все настройки».

Страница настроек плагина с выбором места для editor stylesheet

Выбор места для файла стилей редактора в настройках плагина

Нажмите «Add new style» (Добавить новый стиль). Укажите название стиля, тип (inline, block или selector), значение типа и CSS-класс. Если стиль должен быть обёрткой, отметьте опцию Wrapper.

Форма добавления нового стиля: название, тип, класс

При желании добавьте CSS прямо в разделе «CSS Styles», но рекомендуется править файл editor-style.css в папке темы — так проще управлять версиями.

Редактирование CSS-стилей через интерфейс плагина

После сохранения вы увидите новое выпадающее меню «Formats» (Форматы) в визуальном редакторе. Оттуда можно применять созданные стили — плагин добавит соответствующую разметку и классы.

Выпадающее меню Форматы в редакторе

Если editor-style.css содержит нужные правила, вы увидите результат прямо в редакторе.

Применённый стиль отображается в редакторе

Примечание: если вы отключите или удалите плагин, созданный файл editor stylesheet останется, но опции в редакторе станут недоступны.

2. Ручной метод (без плагина)

Ручной способ делится на две части:

добавить кнопку форматов в панель TinyMCE;
подключить editor-style.css, чтобы стили отображались в редакторе.

Добавление кнопки стилей в панель TinyMCE

Вставьте следующий код в конец файла functions.php вашей темы (или дочерней темы). Код добавляет элемент ‘styleselect’ во вторую строку кнопок редактора и прописывает набор преднастроек.

// Callback function to insert 'styleselect' into the $buttons array  
function my_mce_buttons_2($buttons){  
array_unshift($buttons,'styleselect');  
return$buttons;  
}  
  
// Register our callback to the appropriate filter  
add_filter('mce_buttons_2','my_mce_buttons_2');  
  
// Callback function to filter the MCE settings  
function my_mce_before_init_insert_formats($init_array){  
  
// Define the style_formats array  
$style_formats=array(  
  
// Each array child is a format with it's own settings  
array(  
'title'=>'.translation',  
'block'=>'blockquote',  
'classes'=>'translation',  
'wrapper'=>true,  
),  
  
array(  
'title'=>'⇠.rtl',  
'block'=>'blockquote',  
'classes'=>'rtl',  
'wrapper'=>true,  
),  
  
array(  
'title'=>'.ltr⇢',  
'block'=>'blockquote',  
'classes'=>'ltr',  
'wrapper'=>true,  
),  
  
);  
  
// Insert the array, JSON ENCODED, into 'style_formats'  
$init_array['style_formats']=json_encode($style_formats);  
return$init_array;  
}  
  
// Attach callback to 'tiny_mce_before_init'  
add_filter('tiny_mce_before_init','my_mce_before_init_insert_formats');

Пояснения к полям в массиве стилей:

title — отображаемое имя в списке форматов;
block — тип HTML-блока (p, div, blockquote и т.д.);
classes — CSS-класс, который будет добавлен;
wrapper — true, если стиль должен обернуть выделенный блок (создать новый блок-обёртку).

Дублируйте массив, чтобы добавить новые преднастройки.

Пример добавленных опций в редактор через код

Создание файла editor-style.css

Создайте файл editor-style.css в каталоге темы и добавьте в него правила, соответствующие классам из style_formats. Затем подключите этот файл в functions.php:

//Add custom editor stylesheet  
function mte_add_editor_styles(){  
    add_editor_style('editor-style.css');  
}  
add_action('init','mte_add_editor_styles');

Загрузите изменённые files на сервер (functions.php и editor-style.css). После этого преднастроенные стили будут доступны в редакторе и будут отображаться в режиме визуального редактирования.

Применённый стиль отображается в редакторе, пример 2

Стиль в WYSIWYG-редакторе после подключения editor-style.css

Практические рекомендации и чеклист перед внедрением

Чеклист разработчика:

Сделайте резервную копию functions.php и темы перед правками.
Используйте дочернюю тему для кастомизаций, чтобы обновления не перезаписали изменения.
Согласуйте имена классов со стилями фронтенда (BEM-стиль или единый нейминг).
Убедитесь, что editor-style.css подключается корректно (в темах с namespace или нестандартной структуре путь может отличаться).
Тестируйте в разных браузерах и блоках: параграфы, заголовки, списки, цитаты, галереи.

Рекомендации по именованию стилей:

Используйте префиксы, например .site-btn, .site-note, .lead для избежания конфликтов.
Описательные названия облегчают работу редакторам: «Синяя кнопка — Blue Button», «Примечание — Note». При локализации в админке — используйте понятные надписи.

Когда этот подход не сработает (крайние случаи)

Тема полностью переопределяет стили редактора и не даёт подключить editor-style.css стандартным способом.
Конструкторы страниц (Elementor, WPBakery и др.) могут игнорировать TinyMCE и свои стили применять отдельно.
Плагины безопасности или оптимизации могут блокировать динамическое создание/запись файлов в папку темы.

Если сталкиваетесь с такими ограничениями, рассмотрите альтернативы (см. ниже).

Альтернативные подходы

Использовать кастомные блоки Gutenberg с преднастроенными вариантом класса и стилями — современный путь для сайтов на блоках.
Создать пользовательские Shortcodes, которые рендерят нужную обёртку и класс — удобно для повторяемых элементов.
Использовать кастомный TinyMCE-плагин (JS) для более сложных взаимодействий.

Минимальная методология внедрения (шаги)

Определите набор стилей, которые нужны редакторам (максимум 6–10 простых вариантов).
Назначьте имена классов и добавьте CSS в тему.
Выберите метод внедрения (плагин или вручную).
Создайте тестовый пост и проверьте отображение в редакторе и на фронтенде.
Обучите редакторов, составьте краткий гайд с примерами.
Включите мониторинг багов и собирайте обратную связь.

Роль‑ориентированные чеклисты

Для разработчика:

Резервная копия темы;
Создан editor-style.css;
Добавлены и протестированы классы;
Проведено кроссбраузерное тестирование;
Документация для редакторов.

Для контент‑менеджера:

Понимание, где находится выпадающее меню «Форматы»;
Примеры использования каждого стиля;
Стандарт по применению (когда использовать .lead, .note, .btn и т.д.).

Отладка и типичные ошибки

Не видите выпадающий список Форматы: проверьте, добавлен ли ‘styleselect’ в mce_buttons_2.
Стили видны в редакторе, но не применяются на сайте: убедитесь, что фронтенд-стили содержат те же селекторы и нет более специфичных правил, которые перезаписывают их.
Ошибка при добавлении JSON: используйте json_encode в PHP, чтобы избежать проблем с форматированием.

Безопасность и GDPR (коротко)

Добавление CSS и преднастроек не затрагивает персональные данные. Однако при использовании пользовательских плагинов проверяйте их репутацию и права доступа.
Избегайте записи чувствительных данных в public CSS-файлы.

Матричная сводка: Плагин vs Ручной метод

Скорость внедрения: Плагин > Ручной
Контроль над кодом: Ручной > Плагин
Требуемые навыки: Плагин — базовые, Ручной — PHP/WordPress theme знания
Совместимость с конструкторами: может варьироваться — тестируйте

Примеры и шаблоны (cheat sheet)

Пример CSS для синей кнопки (editor-style.css):

.site-btn {
  display: inline-block;
  padding: 10px 18px;
  background: #1e73be;
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
}
.site-note {
  border-left: 4px solid #f0c14b;
  background:#fff9e6;
  padding:12px 16px;
}

Соответствующий массив в functions.php (пример для ручного метода):

array(
  'title'=>'Синяя кнопка',
  'block'=>'a',
  'classes'=>'site-btn',
  'wrapper'=>false,
),
array(
  'title'=>'Примечание',
  'block'=>'div',
  'classes'=>'site-note',
  'wrapper'=>true,
),

Короткий гайд для редакторов (пример):

Чтобы выделить блок как «Примечание», выделите абзац → Форматы → Примечание.
Для кнопки: выделите ссылку → Форматы → Синяя кнопка.

Критерии приёмки

Стили отображаются в редакторе WYSIWYG и соответствуют фронтенду.
Все новые классы не конфликтуют с существующими стилями темы.
Редакторы получили краткую инструкцию и подтверждают, что могут применить стили без переключения в текстовый режим.

Часто задаваемые вопросы

Q: Нужно ли удалять плагин после создания editor-style.css?
A: Если вы используете плагин для управления стилями и его функционал вам больше не нужен, можно удалить плагин. Однако все настройки, добавленные плагином в интерфейс, исчезнут, а созданный файл стилей останется.

Q: Поддерживает ли Gutenberg этот метод?
A: Gutenberg использует собственные механизмы и блоки. Для блокового редактора лучше создавать кастомные блоки или использовать поддержку editor-style.css для блоков, но механизм добавления «Formats» ориентирован на классический TinyMCE.

Итог

Добавление пользовательских стилей в редактор WordPress повышает скорость создания контента и уменьшает количество ошибок. Если вы хотите простое решение — установите TinyMCE Custom Styles. Если вам важен контроль и интеграция с темой — реализуйте ручной метод через functions.php и editor-style.css. Обязательно протестируйте результат в редакторе и на фронтенде, используйте дочернюю тему и документируйте изменения.

Важно: начните с малого: определите 3–5 ключевых стилей, протестируйте их, обучите редакторов и затем расширяйте набор по потребности.

Спасибо, если у вас есть вопросы или вы хотите пример массива стилей под вашу тему — оставьте комментарий с описанием структуры темы и списка требуемых стилей.