n-wp.ru — блог о WordPress
Как создать свой набор кнопок в HTML-редакторе WordPress без использования плагинов | n-wp.ru

Как создать свой набор кнопок в HTML-редакторе WordPress без использования плагинов

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

Я очень редко использую визуальный редактор (TinyMCE), так как вполне хватает простого HTML-редактора: он минималистичный, компактный, меньше использует ресурсов, и я полностью уверен в том, что он не поломает мне структуру контента при публикации. Единственное, что я настраиваю в нем под себя — это набор кнопок.

Как создать свой набор кнопок в HTML-редакторе WordPress

В WordPress нет возможности изменить порядок кнопок в HTML-редакторе, не прибегая к внедрению дополнительных функций — изменить их порядок, убрать ненужные, добавить недостающие. Я решаю эту проблему внедрением простого кода в файл functions.php используемой темы:

Я привел пример использование кнопок в своем HTML-редакторе — убрал ненужные, добавил недостающие, вывел кнопки в удобном мне порядке.

Для примера рассмотрим добавление кнопки шорткода inf. Шорткод простой, он выводит информационное сообщение со специальным оформлением:

Аргументы в строке, в порядке слева направо:

  1. eg_info — это ярлык кнопки. У каждой кнопки он индивидуальный, и не должен повторяться.
  2. inf — это которкое имя кнопки. Обязательный параметр, желательно использовать латиницу.
  3. [inf] — открывающая шорткод часть, после которой идет его содержимое.
  4. [/inf] — закрывающая шорткод часть, до которой идет его содержимое.
  5. inf — то, что будет написано на кнопке. Если оставить пустым, то на кнопке будет написано короткое имя (пункт 2).
  6. Шорткод [inf] — всплывающая подсказка, которая появится, когда вы подведете курсор к кнопке.
  7. 8 — порядковый номер кнопки, отвечающий за место кнопки в ряду. Должен быть индивидуальным, иначе либо кнопка не будет отображаться, либо будет выполнять функцию другой кнопки.

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

Тут порядок не важен (он пределен выше), но важно перечислить все кнопки, которые вы хотите видеть на панели HTML-редактора.

Как видите, в этом наборе есть кнопки, которые я не определил отдельной строкой кода — это стандартные кнопки HTML-редактора, не требующие определения, которые уже присутствуют в нем по-умолчанию. Они будут выведены сразу после кнопок, которые мы добавили и упорядочили, в том порядке, в котором они обычно выводятся в редакторе. Если вы хотите указать им новое место, то нужно их определить отдельной строкой кода (как я в примере определил одиннадцатой по счету кнопку для выделения текста жирным шрифтом).

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

tiaurus

Являюсь создателем n-wp.ru — блога о WordPress для новичков. Мне интересно многое, поэтому еще я сделал 123-box.ru — блог о программах для Windows, и tiaurus.info — блог о красоте.

1 комментарий

  • В мене шорт код кнопки виглядає так [DL URL=»»], то як має виглядати пареметр [inf] та [/inf]

/* ]]> */