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 код кнопок виглядає так:

<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>nn`
q	block	b-quote	`nn<blockquote>`	`</blockquote>nn`
s	ins	ins	`<ins datetime=”‘ + _datetime + ‘”>`	`</ins>`
t	more	more	`<!–more–>`
u	ul	ul	`<ul>n`	`</ul>nn`
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 вигляд: символи <і >змінюються на відповідні їм сутності: <і >в результаті вставлений у статтю код з тегами буде відображатися як потрібно. Згодом зроблена для цього кнопка: Код в HTMLперестала працювати. Сьогодні посидів, поновив.

Плагін для додавання кнопок у HTML редактор WordPress з кнопкою перетворення коду у відповідний для HTML вигляд:

Kama Quicktags V2.2

Перетворює спецсимволи і додає кнопки HTML редактор.

Завантажено: 702, розмір: 1.7 KB

Jayj Quicktag

Ще один дуже простий плагін. Має налаштування в адмінці. Дозволяє швидко додати свої кнопки до HTML редактора WordPress.

Докладніше про плагін дивіться в каталозі WordPress .

Post Editor Buttons Fork