Как добавить свои кнопки на панель редактирования HTML в WordPress?

Решение с помощью плагина

Для этой задачи есть специальный плагин, который называется HTML Editor Reloaded, он очень прост в эксплуатации, поэтому нет смысла описывать основные этапы работы с ним.

Бесплагинное решение

Однако, добавить пользовательские кнопки в редактор WordPress можно и не прибегая к сторонним плагинам. (Что, если надо написать собственный плагин с интеграцией в редактор?). Существует 2 способа, которыми это можно сделать. Суть сводится к вызове нужных функций из соответствующего скрипта, который уже подключён у WordPress и отвечает за загрузку этих кнопок. Чтобы вызвать эти функции, надо вставить свой код в админку WordPress. JavaScript можно подключить по разному, для наглядности в первом сделаем это через внешний файл, а во втором — через прямую вставку кода скрипта в HTML, но по сути не важно, как Вы интегрируете свой код.

Способ старый, работает уже довольно давно

В файл function.php добавим:

add_action(''admin_print_scripts'', ''my_custom_quicktags'');

function my_custom_quicktags() {
wp_enqueue_script(''my_custom_quicktags'', get_bloginfo(''template_url'') . ''/my-custom-quicktags.js'', array(''quicktags''));
}

Теперь в каталоге с нашей темой мы создадим js-код с именем «my-custom-quicktags.js» и следующим содержанием:

edButtons[edButtons.length] = new edButton( ''hello'', ''hello'', ''<hello>'', ''</hello>'');

Мы создали новую кнопку с помощью функции edButton, которая принимает такие параметры:

1. Идентификатор кнопки (для атрибута «id»)
2. Отображаемое имя
3. Отрывающий тег
4. Закрывающий тег

Как видите, всё довольно просто.

Способ новый, требует версию WordPress 3.3 и выше

В тот же function.php добавим:

add_action(''admin_footer'', ''eg_quicktags'');
function eg_quicktags() {
?>
<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function(){
if(typeof(QTags) !== ''undefined'') {
QTags.addButton( ''phpcode'', ''phpcode'', ''[phpcode]\n'', ''\n[/phpcode]'');
QTags.addButton( ''quotation-marks'', ''«...»'', ''«'', ''»'',''que-marks-key'',''Кавычки'', 15);
}
});
</script>
<?php
}

Здесь мы с помощью библиотеки jQuery дожидаемся загрузки документа, затем вызываем метод addButton объекта QTags. На входе те же самые параметры, что и в предыдущем способе, только по желанию можно добавить ещё 3 параметра: access key (атрибут «accesskey», зачем нужен — не знаю), отображаемая подсказка при наведении (атрибут «title») и позиция на панели.

Обратите внимание, что в теги кнопки «phpcode» я добавил символы новой строки для того, чтобы при обрамлении нужного мне текста сам текст переносился на новую строку.

Вторая кнопка — это кнопка быстрый русских кавычек, ведь можно использовать не только html- и short-коды, а и любые другие строки.