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 до основної таблиці стилів.

нотатки

З версії 3.4. WordPress підключить файл стилів, вказаний у параметрі $ styleweet , лише у разі його існування, тобто. якщо пройдено перевірка file_exists() . Тому, якщо передати рядок “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( 'after_setup_theme', '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.0.2}

wp-includes/theme.php

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);
}