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

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

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

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

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

  • 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

  • Joshuasaf:

    Adventures in Russia. Rest in Russia on the Black Sea. Welcome to Anapa ! Beach rest in Russia,official travel site,spend your holiday actively ! Adventures,Russia,Rest,Sea,Welcome,Anapa,travel,Beach,relax,coastline,actively,culture,new,2017,tourism,life,excellent,rest,diver,para planner. https://intourist.biz

  • IrishkaJor:

    Пацаны, кому интересно, регистрируемся в игрушке, играем пару часов и сразу продаём игровой акк.
    Я за день 3-4 акка продаю по цене 300-400р. Покупатели англечане, они сами пишут новичкам через игровую почту с предложением выкупать акки, у них идёт серьёзная война и мультоводы гребут акки пачками…
    игрушка тут: http://seo-swat.ru//yp4e6
    так что если не тупить, то можно неплохо заработать, пока тема не умерла…

  • JacobLoods:

    Welcome to http://travel2017.org/ , the leading website for beach holidays and information on the Russia Black Sea resorts.We have already started the early bookings for the summer season 2017. This season we have included more hotels, flexible accomodation in holiday apartments on the coast and some new resorts. We provide complete travel arrangements from any point of the world to the Russia beach resort you would like to visit. We also provide flights, rent a car service, transfers from the airports to the resorts, yacht trips and much more.

  • WilliamBix:

    Willkommen bei http://travel2017.org/?p=114 , der fuhrenden Website fur Urlaub an russischen Stranden und schlagt eine Information fur alle Resorts und Orte an der ganzen russischen Schwarzmeerkuste vor.
    Hier finden Sie unsere besten Tipps zu Familien-Reisen. Einmal mit Freunden oder den Gro?eltern verreisen? Im Ferienhaus oder im Familien-Club? Lassen Sie sich doch von uns inspirieren. Wir beraten Sie gerne zu Ihrer Reise oder Buchung.

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


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