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 >. - display
(рядок) (обов’язковий) - Назву кнопки. Атрибут value HTML тега input:
<input value="">. - arg1
(рядок) (обов’язковий) - Відкриває тег, який вставлятиметься натисканням, наприклад:
<span>. Або назва функції, яка буде виконана, при натисканні – callback функція. - arg2
(рядок) - Закриває тег, який вставлятиметься натисканням, наприклад:
</span>. Залиште порожнім, якщо тег не потрібно закривати, наприклад:
<hr />. - access_key
(рядок) - Короткий шлях доступу до кнопки. Пишемо якусь букву, наприклад:
s - title
(рядок) - Опис кнопки. Атрибут title HTML тега input:
<input >. - 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 вигляд:
Jayj Quicktag
Ще один дуже простий плагін. Має налаштування в адмінці. Дозволяє швидко додати свої кнопки до HTML редактора WordPress.
Докладніше про плагін дивіться в каталозі WordPress .
Post Editor Buttons Fork
Докладніше про плагін дивіться в каталозі WordPress .