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

Привет, друзья! Не так давно я писала пост о самых полезных шорткодах WordPress, в конце которого приводила код, добавляющий список шорткодов в редактор. И мне показалось, что было бы очень удобно добавить в редактор дополнительные кнопки, такие как теги заголовков, или pre, который я использую для вывода кода.

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

Плагин Post Editor Buttons

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

Как видно из скриншота, он предельно прост в использовании:

Post Editor Buttons
Post Editor Buttons

Его функции ограничиваются только добавлением новых кнопок в редактор wordpress. Внизу есть реклама, я не стала включать ее в скриншот 🙂

Плагин HTML Editor Reloaded

Этот плагин более интересен в плане своей функциональности.

Он позволяет добавлять новые кнопки не в низ списка, а после какой-то определенной – это делается нажатием на “плюсик” слева. Также для всех дополнительных тегов можно назначить клавишу быстрого доступа. Для того, чтобы после тега добавить перенос строки или табуляцию, можно использовать /t или /n соответственно.

HTML Editor Reloaded
HTML Editor Reloaded

Кроме того, реализована возможность импорта и экспорта используемого списка дополнительных тегов.

В результате использования любого из плагинов, дополнительные кнопки появлятся в редакторе HTML-разметки:

дополнительные кнопки в редакторе

Добавление дополнительных кнопок в редактор без плагина

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

Найдите файл quicktags.dev.js, который лежит в папке /wp-includes/js/. Откройте его, и в самом конце (у меня это 609 строка) найдите такой код:

Это теги, которые у вас сейчас выводятся на панель визуального редактора. Чтобы добавить новую кнопку, надо в нужном месте добавить код ее вызова, например:

Так мы добавим на панель кнопку с тегом span.

Если вы хотите добавить кнопку не в конец списка, а в середину, то тогда вам придется поменять нумерацию у всех кнопок, которые идут после нее.

Теперь, когда все необходимые настройки совершены, надо снова зайти в каталог /wp-includes/js/, скопировать себе на компьютер файл quicktags.js, потом удалить его с сервера и переименовать quicktags.dev.js в quicktags.js. После этого вы сможете увидеть изменения в вашем редакторе. Если что-то не будет работать, то восстановите сохраненный файл с компа 🙂

К преимуществу ручного добавления относится то, что вы можете как захотите менять порядок кнопок.

Внимание! После обновления версии WordPress все настройки собьются, и вам придется делать все заново, поэтому советую сделать резервную копию файла настроек, и заменять его при обновлении системы.

На этом все. Если что-то непонятно, пишите!




10 комментариев к “Как добавить свои кнопки в редактор поста WordPress?”

  1. Евгений

    Ооо, большое спасибо. Хотел сделать кнопки под себя. А то начинает надоедать постоянное копирования кода pre 😉

    Ответить
  2. Sergey

    Что-то ручной способ не работает у меня (( ВП 3.3.2. А так ручной хочу сделать.

    Ответить
    • oriolo

      Sergey, я бы советовала установить плагин – это намного проще настраивать, и ничего не пропадет при обновлении системы. Сама пользуюсь плагином, очень нравится.

      Ответить
  3. Modelover

    POst editor не работает, в WP 3.3.1 через код тоже не получилось, вот наконец помог HTML Editor Reloaded

    Ответить
  4. Роман

    Ирина, большое спасибо за подсказку плагинов – а то совсем не хотелось лезть в код WordPress’а.

    Ответить
  5. Дмитрий Мацкевич

    Доброго времени суток, уважаемые автор и читатели. Комментарий предназначен Вам обоим.

    Статья хорошая. Коротко, по делу, но не идеально. Ручной способ в том виде, как его описали – не заработает, ибо пропущена одна маленькая деталь:

    Вставив код edButtons [] из статьи (не знаю отобразится ли, потому пишу не полностью)

    НЕ ЗАБУДЬТЕ убрать запятую в конце кода и добавить ее в строку, которая была последней до добавления, иначе работать НЕ БУДЕТ. Думаю понятно объяснил. В этом и есть косяк статьи, которую походу дела просто переписали не проверив.

    p.s. Кнопка появится ТОЛЬКО в режиме html редактора.

    Ответить
    • oriolo

      Дмитрий, спасибо за Ваш комментарий, запись отредактировала.

      На самом деле, это была моя ошибка с орфографией и форматированием 🙁

      Ответить
  6. Kereell

    Описанный способ “без плагина” будет работать до ближайшего апдейта. Не рекомендуеЦо (и не без оснований) трогать файло выше каталога “/wp-content/” – как минимум перестанет работать после обновления. Довольно правильный подход описан здесь http://web-answers.ru/questions-and-answers/wordpress/kak-dobavit-svoi-knopki-na-panel-redaktirovaniya-html-v-wordpress

    Ответить

Оставить комментарий