WordPress как на ладони

add_editor_style()WP 3.0.0

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

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

Эта функция также подключает стили для Редактора Блоков Gutenberg. Особенности подключения читайте здесь.

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

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

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

RTL (письмо с права налево)

Эта функция автоматически добавляет еще один файл стилей стилей с префиксом-rtl, например, editor-style-rtl.css. Если этот файл не существует, он удаляется перед добавлением стилей в TinyMCE. Если передается массив с файлов стилей, RTL префикс добавляется только для первого файла.

Начиная с версии 3.4 <body> тег TinyMCE имеет класс .rtl. Лучше использовать этот класс и добавить любые стили RTL в основную таблицу стилей.

Заметки

  1. С версии 3.4. WordPress подключит файл стилей, указанный в параметре $styleweet, только в случае его существования, т.е. если будет пройдена проверка file_exists(). Поэтому, если передать строку "editor.css?version=1.0" она работать не будет.

  2. В версии 3.4. при подключении файла из дочерней темы, функция не подключала этот файл, если файл с таким же путем уже был подключен из родительской темы. С версии 3.5. это поведение было изменено и файлы подключаются из обеих: дочерней и родительской темы.

  3. Функция использует глобальную переменную: $editor_styles.

Хуков нет.

Возвращает

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

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

add_editor_style( $stylesheet );
$stylesheet(строка/массив)
Путь до файла стилей относительно папки темы. Например, если файл находится в папке темы, то нужно просто указать название файла: my-editor-style.css. Можно указать несколько путей в массиве.
По умолчанию: "editor-style.css"

Примеры

1

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

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

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

add_action( 'current_screen', 'my_theme_add_editor_styles' );
function my_theme_add_editor_styles() {

	add_editor_style( 'editor-styles.css' );
	// необходимая поддержка add_theme_support( 'editor-style' ); активируется автоматом
}

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

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

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

#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' );

0

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

Чтобы подключить файл стилей опираясь на то, какой тип записи мы редактируем, можно использовать следующий код в файле темы functions.php. Подразумевается, что файлы стилей с названиями: editor_styles_{тип_поста}.css уже находятся в папке темы.

add_action( 'current_screen', 'my_theme_add_editor_styles' );
function my_theme_add_editor_styles($screen){
	if( $screen->base !== 'post' ) return;

	global $post;

	$post_type = isset($post->post_type) ? $post->post_type : ( isset($_GET['post_type']) ? $_GET['post_type'] : 'post' );

	add_editor_style( 'editor_styles_' . $post_type . '.css' );
}
0

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

API Google шрифтов позволяет подключать несколько вариантов шрифта, одной ссылкой для CSS (варианты разделяются запятыми). Запятые должны быть кодированы, перед тем как строку передать в обработку add_editor_styles(). Выглядит это так:

add_action( 'current_screen', 'my_theme_add_editor_styles' );
function my_theme_add_editor_styles() {
	$font_url = 'http://fonts.googleapis.com/css?family=Lato:300,400,700';
	$font_url = str_replace( ',', '%2C', $font_url );
	add_editor_style( $font_url );
}
0

#5 Стили для Редактора блоков Гутенберг

add_action( 'after_setup_theme', 'guten_editor_styles' );
function guten_editor_styles(){

	add_theme_support( 'editor-styles' ); // обязательно!
	add_editor_style( 'style-editor.css' );

}

Теперь надо создать файл 'style-editor.css' в корне темы и написать туда css стили. Подробнее читайте здесь.

Заметки

  • Global. Массив. $editor_styles

Список изменений

С версии 3.0.0 Введена.

Код add_editor_style() WP 6.4.3

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 );
}
2 комментария
    Войти