add_editor_style()
Подключает файл стилей 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 в основную таблицу стилей.
Заметки
-
С версии 3.4. WordPress подключит файл стилей, указанный в параметре $stylesheet, только в случае его существования, т.е. если будет пройдена проверка is_file(). Поэтому, если передать строку "editor.css?version=1.0" она работать не будет.
-
В версии 3.4. при подключении файла из дочерней темы, функция не подключала этот файл, если файл с таким же путем уже был подключен из родительской темы. С версии 3.5. это поведение было изменено и файлы подключаются из обеих: дочерней и родительской темы.
- Функция использует глобальную переменную: $editor_styles.
Хуков нет.
Возвращает
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.7.2
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 );
}