WordPress. Добавление кнопок в HTML-редактор

Добавление кнопок на панель инструментов текстового (HTML) редактора WordPress с помощью Quicktags API. Для пользователей плагина «Classic Editor».

Содержание

Оператор QTags.addButton

Quicktags API позволяет добавлять новые кнопки на панель инструментов текстового (HTML) редактора WordPress. После внедрения в WordPress блочного редактора Gutenberg, HTML-редактор в классическом стиле стал доступен только при активированном плагине «Classic Editor».

Для создания дополнительных кнопок используется оператор QTags.addButton:

1	QTags.addButton (id, display, arg1, arg2, access_key, title, priority, instance);

Параметры оператора QTags.addButton:

Параметр	Описание
id	Обязательный параметр. Уникальный идентификатор кнопки.
display	Обязательный параметр. Название кнопки, отображаемое на панели инструментов (на кнопке).
arg1	Обязательный параметр. Открывающий тег (произвольная строка), который будет вставляться при нажатии кнопки слева от курсора или выделения.
arg2	Необязательный параметр. Закрывающий тег (произвольная строка), который будет вставляться при нажатии кнопки справа от курсора или выделения.
access_key	Необязательный параметр. Клавиша быстрого доступа для кнопки.
title	Необязательный параметр. Заголовок, который будет отображаться при наведении на кнопку курсора.
priority	Необязательный параметр. Число, задающее желаемое положение кнопки на панели инструментов: 1-9 = первое место, 11-19 = второе место, 21-29 = третье место и т. д.
instance	Необязательный параметр. Задает конкретный экземпляр класса Quicktags, в который следует поместить кнопку.

Если параметр priority не указан, дополнительные кнопки будут добавлены после кнопок по умолчанию и в порядке, соответствующем порядку следования строк с оператором QTags.addButton, создающих их.

Добавление кнопок в HTML-редактор

Пример добавления кнопок, вставляющих горизонтальную линию, кавычки «Ёлочки», теги заголовков h2, h3, h4 и h5:

// Добавляем кнопки в текстовый редактор HTML админпанели

function appthemes_add_quicktags() {

if ( ! wp_script_is('quicktags') )

return;

QTags.addButton( 'line', 'Линия', '\n\n<hr />\n\n', '', '', 'Горизонтальная линия' );

QTags.addButton( 'yolochki', '«»', '«', '»', '', 'Кавычки «Ёлочки»' );

QTags.addButton( 'z-h2', 'h2', '<h2>', '</h2>', '', 'Заголовок h2' );

QTags.addButton( 'z-h3', 'h3', '<h3>', '</h3>', '', 'Заголовок h3' );

QTags.addButton( 'z-h4', 'h4', '<h4>', '</h4>', '', 'Заголовок h4' );

QTags.addButton( 'z-h5', 'h5', '<h5>', '</h5>', '', 'Заголовок h5' );

</script>

<?php

}

add_action( 'admin_print_footer_scripts', 'appthemes_add_quicktags' );

Данный код вставляется в файл functions.php дочерней темы.

Перед объявлением функции appthemes_add_quicktags нет открывающего тега <?php, так как обычно он уже есть выше. Закрывающий тег ?> в конце файлов .php не ставится, так как любой случайно введенный символ после закрывающего тега, например, перевод строки, приведет к неработоспособности сайта.

Скриншот файла functions.php с кодом добавления новых кнопок на панель инструментов текстового редактора WordPress:

Скриншот панели инструментов HTML-редактора WordPress с добавленными кнопками при активированном плагине «Classic Editor»:

Другие статьи:
WordPress. Изображение от размера экрана
WordPress. Создание рекламных баннеров
WordPress. Заголовки безопасности (security headers)
WordPress. Admitad Teleport Script (установка на сайт)