add_editor_style()
Подключает кастомный CSS-файл для визуального редактора TinyMCE.
Ищет указанный файл в директории текущей темы (и родительской, если используется дочерняя). Далее:
- Если файл найден, то он подключается
- Если не найден, то функция пытается найти и подключить файл
editor-style.cssиз в папки темы.
Если указанный файл существует в дочерней и родительской теме, то будут подключены оба файла стилей.
Эта функция также подключает стили для Редактора Блоков Gutenberg. Особенности подключения читайте здесь.
Когда вызывать функцию?
Вызывать функцию нужно до того, как TinyMCE сконфигурирован, например на хуках:
Не следует вешать:
- на init, потому что нужно только для админки.
- на admin_init, потому что срабатывает при AJAX.
Чтобы подключить CSS из другого места (например, плагина) — используй фильтр mce_css.
RTL (письмо с права налево)
Эта функция автоматически добавляет еще один файл стилей стилей с префиксом-rtl, например, editor-style-rtl.css. Если этот файл не существует, он удаляется перед добавлением стилей в TinyMCE. Если передается массив файлов стилей, RTL префикс добавляется только для первого файла.
Начиная с версии 3.4 <body> тег TinyMCE имеет класс .rtl. Лучше использовать этот класс и добавить любые стили RTL в основную таблицу стилей.
Заметки:
С версии 3.4. WordPress подключит файл стилей, указанный в параметре $stylesheet, только если он существует - пройдена проверка is_file(). Поэтому, например, если передать строку editor.css?ver=1.0 она работать не будет.
Похожие хуки:
-
enqueue_block_assets — позволяет подключить стили и скрипты и для фронтенда, и для редактора блоков (в том числе внтури iframe). Используется для общих стилей и скриптов блоков, которые должны быть везде. Например, для CSS, который оформляет блоки на сайте и в редакторе.
- enqueue_block_editor_assets — позволяет подключить стили и скрипты только в редакторе Gutenberg (в админке). Используется для ресурсов, которые нужны исключительно для работы редактора (например, панели настроек блока, стили для панели и т.п.).
Хуков нет.
Возвращает
null. Ничего не возвращает.
Использование
add_editor_style( $stylesheet );
- $stylesheet(строка/массив)
Путь до файла стилей относительно папки темы.
Например, если файл находится в папке темы, то нужно просто указать название файла:
my-editor-style.css.Можно указать несколько путей в массиве.
По умолчанию: "editor-style.css"
Примеры
#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;
} #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' );
#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' );
} #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 );
} #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() add editor style WP 6.9.4
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 );
}