Как добавлять собственные стили в визуальный редактор 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 вашего шаблона или специальный плагин.
function wpb_mce_buttons_2($buttons) {
array_unshift($buttons, 'styleselect');
return $buttons;
}
add_filter('mce_buttons_2', 'wpb_mce_buttons_2');
Шаг 2. Добавьте параметры выбора в выпадающий список
Теперь вам нужно будет добавить опции в выпадающее меню, которое вы только что создали. Затем вы сможете выбирать различные стили. Ради инструкции мы будем добавлять три собственных стиля, чтобы создать кнопки и контент-блок. Вам потребуется добавить нижеприведенный код в файл functions.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' );
Теперь можете добавлять новый пост и щелкнуть по меню Formats. Вы увидите доступные теперь стили. Однако их выбор пока что никак не отразится в редакторе.
Шаг 3. Добавляем стили CSS
Теперь последний шаг это добавить правила CSS для ваших стилей. Вам понадобится добавить этот код в файлы style.css и editor-style.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;
}
Последняя таблица стилей управляет тем, как отображается ваш контент в визуальном редакторе. Если в вашем шаблоне отсутствует файл 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. Контакты для бесплатной консультации — [email protected], +371 29394520
Однако несмотря на все это, процесс может занять некоторое время. Вы можете все это дело ускорить, подав запрос на удаление кэша.
