Как подключить стили в визуальном редакторе WordPress TinyMCE

add_editor_style() подключает файл стилей css для визуального редактора TinyMCE.

Функция проверяет наличие файла стилей css указанного в параметре $stylesheet. Путь к файлу должен быть указан относительно каталога темы. Если файл найден, то он подключается, если не найден, то функция пытается найти файл по умолчанию editor-style.css в каталоге темы.

Если используется дочерняя тема, то проверяются оба каталога: дочерний и родительский, и в случае наличия двух файлов, файлы будут объединены и подключены.

Чтобы подключать файл не относительно каталога темы, а относительно каталога плагина, используйте фильтр «mce_css».

Вешать событие нужно до того, как TinyMCE сконфигурирован. Не следует вешать на init (потому что нужно только для админки), на admin_init (потому что срабатывает при AJAX). Можно повесить например на current_screen, admin_menu…

Хуков нет.

#1 Подключим файл стилей к визуальному редактору WordPress

Подключает файл стилей к редактору WordPress TinyMCE. В итоге, при редактировании записи мы будем видеть стилизованный контент. Например, можно скопировать стили с лицевой части сайта и при редактировании поста мы будем сразу видеть, как выглядит контент во фронт-энде.

Сначала добавьте следующий код в файл темы functions.php:

function my_theme_add_editor_styles() {
	add_editor_style( 'editor-styles.css' );
}
add_action( 'current_screen', 'my_theme_add_editor_styles' );

Затем, создайте файл с именем editor-styles.css в каталоге темы. И впишите в него CSS правила, которые будут применены к визуальному редактору TinyMCE. Содержание файла может выглядеть так:

body#tinymce.wp-editor { 
	font-family: Arial, Helvetica, sans-serif; 
	margin: 10px; 
}

body#tinymce.wp-editor a {
	color: #4CA6CF;
}

#2 Использование стилей темы

Также можно подключить стили темы в этот файл с помощью CSS правила @import. Сделайте все как в первом примере и в файл editor-styles.css добавьте такую строку:

@import url( 'style.css' );

/* Добавьте правила сброса для тега body. Укажем нулевой отступ и белый фон */
body { padding: 0; background: #fff; }

Предполагается, что файл editor-styles.css лежит в каталоге темы и файл стилей темы (style.css) тоже лежит в этом каталоге. Если файл стилей темы (style.css) лежит, в папке «css» каталога темы, то путь нужно будет указать такой:
@import url( ‘css/style.css’ );