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

/

Вы хотите добавить собственные стили в визуальный редактор WordPress? Добавление пользовательских стилей позволяет быстро применить форматирование, не переключаясь в текстовый редактор. В этой статье мы покажем вам, как добавлять собственные стили в визуальный редактор WordPress.

Добавление пользовательских стилей в визуальный редактор WordPress

Примечание. Это руководство требует базовых практических знаний CSS.

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

По умолчанию визуальный редактор WordPress поставляется с некоторыми базовыми параметрами форматирования и стиля. Однако иногда вам могут понадобиться собственные стили для добавления кнопок CSS, блоков содержимого, слоганов и т. Д.

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

Это сэкономит вам время, затрачиваемое на переключение между текстовым и визуальным редактором. Это также позволит вам последовательно использовать одни и те же стили на всем вашем сайте.

Самое главное, вы можете легко настраивать или обновлять стили, не редактируя сообщения на своем веб-сайте.

Сказав это, давайте посмотрим, как добавлять собственные стили в визуальный редактор WordPress.

Метод 1. Добавление пользовательских стилей в визуальный редактор с помощью подключаемого модуля

Первым делом вам необходимо установить и активировать плагин TinyMCE Custom Styles. Для получения дополнительной информации см. Наше пошаговое руководство по установке плагина WordPress.

После активации вам необходимо перейти на страницу «Настройки» »Пользовательские стили TinyMCE, чтобы настроить параметры плагина.

Настройки пользовательских стилей TinyMCE

Плагин позволяет выбрать расположение файлов таблиц стилей. Он может использовать таблицы стилей вашей темы или дочерней темы, либо вы можете выбрать собственное местоположение.

После этого вам нужно нажать кнопку «Сохранить все настройки», чтобы сохранить изменения.

Теперь вы можете добавлять свои собственные стили. Вам нужно прокрутить немного вниз до раздела стилей и нажать кнопку «Добавить новый стиль».

Сначала вам нужно ввести название стиля. Этот заголовок будет отображаться в раскрывающемся меню. Затем вам нужно выбрать, является ли это встроенным, блочным или селекторным элементом.

После этого добавьте класс CSS, а затем добавьте свои правила CSS, как показано на скриншоте ниже.

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

После того, как вы добавили стиль CSS, просто нажмите кнопку «Сохранить все настройки», чтобы сохранить изменения.

Теперь вы можете редактировать существующее сообщение или создать новое. Вы увидите раскрывающееся меню «Формат» во второй строке визуального редактора WordPress.

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

Просто выделите текст в редакторе, а затем выберите свой собственный стиль в раскрывающемся меню «Форматы», чтобы применить его.

Теперь вы можете предварительно просмотреть свой пост, чтобы убедиться, что ваши стили применены правильно.

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

Этот метод требует, чтобы вы вручную добавляли код в файлы WordPress. Если вы добавляете код в WordPress впервые, ознакомьтесь с нашим руководством по добавлению фрагментов кода из Интернета в WordPress.

Шаг 1. Добавьте раскрывающееся меню пользовательских стилей в визуальном редакторе WordPress.

Сначала мы добавим раскрывающееся меню «Форматы» в визуальный редактор WordPress. Это раскрывающееся меню позволит нам выбрать и применить наши собственные стили.

Вам необходимо добавить следующий код в файл functions.php вашей темы или в плагин для конкретного сайта.

<?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 вашей темы или в плагин для конкретного сайта.

<?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(
        /*
         * 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,          
        ),      
    );
    // 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' );   

Теперь вы можете добавить новую запись в WordPress и щелкнуть раскрывающееся меню «Форматы» в визуальном редакторе. Вы заметите, что ваши пользовательские стили теперь отображаются под форматами.

Однако выбор их сейчас не имеет никакого значения в редакторе сообщений.

Шаг 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;  
} 
.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;  
}  

Пользовательские стили в редакторе сообщений WordPress

Таблица стилей редактора контролирует внешний вид вашего контента в визуальном редакторе. Проверьте документацию по вашей теме, чтобы узнать, где находится этот файл.

Если в вашей теме нет файла таблицы стилей редактора, вы всегда можете его создать. Просто создайте новый файл CSS и назовите его custom-editor-style.css.

Вам необходимо загрузить этот файл в корневой каталог вашей темы, а затем добавить этот код в файл functions.php вашей темы.

<?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.

Нужна помощь с WordPress? Свяжитесь сейчас
[email protected]

Это переведенная версия оригинальной статьи от wpbeginner, весь контент, изображения и авторство принадлежит автору

Как создавать и продавать онлайн-курсы с помощью WordPress (шаг за шагом)

Знаете ли вы, что с помощью WordPress можно создать успешный онлайн-курс? Продажа онлайн-курсов - это популярная бизнес-идея в Интернете, которую можно

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

Недавно один из наших читателей спросил, можно ли разрешить участникам редактировать одобренные сообщения? Роли пользователей WordPress позволяют

7 способов поднять настроение с помощью вашего сайта WordPress

Вы ищете способы продвигать настоящий дух праздника на своем веб-сайте WordPress? Это лучшее время, чтобы поделиться с пользователями радостями сезона,

Как подключить Constant Contact к WordPress (шаг за шагом)

Вы используете ConstantContact для электронного маркетинга? Хотите подключить ConstantContact к своему сайту WordPress? В этом полном руководстве мы покажем вам,