Главная › Новости

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

Опубликовано: 23.08.2018

Хлебные крошки Wordpress без плагина - Константин Хмелев

Моя первая статья была о том, как добавить кнопку в текстовый редактор в админку .

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

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

Текстовые кнопки работают с помощью javascript-библиотеки 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

Меняем дизайн темы WordPress без знания кода

Вышеуказанный API означает, что у нас есть возможность добавить 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; }

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

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

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

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

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

id — уникальный идентификатор. Вводите любое значение. Обязательный параметр display — название кнопки. Обязательный параметр arg1 — открывающий тег или название callback-функции (см. ниже). Обязательный параметр arg12 — закрывающий тег (если есть) access_key — горячая клавиша. Указывать не обязательно title — всплывающее описание кнопки. Указывать не обязательно priority — приоритет в списке кнопок. Чем выше число, тем левее будет располагаться кнопка 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