Хотите узнать как добавить пользовательские стили в визуальный редактор WordPress? Это позволит быстро применять форматирование, не переключаясь в текстовый редактор. В этой статье мы покажем вам как добавить в визуальный редактор WordPress пользовательские стили.
Изучение этого учебника потребует от вас базового знания CSS.
Почему и когда вам могут понадобиться пользовательские стили в редакторе для WordPress
По умолчанию визуальный редактор в WordPress поставляется с некоторыми основными опциями для форматирования и задания стилевых свойств.
Тем не менее, вам могут понадобиться пользовательские стили, чтобы добавить кнопку, блоки контента, ключевые слова и т.д. Вы всегда можете переключиться из визуального на текстовый редактор и добавить нужный HTML и CSS коды. Но, если вы регулярно используете некоторые стили, то было бы лучше, если бы их можно было добавлять в визуальном редакторе. Это позволит сэкономить время, затрачиваемое на переключение между разными типами редакторов, и позволит использовать одни и те же стили по всему сайту. Кроме того, вы можете легко настроить или обновить стили без необходимости редактировать сообщения на вашем сайте.
Давайте посмотрим как можно добавлять пользовательские стили в визуальном редакторе WordPress.
Способ 1: используем плагин
Первое, что вам нужно сделать, это установить и активировать плагин TinyMCE Custom Styles. После активации вам нужно зайти на страницу Settings → TinyMCE Custom Styles для конфигурирования настроек плагина.
Плагин позволяет выбрать расположение файлов стилей. Он может использовать вашу тему, стили дочерней темы, или вы можете указать путь к вашим собственным стилям. После этого вам нужно будет нажать на кнопку "Save All Settings" для сохранения изменений. Теперь вы можете добавить свои собственные стили.
Прокрутите немного вниз к разделу style (стиль) и нажмите на кнопку Add new style (Добавить новый стиль). Прежде всего, вам необходимо ввести название для стиля (оно будет отображаться в выпадающем меню), а затем выбрать его type (тип): встроенный, блочный или переключатель. После этого вам останется добавить CSS-класс, а затем добавить свои CSS-правила как показано на рисунке ниже:
После того, как вы добавили CSS-стиль, нажмите на кнопку "Save All Settings" («Сохранить все настройки») для сохранения изменений. Теперь вы можете редактировать существующую запись или создать новую. Вы заметите выпадающее меню Formats (Форматы) во втором ряду окна редактора WordPress.
Выделите какой-нибудь текст в редакторе, а затем выберите свой собственный стиль в выпадающем меню Formats (Форматы), чтобы применить его. После этого, вы можете просмотреть свой пост, чтобы убедиться, что пользовательские стили отображаются правильно.
Способ 2: добавление стилей в визуальный редактор Wordpress вручную
Этот метод потребует правку кода WordPress файлов.
Шаг 1: добавление пользовательских стилей в выпадающее меню в WordPress
Во-первых, мы добавим меню Formats в визуальном редакторе 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-функция для фильтрации параметров MCE */
function my_mce_before_init_insert_formats( $init_array ) {
// Определяем массив style_formats
$style_formats = array(
// Каждый дочерний массив – это формат со своими собственными настройками
// Каждый массив имеет аргументы title, block, classes и wrapper
// 'title' - название, которое будет отображаться в меню Formats
// 'block' - тип блока (span, div, переключатель или внутриблочный)
// 'classes' добавляет CSS класс элементу
// 'wrapper' – добавлять/не добавлять новый эл-т к любому из выбранных эл-тов
array(
'title' => 'Блок с содержимым',
'block' => 'span',
'classes' => 'content-block',
'wrapper' => true,
),
array(
'title' => 'Синяя кнопка',
'block' => 'span',
'classes' => 'blue-button',
'wrapper' => true,
),
array(
'title' => 'Красная кнопка',
'block' => 'span',
'classes' => 'red-button',
'wrapper' => true,
)
);
// Внутри массива, JSON закодирован в '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');
Однако, сейчас их выбор не создает никаких отличий в редакторе.
Шаг 3: добавляем CSS стили
В заключение, добавим 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;
}
.red-button,
.blue-button {
background-color:#33bdef;
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;
border-color: #942911;
}
Таблица стилей в редакторе контролирует появление вашего контента в визуальном редакторе. Обратитесь к документации вашей темы, чтобы узнать местоположение этого файла. Если у вашей темы еще нет файла таблицы стилей, то вы всегда можете создать. Просто создайте новый файл CSS и назовиmе его 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-виджеты.