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

Вы хотели бы добавлять свои стили в визуальный редактор WordPress? Это позволило бы вам быстро применять форматирование, не переключаясь на текстовый редактор. В этой статье мы вам покажем как можно добавлять свои стили в визуальный редактор WordPress. Учтите, что статья требует некоторых минимальных знаний в CSS.

Когда и зачем могут понадобиться свои стили для визуального редактора WordPress

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

Всегда можно переключиться с визуального редактора в текстовый и добавить нужный CSS и HTML-код. Однако если вы пользуетесь некоторыми стилями на регулярной основе, то лучше всего добавить их в визуальный редактор. Так вы сэкономите себе время, потраченное на переключение с одного редактора на другой. Но что важнее всего, так это то, что вы сможете легко изменить стили без необходимости редактировать посты на своем сайте.

Способ 1: добавьте стили в визуальный редактор при помощи плагина

Первым делом вам необходимо установить и активировать плагин TinyMCE Custom Styles. Если хотите узнать более подробно, то обратите внимание на наш материал как установить плагин для WordPress.

После активации вам нужно будет зайти в Settings > TinyMCE Custom Styles, чтобы настроить сам плагин. Плагин позволяет вам указать где находятся файлы с таблицами стилей. Затем вам нужно нажать кнопку Save All Settings. Теперь вы можете добавлять собственные стили. Вам нужно прокрутить немного вниз и выбрать кнопку Add new style. Сперва от вас потребуется ввести заголовок для вашего стиля. Этот заголовок будет отображаться в выпадающем меню. Затем надо выбрать что за элемент это будет. Потом добавьте CSS класс и ваши условия как это показано на скриншоте ниже.

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

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

Способ 2: вручную добавьте стили в визуальный редактор WordPress

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

Шаг 1. Добавьте выпадающий список в визуальный редактор WordPress

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

[php]
function wpb_mce_buttons_2($buttons) {
array_unshift($buttons, ‘styleselect’);
return $buttons;
}
add_filter(‘mce_buttons_2’, ‘wpb_mce_buttons_2’);
[/php]

Шаг 2. Добавьте параметры выбора в выпадающий список

Теперь вам нужно будет добавить опции в выпадающее меню, которое вы только что создали. Затем вы сможете выбирать различные стили. Ради инструкции мы будем добавлять три собственных стиля, чтобы создать кнопки и контент-блок. Вам потребуется добавить нижеприведенный код в файл functions.php вашего шаблона или специфичный плагин вашего сайта.

[php]
/*
* Callback function to filter the MCE settings
*/

function my_mce_before_init_insert_formats( $init_array ) {

// Define the style_formats array

$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,
),
);
// Insert the array, JSON ENCODED, into ‘style_formats’
$init_array[‘style_formats’] = json_encode( $style_formats );

return $init_array;

}
// Attach callback to ‘tiny_mce_before_init’
add_filter( ‘tiny_mce_before_init’, ‘my_mce_before_init_insert_formats’ );
[/php]

Теперь можете добавлять новый пост и щелкнуть по меню Formats. Вы увидите доступные теперь стили. Однако их выбор пока что никак не отразится в редакторе.

Шаг 3. Добавляем стили CSS

Теперь последний шаг это добавить правила CSS для ваших стилей. Вам понадобится добавить этот код в файлы style.css и editor-style.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, то вам понадобится его создать. Затем вам нужно будет загрузить этот файл в корневую директорию вашего шаблона и добавить следующий код в файл functions.php

[php]
function my_theme_add_editor_styles() {
add_editor_style( ‘custom-editor-style.css’ );
}
add_action( ‘init’, ‘my_theme_add_editor_styles’ );
[/php]

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

Наша специальность — разработка и поддержка сайтов на WordPress. Контакты для бесплатной консультации — [email protected], +371 29394520