Пользовательские стили в визуальном редакторе WordPress

Опубликовано: 7 сентября 2016 г.
  • wordpress
Хотите узнать как добавить пользовательские стили в визуальный редактор WordPress? Это позволит быстро применять форматирование, не переключаясь в текстовый редактор. В этой статье мы покажем вам как добавить в визуальный редактор WordPress пользовательские стили.
Добавляем пользовательские стили в визуальный редактор в WordPress
Изучение этого учебника потребует от вас базового знания CSS.

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

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

Визуальный редактор в WordPress

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

Давайте посмотрим как можно добавлять пользовательские стили в визуальном редакторе WordPress.

Способ 1: используем плагин

Первое, что вам нужно сделать, это установить и активировать плагин TinyMCE Custom Styles. После активации вам нужно зайти на страницу Settings → TinyMCE Custom Styles для конфигурирования настроек плагина.

TinyMCE Custom Styles settings

Плагин позволяет выбрать расположение файлов стилей. Он может использовать вашу тему, стили дочерней темы, или вы можете указать путь к вашим собственным стилям. После этого вам нужно будет нажать на кнопку "Save All Settings" для сохранения изменений. Теперь вы можете добавить свои собственные стили.

Прокрутите немного вниз к разделу style (стиль) и нажмите на кнопку Add new style (Добавить новый стиль). Прежде всего, вам необходимо ввести название для стиля (оно будет отображаться в выпадающем меню), а затем выбрать его type (тип): встроенный, блочный или переключатель. После этого вам останется добавить CSS-класс, а затем добавить свои CSS-правила как показано на рисунке ниже:

Добавление нового пользовательского стиля в Wordpress

После того, как вы добавили CSS-стиль, нажмите на кнопку "Save All Settings" («Сохранить все настройки») для сохранения изменений. Теперь вы можете редактировать существующую запись или создать новую. Вы заметите выпадающее меню Formats (Форматы) во втором ряду окна редактора WordPress.

Пользовательский стиль меню в TinyMCE

Выделите какой-нибудь текст в редакторе, а затем выберите свой собственный стиль в выпадающем меню Formats (Форматы), чтобы применить его. После этого, вы можете просмотреть свой пост, чтобы убедиться, что пользовательские стили отображаются правильно.

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

Этот метод потребует правку кода 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-виджеты.

Популярные статьи
2D игра на Unity. Подробное руководство. Часть 1
  • unity
2D игра на Unity. Подробное руководство. Часть 1
Адаптивный слайдер без Javascript на CSS3
  • слайдер
Адаптивный слайдер без Javascript на CSS3
Работа с Unity в 2D
  • unity
Работа с Unity в 2D
2D игра на Unity. Подробное руководство. Часть 3
  • unity
2D игра на Unity. Подробное руководство. Часть 3
2D игра на Unity. Подробное руководство. Часть 4
  • unity
2D игра на Unity. Подробное руководство. Часть 4
2D игра на Unity. Подробное руководство. Часть 5
  • unity
2D игра на Unity. Подробное руководство. Часть 5
2D игра на Unity. Подробное руководство. Часть 6
  • unity
2D игра на Unity. Подробное руководство. Часть 6
Учебник по новому GUI в Unity. Часть 2.
  • unity
Учебник по новому GUI в Unity. Часть 2.
Учебник по новому GUI в Unity. Часть 1.
  • unity
Учебник по новому GUI в Unity. Часть 1.

HTML LESS LESS React
Онлайн журнал для профессиональных веб-дизайнеров и программистов
БлогПлагиныГрафикаИнструменты
CanvasSPAcssjavascriptjqueryphotoshopphpunitywordpress{"fieldValue":[{"image_preview":"","image_demo":"","example":""}],"fieldSettings":{"autoincrement":1}}{"fieldValue":[{"image_preview":"https://cdn-images-1.medium.com/max/800/1*OIBUnA4NokXK14IMR5csTw.jpeg","image_demo":"https://cdn-images-1.medium.com/max/800/1*OIBUnA4NokXK14IMR5csTw.jpeg","example":""}],"fieldSettings":{"autoincrement":1}}Аудио/Видеоаккордеонанимациябазы данныхбраузерные игрыверсткагалереяграфикакартыкнопкименюпараллаксподсказкипопаппрелоадерслайдертаймерформычекбоксыэлементы интерфейса
© 2009-2017 WebSketches.ru