WordPress как на ладони
wordpress jino

WordPress Quicktags API — дополнительные кнопки в HTML редакторе

Дополнительные кнопки в HTML редакторе WordPress
Оглавление:

С версии 3.3 разработчики WordPress улучшили HTML редактор, так у нас появилась возможность добавлять свои кнопки в него несколькими строками кода, называется все это коротко - Quicktags API. Иногда это бывает нужно, а порой даже очень!

— Так ведь есть же плагин... (голос из зала) — Конечно есть: Post Editor Buttons Fork, к тому же он удобный и простой. Но ведь и тут все очень просто, плюс есть возможность прицепить свою JS функцию к созданной кнопке! Это ли не чудо? Но, по порядку...

JavaScript API функция

/**
 * Основная API функция для добавки кнопок к Quicktags
 *
 * Добавление qt.Button или qt.TagButton зависит от аргументов. Первые 3 обязательны.
 * Чтобы доавить кнопку, ваш скрипт должен идти после скрипта "quicktags"
 * и должен выводиться в footer. Если вы выводите JS из PHP, используйте хук
 * add_action( 'admin_print_footer_scripts', 'output_my_js', 100 )
 * или add_action( 'wp_footer', 'output_my_js', 100 )
 *
 * Минимальные требования для добавления кнопки с внешней функцией:
 *     QTags.addButton( 'my_id', 'my button', my_callback );
 *     function my_callback() { alert('yeah!'); }
 *
 * Минимальные требования для добавления кнопки, которая вставляет теги:
 *     QTags.addButton( 'my_id', 'my button', '<span>', '</span>' );
 *     QTags.addButton( 'my_id2', 'my button', '<br />' );
 */

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

Параметры

id(строка) (обязательный)
ID кнопки. Атрибут id HTML тега input: <input id="">.
display(строка) (обязательный)
Название кнопки. Атрибут value HTML тега input: <input value="">.
arg1(строка) (обязательный)
Открывающий тег, который будет вставляться по нажатию, например: <span>. Или название функции, которая будет выполнена, при клике - callback функция.
arg2(строка)
Закрывающий тег, который будет вставляться по нажатию, например: </span>. Оставьте пустым, если тег не нужно закрывать, например: <hr />.
access_key(строка)
Короткий путь доступа к кнопке. Пишем какую-нибудь букву, например: s
title(строка)
Описание кнопки. Атрибут title HTML тега input: <input title="">.
priority(число)
Позиция кнопки среди других кнопок: 1-9 = первая, 11-19 = вторая, 21-29 = третья и т.д.
instance(строка)
Поместить кнопку в определенный экземпляр класса. Если ничего не указать, добавляется в общий экземпляр.

Примеры

С теорией покончили, перейдем к примерам!

Сейчас наш HTML редактор выглядит как картинка в начале поста.

Добавим к нему 3 кнопки с тегами: <h3>, <hr /> и <pre lang="php">. Для этого добавим следующий код в файл темы functions.php:

<?php
add_action( 'admin_print_footer_scripts', 'appthemes_add_quicktags' );
function appthemes_add_quicktags() {
	if ( ! wp_script_is('quicktags') )
		return;

	?>
	<script type="text/javascript">
	QTags.addButton( 'eg_h3', 'h3', '<h3>', '</h3>', 'h', 'Заголовок h3', 1 );
	QTags.addButton( 'eg_hr', 'hr', '<hr />', '', 'h', 'Горизонтальная линия', 201 );
	QTags.addButton( 'eg_pre', 'pre', '<pre lang="php">', '</pre>', 'q', 'Подсветка PHP синтаксиса', 111 );
	</script>
	<?php
}
?>

Заметка: Чтобы избежать ошибки мы проверяем используется ли скрипт quicktags: wp_script_is('quicktags').

Вот что получилось:

Как добавить свои кнопки в HTML редактор WOrdPress

HTML код кнопок выглядит так:

<input type="button" id="qt_content_eg_h3" accesskey="h" class="ed_button" title="Заголовок h3" value="h3">

Заметка: К ID автоматически добавляется префикс: qt_content_

Еще пример

Добавим кнопку по клику на которую будет срабатывать произвольная функция:

add_action( 'admin_print_footer_scripts', 'appthemes_add_quicktags' );
function appthemes_add_quicktags() {
	if ( wp_script_is('quicktags') ){
	?>
	<script type="text/javascript">
		QTags.addButton( 'my_id', 'my button', my_callback );
		function my_callback() { alert('Ура!'); } 
	</script>   
	<?php
	}
}

Обновив страницу мы увидим новую кнопку "my button", кликнув на которую выскочит сообщение: 'Ура!'.

Кнопки по умолчанию

Это список значений кнопок добавленных по умолчанию WordPress. Accesskey и ID должны быть всегда уникальны, поэтому при добавлении своих кнопок не используйте эти значения:

Accesskey ID Value Tag Start Tag End
a link link <a href="' + URL + '"> </a>
b strong b <strong> </strong>
c code code <code> </code>
d del del <del datetime="' + _datetime + '"> </del>
f fullscreen fullscreen
i em i <em> </em>
l li li \t<li> </li>\n
m img img <img src="' + src + '" alt="' + alt + '" />
o ol ol <ol>\n </ol>\n\n
q block b-quote \n\n<blockquote> </blockquote>\n\n
s ins ins <ins datetime="' + _datetime + '"> </ins>
t more more <!--more-->
u ul ul <ul>\n </ul>\n\n
spell lookup
close close

Удаление кнопок из HTML редактора WordPress

Если нужно удалить базовые кнопки из HTML редактора, то можно использовать хук: quicktags_settings, на который прицепить свою функцию и переопределить кнопки по-умолчанию, оставив там только нужные вам.

Базовые кнопки расположены в строке strong,em,link,block,del,ins,img,ul,ol,li,code,more,close,fullscreen. Давайте удалим из них: del,ins,more,close, я ими не пользуюсь:

// удаляем ненужные кнопки
add_filter('quicktags_settings', 'set_buttons_for_html_editor');
function set_buttons_for_html_editor( $buttons ) {
	$buttons['buttons'] = 'strong,em,link,block,img,ul,ol,li,code,fullscreen';
	return $buttons;
	// default: $buttons['buttons'] = 'strong,em,link,block,del,ins,img,ul,ol,li,code,more,close,fullscreen';
}

Плагины

Kama Quicktags

Писал когда-то статью (моя первая статья на этом блоге) про добавление кнопки в HTML редактор. Кнопка преобразовывает код в читабельный для HTML вид: символы < и > меняются на соответствующие им сущности: &lt; и &gt; и в результате вставленный в статью код с тегами будет отображаться как нужно. Со временем сделанная мной для этого кнопка: Код в HTML перестала работать. Сегодня посидел, восстановил.

Плагин для добавление кнопок в HTML редактор WordPress с кнопкой преобразования кода в подходящий для HTML вид:

Kama Quicktags V2.2
Преобразовывает спецсимволы и добавляет кнопки в HTML редактор.
Скачано: 410, размер: 1.7 KB, дата: год назад

Jayj Quicktag

Еще один очень простой плагин. Имеет настройки в админке. Позволяет быстро добавить свои кнопки в HTML редактор WordPress.

Страница настроек jayj quicktag
Страница настроек jayj quicktag

Подробнее о плагине смотрите в каталоге WordPress.

WordPress Quicktags API - дополнительные кнопки в HTML редакторе 28 комментариев
Полезные 2 Вопросы 2 Все
  • Иван @

    А вот как сделать, чтобы в стандартном редакторе при редактировании ссылки, можно было присвоить ей класс?
    Можно конечно ручками в режиме "текст", но не совсем удобно, учитывая что в других визуальных редакторах такое давно предусмотрено.

    Ответить1.5 года назад #
    • campusboy1951 cайт: www.youtube.com/c/wpplus

      И в WP кажись такое раньше было, это вот недавно поупрощали. Возможно, пригодиться плагин Advanced WPLink. Он позволяет на странице настроек задать разные стили, а потом в редакторе их назначать ссылкам. То есть в режиме онлайн их не добавишь. Зато удобно для заказчиков. Строго создал стили разных кнопок, а они потом сами выбирают какой стиль и где по тексту его использовать в ссылках при надобности.

      Ответить1.5 года назад #
  • Павел

    Добрый день!

    Тимур, можно-ли задать сочетание клавиш, для кнопки?

    Ответить1.1 года назад #
  • Кирилл @

    Добрый вечер, не подскажите как удалить кнопку из визуального редактора, которая появилась с установкой какого либо плагина? Спасибо

Здравствуйте, !

Ваш комментарий
Предпросмотр