Функция add_editor_style() в WordPress с примерами

Главная - WordPress Codex - Функция add_editor_style() в WordPress с примерами
Доступна с версии: 3.0
Раздел: CSS и JS
Написал: Александр Сокирка

Функция add_editor_style() в WordPress используется для подключения пользовательских CSS-стилей к визуальному редактору TinyMCE и редактору блоков Gutenberg. Она позволяет разработчикам тем стилизовать контент в редакторах, чтобы он выглядел аналогично содержимому на сайте.

add_editor_style( array|string $stylesheet = ‘editor-style.css’ )

Описание

Функция подключает CSS-файл (или массив файлов) для визуального редактора TinyMCE. Путь к файлу указывается относительно корня активной темы. По умолчанию подключается файл editor-style.css.

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

Начиная с WordPress 3.4, тег <body> в TinyMCE имеет класс .rtl, что позволяет стилизовать редактор для RTL-языков с помощью этого класса.

Параметры

  • $stylesheet (строка|массив): Имя файла стилей или массив файлов, которые необходимо подключить. Путь указывается относительно корня темы.
    • По умолчанию: 'editor-style.css'.

Пример 1: Подключение кастомного стиля для TinyMCE

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

add_action( 'admin_init', 'my_theme_add_editor_styles' );
function my_theme_add_editor_styles() {
    add_editor_style( 'custom-editor-style.css' );
}

Затем создайте файл custom-editor-style.css в корневом каталоге вашей темы. В этот файл можно добавить любые CSS-правила, которые будут применены к редактору. Пример содержимого файла:

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

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

Пример 2: Использование Google Fonts

Чтобы подключить шрифты из Google Fonts, можно использовать следующий код:

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

Пример 3: Подключение стилей для Gutenberg

Для подключения стилей в редакторе блоков Gutenberg используйте:

add_action( 'after_setup_theme', 'guten_editor_styles' );
function guten_editor_styles() {
    add_theme_support( 'editor-styles' ); // включаем поддержку стилей редактора
    add_editor_style( 'gutenberg-editor-style.css' );
}

Теперь создайте файл gutenberg-editor-style.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' );
}

Этот код подключает файл стилей для каждого типа записи. Например, для типов записей post или page, создайте файлы editor_styles_post.css и editor_styles_page.css.

Взаимодействие с Gutenberg

Когда стили подключаются через add_editor_style() для редактора блоков Gutenberg, они автоматически добавляются как inline-стили с префиксом .editor-styles-wrapper. Это значит, что стили, например, для тега body, будут автоматически преобразованы в .editor-styles-wrapper.

Пример:

/* Для фронтенда */
body { color: red; }

/* Для редактора Gutenberg */
.editor-styles-wrapper { color: red; }

Особенности использования

  1. RTL стили: Файл с суффиксом -rtl добавляется автоматически, но только для первого файла в массиве.
  2. Стили темы: Можно использовать CSS-правило @import, чтобы подключить стили основного сайта в редакторе.
  3. SSL в локальной разработке: Если вы используете самоподписанный SSL-сертификат, убедитесь, что относительный путь к файлу стилей работает корректно, так как запросы могут не пройти проверку SSL.

Заключение

Функция add_editor_style() — это мощный инструмент для стилизации редакторов WordPress. Используя ее, разработчики могут обеспечить консистентное отображение контента в редакторе и на фронтенде сайта.

Стартовая премиум тема для WordPress
Демо импорт тестового контента в 1 клик.
SEO оптимизированный и валидный код.
Множество готовых стартовых сайтов.
Лучшая документация и поддержка.
Опции персонализации контента.
Креативный и современный дизайн.
Тема для WordPress

Дополнительно по: CSS и JS