Как добавить, изменить, удалить кнопки в редакторе WordPress без плагинов

Моя первая статья была о том, как добавить кнопку в текстовый редактор в админку.
Здесь я хочу дополнить предыдущую статью и сделать полноформатный обзор.

Кнопки в текстовом редакторе WordPress

Текстовые кнопки работают с помощью javascript-библиотеки Quicktags.

Quicktags API — инструкция по использованию Quicktags

/**
 * Main API function for adding a button to Quicktags
 *
 * Adds qt.Button or qt.TagButton depending on the args. The first three args are always required.
 * To be able to add button(s) to Quicktags, your script should be enqueued as dependent
 * on "quicktags" and outputted in the footer. If you are echoing JS directly from PHP,
 * use add_action( 'admin_print_footer_scripts', 'output_my_js', 100 ) or add_action( 'wp_footer', 'output_my_js', 100 )
 *
 * Minimum required to add a button that calls an external function:
 *     QTags.addButton( 'my_id', 'my button', my_callback );
 *     function my_callback() { alert('Yeah!'); }
 *
 * Minimum required to add a button that inserts a tag:
 *     QTags.addButton( 'my_id', 'my button', '<span>', '</span>' );
 *     QTags.addButton( 'my_id2', 'my button', '<br />' );
 */

Библиотека располагается в wp-includes/js/quicktags.js

Вышеуказанный API означает, что у нас есть возможность добавить 2 типа кнопок:

1. Простая текстовая кнопка
2. Кнопка, при нажатии на которую вызывается некоторая javascript-функция (callback)

О том, зачем нам может пригодиться callback, будет ниже, а пока переходим ближе к делу.

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

Весь код вносится в functions.php или создаётся MU Plugin

// Добавляем кнопки в текстовый html-редактор
add_action( 'admin_print_footer_scripts', 'add_sheensay_quicktags' );
function add_sheensay_quicktags() {
        //Проверка, определен ли в wordpress скрипт quicktags
	if (wp_script_is('quicktags')) :
?>
    <script type="text/javascript">
	  if (QTags) {  
	    // QTags.addButton( id, display, arg1, arg2, access_key, title, priority, instance );
	    QTags.addButton( 'sheens_p', 'p', '<p>', '</p>', 'p', 'Параграф', 1 );
	    
	    QTags.addButton( 'sheens_h2', 'h2', '<h2>', '</h2>', 'h2', 'Заголовок 2 уровня', 2 );
	    QTags.addButton( 'sheens_h3', 'h3', '<h3>', '</h3>', 'h3', 'Заголовок 3 уровня', 2 );
	    QTags.addButton( 'sheens_h4', 'h4', '<h4>', '</h4>', 'h4', 'Заголовок 4 уровня', 2 );
	  }
    </script>
<?php endif;
}

В результате увидим в редакторе

Вы также можете добавить свои шорткоды вместо тегов, например, вот так

QTags.addButton( 'sheens_shortcode', 'shortcode', '[shortcode]', '[/shortcode]', '', 'Шорткод', 1 );

Описание QTags.addButton()

QTags.addButton( id, display, arg1, arg2, access_key, title, priority, instance );

1. id — уникальный идентификатор. Вводите любое значение. Обязательный параметр
2. display — название кнопки. Обязательный параметр
3. arg1 — открывающий тег или название callback-функции (см. ниже). Обязательный параметр
4. arg12 — закрывающий тег (если есть)
5. access_key — горячая клавиша. Указывать не обязательно
6. title — всплывающее описание кнопки. Указывать не обязательно
7. priority — приоритет в списке кнопок. Чем выше число, тем левее будет располагаться кнопка
8. instance — поместить кнопку в определённый экземпляр класса. По умолчанию добавляется в общий

Как добавить кнопку с callback-функцией в редактор WordPress

Выглядит эта конструкция вот так

QTags.addButton( 'my_id', 'my button', my_callback );
function my_callback() { alert('Callback работает!'); }

Callback-функция — функция, которая вызывается при возникновении определённого события. В нашем случае, при нажатии на кнопку, на которую мы её повесим

Добавим кнопку, которая будет генерировать ссылки-якоря вида

<a id="anchor" name="anchor"></a>

Теперь на этот анкор можно ссылаться так

<a href="#anchor">Ссылка на anchor</a>

Переходим к коду

add_action( 'admin_print_footer_scripts', 'sheensay_add_quicktags_callback' );
function sheensay_add_quicktags_callback() {
	if ( wp_script_is('quicktags') ) :
?>
    <script type="text/javascript">
	 function sheensay_anchor() {
           // Вылезет окошко, в которое нужно ввести название анкора
	    var a = prompt("Введите анкор"); 
            // Вставит код в текст статьи
            if (a)
	      QTags.insertContent('<a id="'+a+'" name="'+a+'"></a>'); 
	  }
          QTags.addButton( 'sheensay_anchor', 'anchor', sheensay_anchor, '', '', '', 30); 
    </script>   
<?php endif;
}

Обратите внимание, мы используем конструкцию QTags.insertContent(''); внутри callback-функции. Она будет определять то, что будет вноситься текстом в окно редактора.

Как удалить кнопку из текстового редактора WordPress

Для внесения изменения в состав текущих кнопок есть хук quicktags_settings:

/**
 * Удаляем лишние кнопки из текстового HTML-редактора WordPress
 */
add_filter('quicktags_settings', 'sheensay_set_minimum_buttons');
function sheensay_set_minimum_buttons( $q ) {
   //default: strong,em,link,block,del,ins,img,ul,ol,li,code,more,close,fullscreen
    $q['buttons'] = 'strong,em,link';
    return $q;
}

В результате, из основных кнопок останутся только strong, em, link.

Про Quicktags API на WordPress.org