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

Задача. Необходимо вывести свои кнопки в HTML-редакторе админ панели WordPress, которые будут вставлять шорткоды или вставлять заготовку тегов с определенными классами. Условно говоря, например, нужно, чтобы при редактировании поста, можно было выделить текст и нажатием кнопки обернуть текст в span с классом «green». Соответственно в стилях задать этому классу зеленый цвет.

Свои кнопки в редакторе WP

Решение 1. Простой и быстрый, но не экономичный способ – это установить любой из плагинов:

  • AddQuicktag (Frank Bültge)
  • Ultimate TinyMCE (Josh Lobe)
  • Advanced Editor Tools (Automattic)

Решение 2. Добавить код в файл темы – function.php. В WordPress есть javascript-библиотека Quicktags, которую и нужно использовать. Проверить ее наличие можно по адресу yoursite.net/wp-includes/js/quicktags.js. В файл function.php вставляем следующий код:

Описание функции
«QTags.addButton( id, display, arg1, arg2, access_key, title, priority, instance );»
(* – обязательный параметр):

id — * уникальный идентификатор. Вводите любое значение;
display — * отображаемое название кнопки;
arg1 — * открывающий тег или название callback-функции (см. ниже);
arg2 — закрывающий тег;
access_key — горячая клавиша;
title — всплывающее описание кнопки;
priority — приоритет в списке кнопок. Чем больше, тем левее будет кнопка;
instance — поместить кнопку в определённый экземпляр класса. По умолчанию добавляется в общий.

Решение 2.1: Также можно использовать callback-функцию, т.е. эта функция будет срабатывать при каком-то действии, например, при клике на кнопку, как в примере ниже. Смысл примера ниже заключается в создании кнопки в админ панели, которая по нажатию будет добавлять элемент div с классом? который нужно будет задать в модальном окне, когда нажмем кнопку:

Результат callback-функции
Работа callback-функции

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

Ссылка на основную публикацию