Функция add_editor_style() в WordPress
Функция add_editor_style() позволяет подключать определенные CSS-файлы к визуальному редактору TinyMCE в WordPress.
Как это работает
Функция проверяет, указан ли файл стилей в параметре $stylesheet. Путь к этому файлу должен быть относительным к директории вашей темы. Если файл найден, он подключается. Если файл не найден, функция пытается найти файл по умолчанию editor-style.css в директории темы.
Проверка в дочерней теме
Если вы используете дочернюю тему, функция проверяет как директорию дочерней, так и родительской темы. Если в обеих темах есть файлы с одинаковыми именами, будут подключены оба.
Когда вызывать функцию
Эту функцию следует вызывать до настройки TinyMCE, например, используя хуки current_screen или admin_menu. Не рекомендуется вызывать эту функцию в хуках init или admin_init, так как она нужна только в админке.
Если вы хотите подключить файл, который находится не в директории темы, а, например, в директории плагина, используйте фильтр mce_css.
Поддержка RTL (правостороннего чтения)
Функция автоматически добавляет еще один стиль с префиксом -rtl, например, editor-style-rtl.css. Если такого файла нет, он удаляется, прежде чем будут добавлены остальные файлы стилей. Если в функцию передается массив стилей, префикс -rtl будет добавлен только к первому стилю.
С версии 3.4 <body> в редакторе TinyMCE получает CSS-класс .rtl, и лучше использовать этот класс для добавления стилей для правостороннего чтения.
Особые примечания
- С версии 3.4 WordPress связывает файл, указанный в
$stylesheet, только если он существует. Например, если указать строкуeditor.css?version=1.0, она не сработает. - Начиная с версии 3.5, если файл из дочерней темы уже подключен из родительской, функция тоже подключит файл из дочерней.
- Функция использует глобальную переменную
$editor_styles.
Использование функции
Чтобы использовать функцию add_editor_style(), напишите следующий код:
add_editor_style( $stylesheet );Где $stylesheet — это название файла стилей или массив этих названий, который должен быть относительным к корню вашей темы. По умолчанию используется editor-style.css.
Пример использования
Вот несколько примеров, как можно использовать эту функцию:
Пример 1: Подключение стилей темы
Чтобы в файле editor-styles.css использовать стили темы, вы можете добавить следующую строку:
@import url( 'style.css' );
/* Настройки для сброса стилей. Задайте нулевые отступы и белый фон */
body { padding: 0; background: #fff; }Предполагается, что файл editor-styles.css находится в директории темы, а файл стилей темы style.css тоже там.
Пример 2: Стили для редактора Gutenberg
Когда вы хотите подключить стили для редактора Gutenberg, добавьте следующий код в файл functions.php вашей темы:
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-стили.
Пример 3: Подключение файла стилей к визуальному редактору
add_action( 'current_screen', 'my_theme_add_editor_styles' );
function my_theme_add_editor_styles() {
add_editor_style( 'editor-styles.css' );
}Создайте файл editor-styles.css в директории темы и добавьте в него стили для визуального редактора.
Пример 4: Выбор файла стилей в зависимости от типа записи
Чтобы подключить файл стилей в зависимости от типа записываемого материала, используйте следующий код:
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' );
}Пример 5: Использование шрифтов Google
API шрифтов Google позволяет подключать несколько вариантов шрифта. Вот как это сделать:
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 );
}Заключение
Функция add_editor_style() — мощный инструмент для настройки визуального редактора WordPress. С помощью неё вы можете легко подключать необходимые стили, делая процесс редактирования более удобным и визуально понятным.