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

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

Решение 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 вставляем следующий код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
 
// Добавление кнопок в html-редактор админ панели
add_action( 'admin_print_footer_scripts', 'add_mybutton_quicktags' );
function add_mybutton_quicktags() {
        //Проверка, определен ли в WP скрипт quicktags
    if (wp_script_is('quicktags')) :
?>
    ="text/javascript">
      if (QTags) {  
        // QTags.addButton( id, display, arg1, arg2, access_key, title, priority, instance );
        QTags.addButton( 'example_block', 'Пример', '
', '
'
, '', 'div class="example-block"', 4 );
QTags.addButton( 'block_info', 'Инфо', '
', '
'
, '', 'div class="block-info"', 5 );
QTags.addButton( 'block_links', 'Ссылки', '', '', 'div class="block-links"', 6 );
QTags.addButton( 'block_explanation', 'Пояснения', '
', '
'
, '', 'div class="block-explanation"', 7 );
      }
    
endif;
}
 
 

Описание функции
«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 с классом? который нужно будет задать в модальном окне, когда нажмем кнопку:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
 
add_action( 'admin_print_footer_scripts', 'add_mybutton_quicktags_callback' );
function add_mybutton_quicktags_callback() {
    if ( wp_script_is('quicktags') ) :
?>
    ="text/javascript">
     function mybutton_class() {
           // Появится окно, где необходимо ввести название класса
        var classname = prompt("Введите класс для div");
            // Вставит код в текст статьи
            if (classname)
          QTags.insertContent('
classname+'">
'
);
      }
          QTags.addButton( 'mybutton_class', 'div + classname', mybutton_class, '', '', '', 30);
      
endif;
}
 
 

Работа callback-функции

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

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