add_editor_style() │ WP 3.0.0

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

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

Если используется дочерняя тема:

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

Хуков нет.

Возвращает

null. Ничего не возвращает.

Использование

add_editor_style( $stylesheet );

$stylesheet(строка/массив)

Путь к CSS-файлу относительно папки темы или полный HTTP/HTTPS URL.

Например, для файла в корне темы укажите my-editor-style.css, а для файла в подпапке - css/editor.css.

Несколько файлов передавайте массивом.

По умолчанию: 'editor-style.css'

Примеры

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

Добавьте в functions.php темы:

add_action( 'after_setup_theme', 'my_theme_add_editor_styles' );

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

Создайте файл editor-styles.css в корне темы. Например:

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

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

Эти селекторы предназначены для TinyMCE. Для редактора блоков используйте обычные селекторы, как в примере №5.

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

Для TinyMCE можно импортировать стили темы в файл editor-styles.css:

@import url( 'style.css' );

body {
	padding: 0;
	background: #fff;
}

Путь в @import отсчитывается от расположения файла editor-styles.css. Если оба файла находятся в корне темы, достаточно style.css. Если файл темы находится в подпапке css, укажите css/style.css.

Для редактора блоков предпочтительнее зарегистрировать файлы отдельно:

add_action( 'after_setup_theme', 'my_theme_add_editor_styles' );

function my_theme_add_editor_styles() {
	add_theme_support( 'editor-styles' );

	add_editor_style( [
		'style.css',
		'editor-styles.css',
	] );
}

Проверьте, что общие стили темы не нарушают работу элементов редактора.

#3 Выбор файла стилей по типу записи

Пример подключает editor_styles_post.css для записей и editor_styles_page.css для страниц. Файлы должны находиться в корне темы.

add_action( 'after_setup_theme', 'my_theme_setup_editor_styles' );
add_action( 'current_screen', 'my_theme_add_post_type_editor_styles' );

function my_theme_setup_editor_styles() {
	add_theme_support( 'editor-styles' );
}

function my_theme_add_post_type_editor_styles( $screen ) {
	if ( 'post' !== $screen->base ) {
		return;
	}

	$styles = [
		'post' => 'editor_styles_post.css',
		'page' => 'editor_styles_page.css',
	];

	if ( isset( $styles[ $screen->post_type ] ) ) {
		add_editor_style( $styles[ $screen->post_type ] );
	}
}

Работает на экранах создания и редактирования записи.

#4 Использование шрифтов Google

Можно передать URL файла CSS с описанием шрифта:

add_action( 'after_setup_theme', 'my_theme_add_editor_fonts' );

function my_theme_add_editor_fonts() {
	add_theme_support( 'editor-styles' );

	add_editor_style( [
		'https://fonts.googleapis.com/css?family=Lato:300,400,700',
		'editor-styles.css',
	] );
}

В файле editor-styles.css задайте шрифт:

body {
	font-family: 'Lato', sans-serif;
}

Запятые в URL перед подключением к TinyMCE WordPress кодирует автоматически.

В редакторе блоков CSS по URL загружается сервером через wp_remote_get(). Поэтому URL должен быть доступен серверу. Ошибка запроса, например из-за самоподписанного SSL-сертификата, препятствует загрузке CSS.

#5 Стили для редактора блоков

add_action( 'after_setup_theme', 'guten_editor_styles' );

function guten_editor_styles() {
	add_theme_support( 'editor-styles' );
	add_editor_style( 'style-editor.css' );
}

В блочной теме строку add_theme_support( 'editor-styles' ) можно убрать: эта поддержка включена автоматически.

Создайте файл style-editor.css в корне темы:

body {
	font-family: Arial, sans-serif;
	color: #222;
	background-color: #fff;
}

a {
	color: #0073aa;
}

Правила для body применятся к области содержимого редактора.

Подробнее читайте здесь.

function add_editor_style( $stylesheet = 'editor-style.css' ) {
	global $editor_styles;

	add_theme_support( 'editor-style' );

	$editor_styles = (array) $editor_styles;
	$stylesheet    = (array) $stylesheet;

	if ( is_rtl() ) {
		$rtl_stylesheet = str_replace( '.css', '-rtl.css', $stylesheet[0] );
		$stylesheet[]   = $rtl_stylesheet;
	}

	$editor_styles = array_merge( $editor_styles, $stylesheet );
}