WordPress как на ладони
Дешевый WordPress пакет для разработки Недорогой хостинг для сайтов на WordPress: wordpress.jino.ru

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

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

Несмотря на то что есть не мало плагинов по этой теме, знать API надо, к тому же делается в нем все очень просто, плюс есть возможность прицепить свою JS функцию к созданной кнопке! Давайте, по порядку...

Quicktags API js функция

/**
 * Основная 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_

Еще пример

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

<?php
add_action( 'admin_print_footer_scripts', 'appthemes_add_quicktags' );
function appthemes_add_quicktags() {
	if ( wp_script_is('quicktags') ){
	?>
	<script>
		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
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 редактор.
Скачано: 489, размер: 1.7 KB
меню

Jayj Quicktag

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

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

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

Post Editor Buttons Fork

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

Индивидуалки

РЕАЛЬНЫЕ индивидуалки снять лучшую.

prostitutki24.com

27 комментов
Полезные 2 Все
  • @ Иван

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

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

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

      Ответить2.3 года назад #
Здравствуйте, !     Войти . Зарегистрироваться