Добавляем свои кнопки в редактор записей WordPress

В WordPress есть множество полезных функций, о которых обычный пользователь даже не догадывается, но 100% хотел бы иметь. Так, к примеру, вам бы точно не помешало бы иметь свою запрограммированную кнопку, по клику которой происходило необходимое действие. В этом уроке мы как раз рассмотрим данный случай.

Конкретная задача

Мы создали уникальный блок, который у нас имеет свои стили и выделяется среди остального контента. Для этого мы воспользовались стилями css, которые назначили классу uniq.

<div class=”uniq”>
   этот блок будет уникальным и отличаться от общего стиля контента
</div>

Дабы избавить себя от рутинной работы и не прописывать каждый раз вручную этот блок с указанным стилем, в WordPress для этих целей начиная с версии 3.3 есть замечательный функционал — Quicktags API.

Этот инструмент имеет достаточно широкий функционал, чтобы удовлетворить наши потребности и выполнить поставленную задачу. Допускается использование следующих параметров: id(определение класса id), display(текст кнопки, который будет выводится в админке), arg1(старт обертки), arg2(закрывающийся тег обертки), access_key(шорткод), title(текст в title), priority(приоритет), instance(помещение в экземпляр класса).

Давайте теперь попробуем добавить в редакторе кнопку, по клику которой будет выделенный текст обертываться в блок div с классом uniq. Для этого добавляем в файл functions.php нашей активной темы следующий код:

if( !function_exists('_add_my_quicktags') ){

function _add_my_quicktags()
{ ?>
<script type="text/javascript">
  QTags.addButton( 'sheens_h2', 'UNIQ', '<div class="uniq">', '</div>', 'uniq', 'DIV с классом uniq' );
</script>
<?php }
add_action('admin_print_footer_scripts', '_add_my_quicktags');
}

Теперь открываем редактор и можем испробовать уже работающий функционал.

Но это далеко не все, на что способен этот инструмент, однако для его удобства уже понадобятся собственные наработки. Вы также можете указать в качестве исполнения вызов обратной функции. Для этого добавим следующий код:

add_action( 'admin_print_footer_scripts', 'test_callback' );
function test_callback() {
if ( wp_script_is('quicktags') ) :
?>
<script type="text/javascript">
  QTags.addButton( 'test', 'test button', my_callback );
  function my_callback() { alert('Функция работает!'); }
</script>
<?php endif;
}

Переходим в админку, тестируем и видим результат.

Это лишь самый простой метод использования, но благодаря ему можно добиться самого удобного для вас функционала, расширив границы возможностей начиная с того, что представлено здесь. Можно добавить функцию выделения текста, который будет обертываться, а не полностью заменяться возвращенной функцией. Но для этого уже понадобится новый код, новая идея и новая статья.

не скупись оцени статью