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

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

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

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

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

  • Kereell:

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

  • Ирина:

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

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

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

  • proapi.ru:

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

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

  • Lorybus:

    [URL=http://nsexy.ru — проститутки новосибирска[/URL — Вас приветствует команда сайта Сибирки, сайта, на котором размещают анкеты 86% всех проституток города Новосибирска.
    [URL=http://www.siblaguna.ru — проститутки новосибирска[/URL —
    [URL=http://sexonsk.ru — проститутки новосибирска[/URL —
    [URL=http://sibirki.com — проститутки новосибирска[/URL —
    [URL=https://sexonsk.xxx — проститутки новосибирска[/URL — Настоящая проститутка!!! Работаю от души и для души! … Красивая девочка, одна из лучших в Новосибирске!
    [URL=https://sexonsk.top — проститутки новосибирска[/URL -

  • TtjkqtPync:

    Частотник ATS48D17Q отличается от частотного преобразователя IMS20202-V5-C24-F1-E4 номинальной мощностью ПЧ, частотой PWM-контроллера, логикой работы системы самодиагностирования ошибок частотника, а также главным образом наличием различных аппаратных дополнительных функций, доступных для быстрой настройки и выполнения специализированных задач и полностью заменяющих собой КИП и автоматику для выполнения автоматической работы основного производственного оборудования автономно, без контроллеров, промышленных ПК, панелей оператора. Перечисленные факторы играют решающую роль при выборе частотного преобразователя для различных применений.

    Определение неисправностей и последующий надежный ремонт на современном оборудовании частотно-регулмруемых приводов, которые произведены фирмами Данфосс, delta, vesper и другими мировыми брендами. Снятие и установка IGBT транзисторов, представляющих из себя самые важные компоненты во всем устройстве преобразовательной техники. Отличие транзистора IGBT от IGBT module заключается в том, что модуль может содержать один или более IGBT транзисторов, иногда включенных параллельно по схеме Darlington для увеличения коммутируемой мощности, а также в некоторых случаях схему контроля тока нагрузки. IGBT — биполярный транзистор с изолированным затвором, представляет собой мощный полупроводниковый прибор обычно используемый как электронный ключ для средних и высоких напряжений. Благодаря совмещению преимуществ биполярного транзистора и полевого транзистора достигается большая мощность коммутации и малая необходимая управляемая мощность, так как управление осуществляется не током, а полем, что приводит к высокому КПД этих компонетов. Чтобы узнать подробности переходите по ссылке — Ремонт частотного преобразователя Altivar 31 atv31h075m2

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


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