Как добавить кнопки в редактор WordPress

Каждый автор, размещающий контент на сайте WordPress, пользуется редакторской панелью для оформления текста. В этой панели находятся кнопки для быстрого форматирования текста, такие как выделение цитаты, создание упорядоченных (ol) и неупорядоченных (ul) списков, а также выделение заголовков и прочее.

Стандартный набор кнопок в редакторе WordPress весьма обширен, но бывают ситуации, когда хотелось бы дополнить его собственными кнопками. Это могут быть заметки в виде разноцветных блоков или шорткод для вставки меню «Содержание статьи» и другое.

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

Добавляем свои кнопки в текстовый редактор WordPress

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

//дополнительные кнопки в текстовом редакторе
add_action('admin_footer', 'my_buttons');
function my_buttons() {
?>
<script>
jQuery(document).ready(function(){
if(typeof(QTags) !== 'undefined') {
QTags.addButton( 'Red', 'Red', '<div class="red">', '</div>' );
QTags.addButton( 'Yellow', 'Yellow', '<div class="yellow">', '</div>' );
QTags.addButton( 'Green', 'Green', '<div class="green">', '</div>' );
}
});
</script>
<?php
}

Для примера мы создали три блока с заданными классами. В результате этого действия в редакторе появятся три новые кнопки: Red, Yellow и Green. Когда вы нажмете на одну из этих кнопок, будет добавлен элемент <div> с соответствующим классом в область текста.

Если вы рассмотрите код, то заметите, что каждая кнопка создается с использованием функции QTags.addButton. Если вам нужно добавить еще несколько кнопок, просто продублируйте эту строку и задайте ей уникальный идентификатор, название и нужное содержимое. Вот пример:

QTags.addButton( 'идентификатор', 'название кнопки', 'открывающий тег', 'закрывающий тег' );

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

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

/* Добавляем выпадающее меню в визуальный редактор */
function my_buttons_menu_tiny($buttons) {
    array_unshift($buttons, 'styleselect');
    return $buttons;
}
add_filter('mce_buttons_2', 'my_buttons_menu_tiny');

function my_formats_tiny_v($init_array) {
    $style_formats = array(
        // Каждый дочерний элемент - формат со своими собственными настройками
        array(
            'title' => 'Заголовок с фоном',
            'block' => 'div',
            'classes' => 'background-title',
            'wrapper' => true,
        ),
        array(
            'title' => 'Выделенный текст',
            'block' => 'span',
            'classes' => 'text-bg',
            'wrapper' => true,
        ),
        array(
            'title' => 'Кнопка',
            'block' => 'a',
            'classes' => 'button-link',
            'attributes' => array(
                'href' => 'ссылка'
            ),
        ),
        array(
            'title' => 'Иконка',
            'block' => 'span',
            'classes' => 'my-icon',
        ),
        // Добавьте еще форматы по своему усмотрению
    );

    $init_array['style_formats'] = json_encode($style_formats);
    return $init_array;
}
add_filter('tiny_mce_before_init', 'my_formats_tiny_v');

Итак, мы добавили свои форматы (кнопки) в визуальный редактор в виде выпадающего списка для быстрого форматирования текста. У каждого этого блока есть свой класс, через который можно прописывать стили.

Если вы хотите добавить ещё больше таких форматов, просто продублируйте дочерней массив и задайте нужные параметры, а именно:

 array(
     'title' => 'Заголовок с фоном',
     'block' => 'div',
     'classes' => 'background-title',
     'wrapper' => true,
  ),

title: Название формата или стиля в редакторе (будет отображаться в панели редактора).
block: Тип HTML-элемента (например, span, div, тег ссылки и т.д.).
classes: CSS-класс, который будет применен к элементу.
wrapper: Определяет, будет ли текст обернут в тег (например, <div>) с указанным классом при применении формата.

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