Добрый день! Я использую классический редактор WordPress и хочу добавить собственный стиль в виде кнопки в выпадающем селекте. Пытаюсь следовать гайду, но не вижу ни ошибок в консоли, ни новой кнопки в редакторе. Я уже установил Advanced Editor Tools и выбрал опцию "Create CSS classes menu", чтобы загрузить CSS-классы из файла editor-style.css и заменить меню форматов. Вот мой код:
```php
/* functions.php */
function custom_editor_styles() {
add_editor_style('editor-style.css'); // Подключите ваш файл стилей, если необходимо
}
function add_custom_format($formats) {
$formats['custom_format'] = 'Мой Пресет';
return $formats;
}
add_action('admin_init', 'custom_editor_styles');
add_filter('mce_buttons_2', 'add_custom_format');
```
```css
/* editor-style.css */
/* Общие стили для редактора */
body {
font-family: Arial, sans-serif; /* Основной шрифт */
line-height: 1.6; /* Высота строки */
}
/* Стили для вашего прессета */
.mce-content-body .custom_format {
font-size: 1.5em; /* Размер шрифта */
font-weight: bold; /* Жирный текст */
color: #0073aa; /* Цвет текста */
background-color: #f0f8ff; /* Цвет фона */
padding: 10px; /* Отступы */
border-left: 5px solid #0073aa; /* Левая граница */
margin-bottom: 20px; /* Отступ снизу */
}
```
Не могли бы вы подсказать, в чем может быть проблема?
Судя по вашему коду, вы правильно пытаетесь добавить кастомный стиль в классический редактор WordPress. Однако, есть несколько моментов, на которые стоит обратить внимание.
1. **Правильная фильтрация кнопок**: Вместо `mce_buttons_2` вы, возможно, хотите использовать фильтр `mce_formats`, чтобы добавить формат вашего пресета.
2. **Регистрация кастомного стиля**: Необходимо убедиться, что вы правильно добавляете CSS класс к элементу, который будет применяться при выборе вашего стиля в редакторе.
Вот пример того, как можно исправить ваш код:
```php
/* functions.php */
function custom_editor_styles() {
add_editor_style('editor-style.css'); // Подключите ваш файл стилей
}
add_action('admin_init', 'custom_editor_styles');
function add_custom_format($init_array) {
$style = array(
'title' => 'Мой Пресет', // Заголовок стиля
'block' => 'div', // Какой тег будет применён
'classes' => 'custom_format', // Название CSS класса
'wrapper' => true, // Устанавливает обертку
);
// Добавляем формат в инициализацию TinyMCE
$init_array['style_formats'][] = $style;
return $init_array;
}
add_filter('tiny_mce_before_init', 'add_custom_format');
```
3. **CSS файл**: Убедитесь, что ваш файл `editor-style.css` загружается корректно и содержит верные стили. Используйте инструменты для разработчиков в браузере, чтобы проверить, загружается ли этот файл.
4. **Проверка наличия стилей в редакторе**: Если вы не видите стиль в выпадающем списке, попробуйте очистить кэш вашего браузера и отключить плагины кэширования, чтобы обновить изменения.
5. **Настройка разрешений TinyMCE**: Если у вас есть плагины, которые модифицируют возможности редактора (например, TinyMCE Advanced), убедитесь, что они не блокируют ваши стили.
После применения этих изменений ваш пресет должен появиться в выпадающем меню стилей на панели инструментов редактора WordPress. Если у вас все еще возникают проблемы, проверьте наличие ошибок в консоли браузера и убедитесь, что используете актуальную версию WordPress.
Решил вопрос
Добавление в режиме html редактора
add_action( 'admin_print_footer_scripts', 'theme_add_quicktags', 99 ); function theme_add_quicktags() { if ( ! wp_script_is('quicktags') ) return; ?> <script> document.addEventListener( 'DOMContentLoaded', function(){ QTags.addButton( 'r4_div_blue', 'div_blue', '<div class="color-blue">', '</div>', 'd', 'Div blue', 1 ); QTags.addButton( 'r4_h3_blue', 'h3_blue', '<h3 class="color-blue">', '</h3>', 'h', 'H3 blue', 2 ); QTags.addButton( 'r4_ol_lg', 'ol_lg', '<ol class="lg-list">', '</ol>', 'o', 'Ol lg', 3 ); } ); </script> <?php } //QTags.addButton( id, display, arg1, arg2, access_key, title, priority, instance );
Добавление в режиме визуального редактора (кнопки )
tinymce-buttons.js
(function() { tinymce.create('tinymce.plugins.theme_buttons', { init : function(ed, url) { ed.addButton('r4_div_blue', { title : 'Div blue', icon: 'mce-ico mce-i-checkmark', // использование иконки Dashicons onclick : function() { ed.execCommand('mceInsertContent', false, '<div class="color-blue"></div>'); ed.label = 'Div blue'; } }); ed.addButton('r4_h3_blue', { title : 'H3 blue', icon: 'mce-ico mce-i-checkmark', // использование иконки Dashicons onclick : function() { ed.execCommand('mceInsertContent', false, '<h3 class="color-blue"></h3>'); ed.label = 'H3 blue'; } }); ed.addButton('r4_ol_lg', { title : 'Ol lg', icon: 'mce-ico mce-i-checkmark', // использование иконки Dashicons onclick : function() { ed.execCommand('mceInsertContent', false, '<ol class="lg-list"><li></li></ol>'); ed.label = 'Ol lg'; } }); } }); tinymce.PluginManager.add('theme_buttons', tinymce.plugins.theme_buttons); })();
function.php
function theme_tinymce_plugin($plugin_array) { $plugin_array['theme_buttons'] = get_template_directory_uri() . '/assets/js/tinymce-buttons.js?v=17'; // путь к вашему JS файлу return $plugin_array; } function theme_register_buttons($buttons) { array_push($buttons, 'r4_div_blue', 'r4_h3_blue', 'r4_ol_lg'); return $buttons; }
PS Осталось понять как в выпадающий список запихнуть прессеты.