Как создать свой набор кнопок в HTML-редакторе WordPress без использования плагинов

Как создать свой набор кнопок в HTML-редакторе WordPress без использования плагинов | n-wp.ru
Инструкция, показывающая, как без использования плагинов добавить новые кнопки на панель HTML-редактора, удалить ненужные вам, и определить порядок отображения кнопок.
👍 Научим бесплатно правильно создавать сайты на WordPress. Подробнее →

Я очень редко использую визуальный редактор (TinyMCE), так как вполне хватает простого HTML-редактора: он минималистичный, компактный, меньше использует ресурсов, и я полностью уверен в том, что он не поломает мне структуру контента при публикации. Единственное, что я настраиваю в нем под себя — это набор кнопок.

Как создать свой набор кнопок в HTML-редакторе WordPress

В WordPress нет возможности изменить порядок кнопок в HTML-редакторе, не прибегая к внедрению дополнительных функций — изменить их порядок, убрать ненужные, добавить недостающие. Я решаю эту проблему внедрением простого кода в файл functions.php используемой темы:

//добавление кнопок
function appthemes_add_quicktags() {
?>

QTags.addButton( 'eg_h1', 'h1', '
Содержание
  1. ', '
  2. ', '
  3. ', '

', '

', '', 'Заголовок 1', 1 ); QTags.addButton( 'eg_h2', 'h2', '

', '

', '', 'Заголовок 2', 2 ); QTags.addButton( 'eg_h3', 'h3', '

', '

', '', 'Заголовок 4', 3 ); QTags.addButton( 'eg_info', 'inf', '
', '
', 'inf', 'Шорткод
', 8 ); QTags.addButton( 'eg_embed', 'embed', '', '', '', 'Шорткод ', 9 ); QTags.addButton( 'eg_dash', '—', '—', '', '—', 'Тире', 10 ); QTags.addButton( 'eg_strong', 'b', '', '', 'b', 'Strong', 11 ); <?php } add_action( 'admin_print_footer_scripts', 'appthemes_add_quicktags', 100 ); // реорганизация кнопок function wpa_init( $qtInit ) { $qtInit['buttons'] = 'h1,h2,h3,—,b,em,block,del,ul,ol,li,link,img,info,embed,close,fullscreen'; return $qtInit; } add_filter('quicktags_settings', 'wpa_init');

Я привел пример использование кнопок в своем HTML-редакторе — убрал ненужные, добавил недостающие, вывел кнопки в удобном мне порядке.

Для примера рассмотрим добавление кнопки шорткода inf. Шорткод простой, он выводит информационное сообщение со специальным оформлением:

QTags.addButton( 'eg_info', 'inf', '<div class="info-item"></div>', '</div>', 'inf', 'Шорткод <div class="info-item"></div>', 8 );

Аргументы в строке, в порядке слева направо:

  1. eg_info — это ярлык кнопки. У каждой кнопки он индивидуальный, и не должен повторяться.
  2. inf — это которкое имя кнопки. Обязательный параметр, желательно использовать латиницу.
  3. [inf] — открывающая шорткод часть, после которой идет его содержимое.
  4. [/inf] — закрывающая шорткод часть, до которой идет его содержимое.
  5. inf — то, что будет написано на кнопке. Если оставить пустым, то на кнопке будет написано короткое имя (пункт 2).
  6. Шорткод [inf] — всплывающая подсказка, которая появится, когда вы подведете курсор к кнопке.
  7. 8 — порядковый номер кнопки, отвечающий за место кнопки в ряду. Должен быть индивидуальным, иначе либо кнопка не будет отображаться, либо будет выполнять функцию другой кнопки.

Определяя таким образом кнопки, вы можете добавить нужные вам. После того, как все необходимые кнопки будут определены, их нужно вывести. За это отвечает строчка:

$qtInit['buttons'] = 'h1,h2,h3,—,b,em,block,del,ul,ol,li,link,img,info,embed,close,fullscreen';

Тут порядок не важен (он пределен выше), но важно перечислить все кнопки, которые вы хотите видеть на панели HTML-редактора.

Как видите, в этом наборе есть кнопки, которые я не определил отдельной строкой кода — это стандартные кнопки HTML-редактора, не требующие определения, которые уже присутствуют в нем по-умолчанию. Они будут выведены сразу после кнопок, которые мы добавили и упорядочили, в том порядке, в котором они обычно выводятся в редакторе. Если вы хотите указать им новое место, то нужно их определить отдельной строкой кода (как я в примере определил одиннадцатой по счету кнопку для выделения текста жирным шрифтом).

Конечно, приведенный выше способ работает только с простыми кнопками, не требующими внедрения дополнительных скриптов. Если нужно что-то более серьезное, например, внедрение кнопок, вызывающих всплывающие формы со множеством параметров, то тут лучше прибегнуть к помощи плагинов.

Создай свой первый сайт на WordPress

tiaurus

Автор n-wp.ru — блога о WordPress для новичков.

Оцените автора
Добавить комментарий

  1. САША

    В мене шорт код кнопки виглядає так [DL URL=»»], то як має виглядати пареметр [inf] та [/inf]

    Ответить