Визуальный редактор в 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();Сейчас, если вы все сделали верно, в визуальном редакторе у вас должна быть следующая картина:
Вероятно, нужно пояснить одну строку кода:
$init_array['theme_advanced_styles'] = "Жирный шрифт=bold_line;Кнопка=custom-button";
С помощью этой строки кода добавляются новые стили в визуальный редактор. Отредактируйте ее по собственному желанию. В данном примере bold_line - это класс, который присваивается определенному элементу в визуальном редакторе.
Оформляем собственные стили для визуального редактора
Но для того, чтобы присвоенные стили сработали, необходимо прописать нужные свойства в файле style.css и в файле editor-style.css. Для данного примера код будет следующим:
.bold_line {
font-weight: bold;
}
