add_editor_style

Подключает файл стилей css для визуального редактора TinyMCE.

Функция проверяет наличие файла стилей css указанного в параметре $stylesheet. Путь к файлу должен быть указан относительно каталога темы. Если файл найден, то он подключается, если не найден, то функция пытается найти файл по умолчанию editor-style.css в каталоге темы.

Если используется дочерняя тема, то проверяются оба каталога: дочерний и родительский, и в случае наличия двух файлов, файлы будут объединены и подключены.

Чтобы подключать файл не относительно каталога темы, а относительно каталога плагина, используйте фильтр “mce_css“.

Вешать событие нужно до того, как TinyMCE сконфигурирован. Не следует вешать на init (потому что нужно только для админки), на admin_init (потому что срабатывает при AJAX). Можно повесить например на current_screen, admin_menu

Хуков нет.

Возвращает

Ничего не возвращает.

Использование

add_editor_style( $stylesheet );
$stylesheet(строка/массив)
Путь до файла стилей относительно папки темы. Например, если файл находится в папке темы, то нужно просто указать название файла – ‘my-editor-style.css’.
По умолчанию: “editor-style.css”

Примеры

#1 Подключим файл стилей к визуальному редактору WordPress

Подключает файл стилей к редактору WordPress TinyMCE. В итоге, при редактировании записи мы будем видеть стилизованный контент. Например, можно скопировать стили с лицевой части сайта и при редактировании поста мы будем сразу видеть, как выглядит контент во фронт-энде.

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

function my_theme_add_editor_styles() {
	add_editor_style( 'editor-styles.css' );
}
add_action( 'current_screen', 'my_theme_add_editor_styles' );

Затем, создайте файл с именем 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' );
}

#5 Использование шрифтов Google

API Google шрифтов позволяет подключать несколько вариантов шрифта, одной ссылкой для CSS (варианты разделяются запятыми). Запятые должны быть кодированы, перед тем как строку передать в обработку 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_action( 'current_screen', 'my_theme_add_editor_styles' );

Заметки

  1. С версии 3.4. WordPress подключит файл стилей, указанный в параметре $styleweet, только в случае его существования, т.е. если будет пройдена проверка file_exists(). Поэтому, если передать строку “editor.css?version=1.0” она работать не будет.

  2. В версии 3.4. при подключении файла из дочерней темы, функция не подключала этот файл, если файл с таким же путем уже был подключен из родительской темы. С версии 3.5. это поведение было изменено и файлы подключаются из обеих: дочерней и родительской темы.

  3. Функция использует глобальную переменную: $editor_styles.

Код из


wp-includes/theme.php

WP 4.7.2

<?php
function add_editor_style( $stylesheet = 'editor-style.css' ) {
	add_theme_support( 'editor-style' );

	if ( ! is_admin() )
		return;

	global $editor_styles;
	$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 );
}

Комментарии:


Оставить комментарий

Your email address will not be published. Required fields are marked *