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

339

В 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');
}

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

uniq

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

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;
}

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

test

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



не скупись ;-) ставь лайк
Подписка на обновления:
Автор блога Рябухин Максим

Я фрилансер веб-разработчик. Последние несколько лет занимаюсь версткой и веб-программированием на PHP и Javascript. Если вам понадобится помощь с блогом Wordpress, либо в создании любой сложности и любым дизайном сайта, я всегда рад помочь с версткой, либо отдельными разработками. Обращайтесь ко мне за моими услугами.

связаться

Вместе с этим советую почитать:

Оставьте комментарий

у меня есть сайт
;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

комментариев: 2
  • Дмитрий Фич

    Для начинающих полезная информация. Но иногда все же довериться профессионалам ;-)

    Ответить
    • Максим Рябухин

      Дмитрий Фич, это исключительно для тех, кто хочет внести коррективы своими силами. В противном случае, с этими задачами справятся уже готовые решения в виде плагинов.

      Ответить
показать все


Как вам новый дизайн сайта?

Курс Бери и Зарабатывай!

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

Узнать больше!

Курс по соц. сетям