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

При создании новой записи часто приходится дорабатывать её внешний вид, используя редактор в режиме HTML — удалять ненужные теги (<br/>, <span>, <p>) или добавлять новые для улучшения внешнего вида записи — создавать отдельные акцентные блоки, вставлять таблицы и т.п. Для этого можно использовать различные плагины, расширяющие функционал встроенного редактора. Но любой дополнительный плагин — это лишняя нагрузка.

Я устанавливаю только «жизненнонеобходимые» для полноценной работы плагины, и стараюсь сначала поискать решение возникшей доработки без применения сторонних плагинов, если такового решения найти не удалось или поджимают сроки, то ставлю плагин (продолжая искать решение).

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

Сегодня рассмотрим, как добавить дополнительные кнопки в редактор.

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

Среди этих кнопок вставка изображения, списка, ссылки и т.д.

Мне часто приходится при редактировании записей клиентских сайтов закрывать внутренние ссылки от индексирования, в частности от поискового робота Yandex.
Для этого существует тег <noindex>. Создадим в редакторе кнопку с этим тегом для быстрой вставки его в любую запись сайта.

Что нужно для того, чтобы создать новую кнопку в редакторе WordPress?

Нам понадобится добавить небольшой фрагмент кода на основе имеющегося в файл quicktags.js, расположенный по адресу: сайт.ru/wp-includes/js/quicktags.js

Этот файл содержит код, который добавляет в редактор функционал вставки тегов по нажатию на соответствующую кнопку. Открываем файл для редактирования:

Как видим, файл сложен для восприятия, но нам нужно лишь найти фрагмент, на основе которого мы создадим свою кнопку в редакторе.

Например, фрагмент кода, добавляющего кнопку code, генерирующую тег <code>

edButtons[110]=new c.TagButton("code","code","<code>","</code>","c")

Разберем параметры:

edButtons[110] //110 - порядок отображения кнопки
=new c.TagButton("code","code", //Что будет отображено на кнопке
"<code>", //Открывающий тег
"</code>", //Закрывающий тег
"c" //Внутреннее имя для функции
)

На основе этого фрагмента создаем свою кнопку для тега <noindex>:

edButtons[120]=new c.TagButton("noindex","noindex","<noindex>","</noindex>","")

Вставляем наш фрашмент после фрагмента кода кнопки «code».

Необходимо учесть параметр: edButtons[120], он отвечает за последовательность, то есть наша кнопка с параметром 120 будет расположена после кнопки «code», соответственно у последующих фрагментов нужно поменять параметр на 130, 140 и 150 соответственно.

Сохраняем файл. Открываем редактор в режиме html. На панеле видим новую кнопку редактора под названием noindex.

При нажатии на кнопку в запись вставится открывающий тег, а при повторном — закрывающий.

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

Рассмотрим ещё один пример создания новой кнопки для редактора, при помощи которой будем оформлять текстовый блок.

Создадим в файле стилей (style.css) оформление для блока.

.note{
    color:#333;
    background-color:#cbebeb;
    padding:20px;
}

Теперь добавим кнопку, которая позволит создавать блок с данным классом для оформления текста по аналогии с предыдущим:

edButtons[130]=new c.TagButton("block-blue","block-blue","<div class="note">","</div>","")

Теперь, если мы воспользуемся новой кнопкой в редакторе Вордпресс, то получим вот такой текстовый блок:

Добавление своих кнопок в редактор WordPress реализуется достаточно несложно. Можно добавить все необходимые теги, и даже фрагменты, что сэкономит массу времени при создании материалов.

Существует недостаток — после обновления WordPress, внесенные изменения в файле quicktags.js будут утрачены, поэтому рекомендуется сохранить измененный файл у себя на локальном компьютере, а после обновления (которое происходит не так уж и часто) снова скопировать на сервер.

---