Хотите ли вы добавить пользовательские стили в визуальном редакторе WordPress? Добавление пользовательских стилей позволяет быстро применять форматирование, не переключаясь на текстовый редактор. В этой статье мы покажем вам, как добавить пользовательские стили в визуальный редактор WordPress.
Примечание: Этот учебник требует базовых знаний CSS.
Зачем и когда нужны пользовательские стили для визуального редактора WordPress
По умолчанию, визуальный редактор WordPress поставляется с некоторыми базовыми опциями форматирования и стилей. Однако иногда вам могут понадобиться собственные стили для добавления CSS-кнопок, блоков контента, тегов и т.д.
Вы всегда можете переключиться с визуального на текстовый редактор и добавить пользовательские HTML и CSS. Но если вы регулярно используете некоторые стили, то будет лучше добавить их в визуальный редактор, чтобы вы могли легко использовать их повторно.
Это позволит вам сэкономить время на переключение между текстовым и визуальным редактором. Это также позволит вам последовательно использовать одни и те же стили на всем вашем сайте.
Самое главное, вы можете легко настраивать или обновлять стили без необходимости редактировать посты на вашем сайте.
Сказав это, давайте рассмотрим, как добавить пользовательские стили в визуальный редактор WordPress.
Способ 1: Добавление пользовательских стилей в визуальный редактор с помощью плагина
Первое, что вам нужно сделать, это установить и активировать плагин TinyMCE Custom Styles. Для более подробной информации смотрите наше пошаговое руководство по установке плагина WordPress.
После активации вам необходимо посетить Настройки » Пользовательские стили TinyMCE страница для настройки параметров плагина.
Плагин позволяет выбрать расположение файлов таблицы стилей. Он может использовать таблицы стилей вашей темы или дочерней темы, или вы можете выбрать собственное местоположение.
После этого нужно нажать на кнопку «Сохранить все настройки», чтобы сохранить изменения.
Теперь вы можете добавить свои собственные стили. Прокрутите страницу вниз до раздела стилей и нажмите на кнопку Добавить новый стиль.
Сначала вам нужно ввести название для стиля. Этот заголовок будет отображаться в выпадающем меню. Далее вам нужно выбрать, будет ли это элемент инлайн, блок или селектор.
После этого добавьте класс CSS, а затем добавьте свои правила CSS, как показано на скриншоте ниже.
После добавления стиля CSS просто нажмите на кнопку «Сохранить все настройки», чтобы сохранить изменения.
Теперь вы можете отредактировать существующий пост или создать новый. Вы заметите выпадающее меню Формат во второй строке визуального редактора WordPress.
Просто выделите текст в редакторе, а затем выберите пользовательский стиль из выпадающего меню «Форматы», чтобы применить его.
Теперь вы можете предварительно просмотреть свой пост, чтобы убедиться, что пользовательские стили применены правильно.
Метод 2: Вручную добавьте пользовательские стили в визуальный редактор WordPress
Этот метод требует, чтобы вы вручную добавили код в файлы WordPress. Если вы впервые добавляете код в WordPress, то ознакомьтесь с нашим руководством по добавлению фрагментов кода из Интернета в WordPress.
Шаг 1: Добавьте выпадающее меню пользовательских стилей в визуальном редакторе WordPress
Сначала мы добавим выпадающее меню «Форматы» в визуальном редакторе WordPress. Выпадающее меню позволит нам выбрать и применить наши пользовательские стили.
Вам нужно добавить следующий код в функции вашей темы.php-файл или плагин для конкретного сайта.
function wpb_mce_buttons_2($buttons) < array_unshift($buttons, 'styleselect'); return $buttons; >add_filter('mce_buttons_2', 'wpb_mce_buttons_2');
Шаг 2: Добавление опций в выпадающее меню
Теперь вам нужно добавить опции в выпадающее меню, которое вы только что создали. Затем вы сможете выбрать и применить эти параметры из выпадающего меню «Форматы».
В данном уроке мы добавим три пользовательских стиля для создания блока контента и кнопок.
Вам нужно будет добавить следующий код в функции вашей темы.php-файл или плагин для конкретного сайта.
/* * Функция обратного вызова для фильтрации настроек MCE */ function my_mce_before_init_insert_formats( $init_array ) < // Define the style_formats array $style_formats = array( /* * Each array child is a format with it's own settings * Notice that each array has title, block, classes, and wrapper arguments * Title is the label which will be visible in Formats menu * Block defines whether it is a span, div, selector, or inline style * Classes allows you to define CSS classes * Wrapper whether or not to add a new block-level element around any selected elements */ 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' );
Теперь вы можете добавить новый пост в WordPress и нажать на выпадающее меню «Форматы» в визуальном редакторе. Вы заметите, что ваши пользовательские стили теперь видны под форматами.
Однако их выбор сейчас не имеет никакого значения в редакторе постов.
Шаг 3: Добавьте стили CSS
Теперь последний шаг — добавить правила стилей CSS для ваших пользовательских стилей.
Вам нужно будет добавить этот 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; >.синяя кнопка < 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
Таблица стилей редактора управляет внешним видом вашего контента в визуальном редакторе. Проверьте документацию вашей темы, чтобы узнать расположение этого файла.
Если в вашей теме нет файла стилей редактора, то вы всегда можете создать его. Просто создайте новый файл CSS и назовите его custom-editor-style.css .
Вам нужно загрузить этот файл в корневой каталог вашей темы, а затем добавить этот код в функции вашей темы.php файл.
function my_theme_add_editor_styles() < add_editor_style( 'custom-editor-style.css' ); >add_action( 'init', 'my_theme_add_editor_styles' );
Это все. Вы успешно добавили свои пользовательские стили в визуальный редактор WordPress. Не стесняйтесь играть с кодом, добавляя свои собственные элементы и стили.
Надеемся, что эта статья помогла вам узнать, как добавить пользовательские стили в визуальный редактор WordPress. Вы также можете посмотреть наше руководство о том, как добавить пользовательские стили к виджетам WordPress.
Источник: www.wpbeginner.com