Как добавить собственные стили в визуальный редактор WordPress

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

Примечание: Эта статья предполагает наличие базовых знаний CSS.

Ручное добавление произвольных стилей в визуальный редактор WordPress

Начнем мы с добавления ваших собственных стилей и опций форматирования в визуальный редактор WordPress без установки плагинов.

В виду того, что вы будете редактировать файлы вашей темы, не забудьте сделать бекап вашей темы.

Для того, чтобы не увеличивать размер статьи, для примера мы добавить произвольные стили для блока контента и собственную кнопку CSS для вставки в запись.

Для начала нам необходимо добавить выпадающее меню для наших стилей в визуальный редактор WordPress.

Просто скопируйте и вставьте следующий код в файл functions.php вашей темы или в плагин для сайта WordPress:

function wpb_mce_buttons_2($buttons) {
	array_unshift($buttons, 'styleselect');
	return $buttons;
}
add_filter('mce_buttons_2', 'wpb_mce_buttons_2');

Этот код добавить выпадающее меню styleselect во второй строке кнопок. Если вторая строка у вас не видна, кликните соответствующую кнопку, чтобы ее отобразить.

После добавления выпадающего меню, следующим шагом будет заполнение его опциями. Просто скопируйте и вставьте следующий код в файл functions.php вашей темы или в плагин для сайта WordPress:

/*
* Функция вызова фильтра для настроек MCE
*/

function my_mce_before_init_insert_formats( $init_array ) {

// Определяем массив style_formats

	$style_formats = array(
		// Каждый дочерний элемент  - формат со своими собственными настройками
		array(
			'title' => 'Content Block',
			'block' => 'span',
			'classes' => 'content-block',
			'wrapper' => true,

		),
		array(
			'title' => 'Blue Button',
			'block' => 'span',
			'classes' => 'blue-button',
			'wrapper' => true,
		),
		array(
			'title' => 'Red Button',
			'block' => 'span',
			'classes' => 'red-button',
			'wrapper' => true,
		),
	);
	// Вставляем массив, JSON ENCODED, в 'style_formats'
	$init_array['style_formats'] = json_encode( $style_formats );

	return $init_array;

}
// Прикрепляем вызов к 'tiny_mce_before_init'
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );

В этом коде мы добавили три настройки в выпадающее меню. Блок контента, синюю и красную кнопки.

Если вы внимательно изучите этот код, то заметите, что каждый стиль форматирования содержит заголовок, блок, классы и контейнер. Заголовок — это то, что вы увидите в выпадающем меню TinyMCE вашего визуального редактора.

Блок — это название блока элемента для обработки выделенного текста. Мы использовали span, вы же можете указать любой другой элемент на ваше усмотрение. Класс добавит CSS класс элементу.

После добавления этого кода вы можете перейти в редактор, где увидите новое выпадающее меню с этими опциями. Однако, выбор любой из них не произведет никаких изменений. Необходимо прежде добавить правила CSS в файл таблицы стилей вашей темы.

Ниже CSS код, который мы использовали в примере.

.content-block {
    border:1px solid #eee;
    padding:3px;
    background:#ccc;
    max-width:250px;
    float:right;
    text-align:center;
}
.content-block:after {
    clear:both;
}
.blue-button {
	background-color:#33bdef;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #057fd0;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	padding:6px 24px;
	text-decoration:none;
}

.red-button {
	background-color:#bc3315;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #942911;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	padding:6px 24px;
	text-decoration:none;
}

Скопируйте и вставьте этот CSS в таблицу стилей вашей темы и в файл editor-style.css. Таблица стилей редактора контролирует внешний вид вашего контента в визуальном редакторе. Изучите документацию своей темы для того, чтобы определить где расположен этот файл.

Если же в вашей теме нет файла стилей редактора, то вы можете самостоятельно его создать. Просто создайте новый файл CSS и назовите его custom-editor-style.css, после чего загрузите в корень вашей темы. Затем добавьте следующий код уже в файл functions.php темы.

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

Вот и все. Вы успешно добавили собственные стили в визуальный редактор WordPress. Экспериментируйте и добавляйте свои элементы.

Используем плагин для добавления произвольных стилей в визуальный редактор WordPress

Следующий способ работает точно так же, как мы показали выше, однако у него в арсенале есть веб-интерфейс, поэтому вам не придется править файлы темы вручную.

Для начала вам необходимо установить и активировать плагин TinyMCE Advanced Professsional Formats and Styles. После установки, перейдите в Настройки » TinyMCE prof. Styles для конфигурирования плагина.

Плагин позволяет вам выбрать расположение файлов таблиц стилей. Он может использовать таблицу вашей темы или же дочерней, или вы можете выбрать произвольное его расположение. После этого необходимо кликнуть на кнопку «Сохранить изменения» для, собственно, сохранения изменений.

Для добавления новых опций стилей, необходимо прокрутить страницу настроек до секции стилей и нажать на кнопку Add new style.

Сначала укажите заголовок для стиля. Этот заголовок будет отображаться в выпадающем меню. Затем выберите типа элемента: inline, block, или selector. После этого добавьте CSS класс, а затем — собственные CSS правила как показано на скриншоте ниже.

После того, как вы добавили стили CSS, просто кликните на кнопку Save Settings.

Для тестирования созданных стилей либо отредактируйте существующую запись, либо создайте новую. Вы увидите выпадающее меню Format во второй строке визуального редактора.

Надеемся, что эта статья помогла вам добавить собственные стили в визуальный редактор WordPress. Экспериментируйте и создавайте любое количество стилей, которое вам необходимо и применяйте их в два клика.

По всем вопросам и отзывам просьба писать в комментарии ниже.

Не забывайте, по возможности, оценивать понравившиеся записи количеством звездочек на ваше усмотрение.