Вы хотите добавить собственные стили в визуальный редактор WordPress? Добавление пользовательских стилей позволяет быстро применять форматирование, не обращаясь к текстовому редактору. В этой статье мы покажем вам, как добавлять собственные стили в визуальный редактор WordPress.
Примечание: Этот учебник требует базовых знаний CSS.
Когда будет вам нужно добавить собственный стиль в визуальный редактор WordPress?
По умолчанию визуальный редактор WordPress предлагает базовые параметры форматирования и стиля. Однако иногда вам понадобятся пользовательские стили, которые позволят вам, например, добавлять кнопки CSS, содержание, крючки и т. д.
Вы всегда можете переключиться с визуального редактора на текстовый и добавить собственный код HTML и CSS. Но если вы регулярно используете определенные стили, было бы лучше добавить их в визуальный редактор, чтобы вы могли легко использовать их повторно.
Это сэкономит вам огромное количество времени, а также позволит всегда использовать одни и те же стили везде на вашем Веб-сайт.
Что еще более важно, вы можете легко редактировать или обновлять стили без необходимости редактировать статьи на вашем сайте.
Теперь мы узнаем, как это сделать на WordPress.
Метод 1: добавление собственного стиля с помощью плагина
Первое, что вам нужно сделать, это установить и активировать плагин " TinyMCE Пользовательские стили ". Для получения более подробной информации см. наше пошаговое руководство по установке Плагин Wordpress.
После активации необходимо посетить Настройки> Настройки »Пользовательские стили TinyMCE Для настройки параметров плагина.
Плагин позволяет выбрать расположение файлов таблиц стилей. Он может использовать вашу тему или стиль дочерней темы, или вы можете выбрать собственное местоположение.
После этого вы должны нажать на кнопку " сохранить все настройки Чтобы сохранить ваши настройки.
Теперь вы можете добавить свои собственные стили. Вам нужно прокрутить до раздела стиля и нажать на кнопку Добавить новый стиль .
Сначала необходимо ввести название стиля. Этот заголовок будет отображаться в раскрывающемся меню. Тогда вам нужно определиться. Будь то строка, блок или элемент выбора.
После этого добавьте класс CSS, а затем добавьте свои правила CSS, как показано на скриншоте ниже.
После того, как вы добавили стиль CSS, просто нажмите кнопку «Сохранить все настройки», чтобы сохранить изменения.
Теперь вы можете редактировать существующую статью или создать новую. Вы увидите формат в раскрывающемся меню во втором ряду визуального редактора WordPress.
Просто выберите текст в редакторе, а затем выберите свой собственный стиль в раскрывающемся меню, чтобы применить его.
Теперь вы можете просмотреть свою статью, чтобы увидеть, правильно ли применяются ваши пользовательские стили.
Метод 2: добавление стилей в визуальный редактор вручную
Этот метод требует, чтобы вы вручную добавили код в ваши файлы WordPress. Если вы делаете это впервые, ознакомьтесь с нашим руководством о том, как добавить Плагин Wordpress.
Шаг 1: добавьте пользовательский стиль из выпадающего меню визуального редактора WordPress.
Сначала мы добавим раскрывающееся меню в визуальный редактор WordPress. Это раскрывающееся меню позволит нам выбрать и применить наши собственные стили.
Вы должны добавить следующий код в файл functions.php или плагин.
функция wpb_mce_buttons_2 ($ buttons) {array_unshift ($ buttons, 'styleselect'); return $ buttons; } add_filter ('mce_buttons_2', 'wpb_mce_buttons_2');
Шаг 2: Как добавить параметры в выпадающем меню
Теперь вам нужно будет добавить несколько параметров в только что созданное раскрывающееся меню. Затем вы сможете выбрать и применить эти параметры из форматов в раскрывающемся меню.
В этом уроке мы добавим три собственных стиля для создания содержание блок и кнопки.
Вам нужно будет добавить следующий код в файл functions.php вашего functions.php или определенного плагина.
/ * * Функция обратного вызова для фильтрации настроек MCE * / function my_mce_before_init_insert_formats ($ init_array) {// Определение массива style_formats $ style_formats = array (/ * * Каждый дочерний массив представляет собой формат со своими собственными настройками * Обратите внимание, что каждый массив имеет заголовок , аргументы блока, классов и оболочки * Заголовок - это метка, которая будет видна в меню Форматы * Блок определяет, является ли это диапазон, div, селектор или встроенный стиль * Классы позволяют вам определять классы CSS добавить новый элемент уровня блока вокруг любых выбранных элементов * / array ('title' => 'Content Block', '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 ENCODED в 'style_formats' $ init_array ['style_formats'] = json_encode ($ style_formats); вернуть $ init_array; } // Присоединяем обратный вызов к 'tiny_mce_before_init' add_filter ('tiny_mce_before_init', 'my_mce_before_init_insert_formats');
Теперь вы можете добавить новую запись в WordPress и выбрать форматы в раскрывающемся меню визуального редактора. Вы заметите, что теперь отображаются ваши пользовательские стили.
Однако их выбор не будет иметь никакого значения для визуального редактора WordPress.
Шаг 3: добавление стиля CSS
Теперь последний шаг - добавить правила стилей CSS для ваших пользовательских стилей.
Вам нужно будет добавить этот CSS в файл style.css вашей темы или дочерней темы.
.content-block {граница: 1px solid #eee; отступ: 3 пикселя; фон: #ccc; максимальная ширина: 250 пикселей; float: right; выравнивание текста: центр; } .content-block: после {ясно: оба; }. синяя-кнопка {цвет фона: # 33bdef; -moz-border-radius: 6 пикселей; -webkit-border-radius: 6 пикселей; радиус границы: 6 пикселей; граница: 1px solid # 057fd0; дисплей: встроенный блок; курсор: точка; цвет: #ffffff; отступ: 6px 24px; текстовое оформление: нет; }. красная кнопка {цвет фона: # bc3315; -moz-border-radius: 6 пикселей; -webkit-border-radius: 6 пикселей; радиус границы: 6 пикселей; граница: 1px solid # 942911; дисплей: встроенный блок; курсор: точка; цвет: #ffffff; отступ: 6px 24px; текстовое оформление: нет; }
Таблица стилей редактора управляет внешним видом вашего содержание в визуальном редакторе. Проверьте документацию, чтобы узнать, как найти местоположение этого файла.
Если в вашей теме нет файла таблицы стилей, вы всегда можете его создать. Просто создайте новый файл CSS и назовите его " Специально редактор style.css .
Вам необходимо загрузить этот файл в корневой каталог вашей темы, а затем добавить этот код в файл «functions.php» вашей темы.
Функция my_theme_add_editor_styles () {add_editor_style ( 'заказ редактор style.css'); } Add_action ( 'инициализации', 'my_theme_add_editor_styles');
Вот и все. Вы только что добавили свои собственные стили в визуальный редактор WordPress. Теперь вы можете сделать настройки, которые считаете правильными.
Не стесняйтесь поделиться этим учебником со своими друзьями в ваших любимых социальных сетях.
