Визуальный редактор в 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; }