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

Wordpress, Вопросы и ответы
14 февраля 2012

Вопрос

В верхней части HTML-редактора WordPress есть панель, на ней находятся такие кнопки, как «strong», «link», «ul», «code», «more» и д.р. Мне бы хотелось добавить туда свои собственные кнопки, чтобы получить возможность быстро добавлять в код разные html-теги и шорткоды. Как мне это сделать?


Ответ №1

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

Для этой задачи есть специальный плагин, который называется 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-коды, а и любые другие строки.

6 комментария

  • Плагин помог, а зачем код копать, когда тут два шага, и все работает?

    • Администратор:

      Зависит от задач. Код — это не готовое решение, а лишь пример, в который можно внести свои коррективы. Намного гибче.

  • Kereell:

    Спасибо, это действительно то что нужно!

  • Ирина:

    Очень интересное решение. И не надо менять код самого вордпресса. Спасибо, возьму на заметку.

  • Федор Иванов:

    Спасибо, наиболее рабочий код из всех аналогичных. И что немаловажно — универсальное решение, не затрагивающее обновляемые файлы WP.

  • proapi.ru:

    атрибут «accesskey», зачем нужен — не знаю

    горячая кнопка быстрого вызова

Добавить комментарий


(обязательно)