Содержание статьи
Отключите встроенные стили редактора через remove_editor_styles() и подключите собственный файл CSS – это даст полный контроль над внешним видом текста при редактировании. Пример:
function my_custom_editor_styles() {
remove_editor_styles();
add_editor_style(\'custom-editor-style.css\');
}
add_action(\'admin_init\', \'my_custom_editor_styles\');
Панель по умолчанию не даёт точной настройки отступов, заголовков второго уровня, межстрочного интервала. Расширенный плагин позволяет вынести эти параметры в один клик, добавив кнопки Format, Font Sizes, Line Height. Без них невозможно добиться единообразного оформления контента.
Неприятный факт: вставка HTML-тегов вручную – это не про производительность. Лучше добавить кнопку Insert HTML через фильтр tiny_mce_before_init. Код:
function enable_html_button($init) {
$init[\'extended_valid_elements\'] = \'span[*],div[*]\';
return $init;
}
add_filter(\'tiny_mce_before_init\', \'enable_html_button\');
Важно: редактор по умолчанию удаляет теги при переключении между вкладками Visual и Text. Это ломает структуру контента. Настраивайте фильтрацию вручную!
Раздражает отсутствие кнопки <h3> в панели? Добавьте её через массив $buttons в mce_buttons:
function custom_buttons($buttons) {
array_push($buttons, \'styleselect\');
return $buttons;
}
add_filter(\'mce_buttons\', \'custom_buttons\');
Поддержка классов, необходимых для корректного отображения блоков сетки, должна быть явно указана в настройках. Без этого они будут вычищены. Настройте valid_elements вручную.
Внимание! Если ваш шаблон использует нестандартные классы для типографики, добавляйте их в настройки whitelisted classes. Иначе пользователь не сможет применить нужное форматирование из редактора.
Сохранение структуры документа при копировании из Google Docs? Только через разрешение стилей и тегов span, sup, sub. Без этой настройки весь текст превращается в кашу.
Зачем использовать возможности ограниченной панели, если можно вытащить на поверхность весь функционал? Проблема не в контенте, а в интерфейсе ввода. Мышление должно идти от макета – а не от того, что доступно в панели.
Как добавить и настроить дополнительные панели инструментов в TinyMCE Advanced
Открой Настройки → Письмо и активируй опцию Включить классический редактор, если блоковый отключён. Затем перейди к разделу Настройки → Расширенный визуальный редактор.
Перед тобой – сетка. Верхние строки – активные панели. Ниже – неиспользуемые кнопки. Хочешь больше панелей? Жми «+» под последней строкой – появится новая пустая панель.
Перетаскивай иконки мышкой. Добавляй всё, что нужно: стили, размер шрифта, вставку таблиц, очистку форматирования. Не тяни ненужное – чем меньше визуального мусора, тем быстрее пишется текст.
Важно! Новые панели применяются только к классическому блоку и старым типам контента. В блок-редакторе они игнорируются.
Если нужен кодовый редактор рядом – добавь кнопку Исходный код. Она даёт доступ к HTML-разметке без лишней нагрузки. Но помни: сохранение через неё перезаписывает стили, будь осторожен.
Можно создать разные конфигурации для пользователей с разными ролями. Для этого используй фильтр tiny_mce_before_init в functions.php:
add_filter(\'tiny_mce_before_init\', \'custom_toolbar_config\');
function custom_toolbar_config($init) {
if (current_user_can(\'editor\')) {
$init[\'toolbar1\'] = \'formatselect,bold,italic,underline,|,bullist,numlist,|,link,unlink\';
$init[\'toolbar2\'] = \'styleselect,fontsizeselect,|,forecolor,backcolor\';
}
return $init;
}
Слишком много кнопок? Отключи вторую и третью строку – редактор станет чище. Работает быстрее, грузится легче. А главное – пользователи не запутаются.
Внимание! Некоторые плагины могут внедрять собственные элементы в панели. Отключай конфликтующие расширения через консоль или фильтруй кнопки программно.
Для ускоренного редактирования таблиц добавь в третью панель кнопки table, tabledelete, tablecellprops, tablerowprops. Без них – как без рук, особенно при форматировании расписаний и прайс-листов.
Никаких украшательств. Только нужные функции. Только контроль. Выжми из интерфейса максимум – пусть он работает на тебя, а не наоборот.
Настройка пользовательских стилей для контента через TinyMCE Advanced
Сразу включите отображение выпадающего списка стилей. В панели настроек перетащите Formats в нужную область панели инструментов. Без этого – ничего не заработает.
Далее – определите собственные классы. Откройте файл functions.php активной темы и добавьте:
function custom_mce_formats( $init ) {
$style_formats = array(
array(
\'title\' => \'Синий заголовок\',
\'block\' => \'h2\',
\'classes\' => \'blue-heading\'
),
array(
\'title\' => \'Пунктирный блок\',
\'block\' => \'div\',
\'classes\' => \'dashed-box\'
)
);
$init[\'style_formats\'] = json_encode( $style_formats );
return $init;
}
add_filter( \'tiny_mce_before_init\', \'custom_mce_formats\' );
Созданные классы нужно описать в style.css темы. Например:
.blue-heading {
color: #0a74da;
font-weight: bold;
}
.dashed-box {
border: 2px dashed #999;
padding: 15px;
background-color: #f9f9f9;
}
Панель визуального форматирования не подхватывает стили автоматически. Пропишите путь к таблице стилей через фильтр:
add_editor_style( \'editor-style.css\' );
Этот файл должен существовать в корне темы. Либо укажите путь вручную:
function custom_editor_styles() {
add_editor_style( \'assets/css/editor.css\' );
}
add_action( \'admin_init\', \'custom_editor_styles\' );
Внимание! Если классы не отображаются – проверьте кэш браузера и включённые плагины, мешающие загрузке CSS в админке.
Убедитесь, что класс не переопределяется глобальными стилями редактора. Префиксы, специфичность, !important – применяйте жёстко, если всё ломается.
Важно помнить: В списке стилей отображаются только те, что явно заданы в
style_formats. Сторонние классы – игнорируются.
Нет нужды городить кучу классов – лучше 3 чётких, чем 30 безликих. Не копируйте из чужих шаблонов. Пишите под задачу. Смысл теряется – стиль мёртв.
Надоело однообразие? Добавьте иконки через ::before в CSS. Но не перегружайте. Фокус – на читаемость.
Тестируйте в разных браузерах. Иногда Chrome и Firefox рендерят editor-style.css по-разному. Нюанс? Да. Критично? Ещё как.
Отключение и управление автоматическим форматированием в редакторе
Сначала отключите функцию wpautop – автоматическую вставку абзацев. Это делается через фильтр:
remove_filter(\'the_content\', \'wpautop\');
remove_filter(\'the_excerpt\', \'wpautop\');
Но этого недостаточно. Даже если фильтр удалён, визуальный режим может всё испортить при переключении. Решение – отключить TinyMCE p-обёртки:
add_filter(\'tiny_mce_before_init\', function($init) {
$init[\'wpautop\'] = false;
$init[\'apply_source_formatting\'] = true;
return $init;
});
Внимание! Даже с отключённым wpautop, Gutenberg продолжает добавлять свои теги. Используйте классический блок или плагин Classic Editor для полной свободы.
Системные теги могут возвращаться при каждом сохранении. Один неверный пробел – и лишние обёртки снова в коде. Решение? Прекратите использовать визуальный режим для таких блоков совсем.
- Используйте HTML-блоки в режиме кода.
- Сохраняйте структуру вручную, избегая переключений между режимами.
- Отключите автоформатирование через
functions.phpили кастомный плагин.
Важно помнить: любые изменения форматирования будут бессмысленны, если контент продолжает редактироваться в визуальном режиме.
Для точной разметки – отключайте автоматические фильтры и работайте строго в текстовом режиме. Без компромиссов. Только так можно контролировать разметку на 100%.