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

Сайт OnWordpress.ru продается

Оптимальная цена 300 000 рублей

Подробнее

Визуальный редактор в WordPress достаточно мощный инструмент для создания и редактирования записей. Но все же, иногда возникает необходимость добавить собственный стили в визуальный редактор WordPress. Создание и добавление собственных стилей позволит вам наиболее полно настроить визуальный редактор под собственные нужды.

Подключаем собственные стили к визуальному редактору

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

function my_mce_styles($buttons)
{
 array_unshift($buttons, 'styleselect');
 return $buttons;
}
add_filter('mce_buttons_2', 'my_mce_styles');

Теперь в визуальном редакторе будет отображаться выпадающий список со стандартными стилями. Чтобы в выпадающем списке отображались необходимые вам стили, добавьте их с помощью следующего кода, который также необходимо поместить в файл functions.php:

function my_style_before_init($init_array)
 {

 $init_array['theme_advanced_styles'] = "Жирный шрифт=bold_line;Кнопка=custom-button";
 return $init_array;
}
add_filter('tiny_mce_before_init', 'my_style_before_init');

add_editor_style();

Сейчас, если вы все сделали верно, в визуальном редакторе у вас должна быть следующая картина:

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

Вероятно, нужно пояснить одну строку кода:

$init_array['theme_advanced_styles'] = "Жирный шрифт=bold_line;Кнопка=custom-button";

С помощью этой строки кода добавляются новые стили в визуальный редактор. Отредактируйте ее по собственному желанию. В данном примере bold_line - это класс, который присваивается определенному элементу в визуальном редакторе.

Оформляем собственные стили для визуального редактора

Но для того, чтобы присвоенные стили сработали, необходимо прописать нужные свойства в файле style.css и в файле editor-style.css. Для данного примера код будет следующим:

.bold_line {
	font-weight: bold;
}

 

Расскажите друзьям
Нравится блог? - Читайте ВКонтакте
Ответим на Ваши вопросы в комментариях