Как добавить свою кнопку в редактор wordpress и упростить набор часто используемого кода

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

В повседневной работе с сайтами на платформе wordpress часто сталкиваешься с необходимостью писать код оформления элементов статей. Есть способ автоматизировать этот процесс.

Как добавить кнопку с кодом в редактор wordpress?

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

Подробная инструкция в статье «wordpress functions php — тонкая настройка и хитрости»
Чтобы добавить кнопку с кодом, в файл functions.php нужно вставить следующий код

надежный хостинг

if( !function_exists('_add_my_quicktags') ){
function _add_my_quicktags()
{ ?>
<script type="text/javascript">
QTags.addButton( 'p', 'p', '<p>', '</p>' );
QTags.addButton( 'br', 'br', '<br>', '<br>' );
QTags.addButton( 'h2', 'H2', '<h2>', '</h2>' );
QTags.addButton( 'h3', 'H3', '<h3>', '</h3>' );
QTags.addButton( 'h4', 'H4', '<h4>', '</h4>' );
QTags.addButton( 'no', 'noindex', '<noindex></noindex>', '' );
QTags.addButton( 'prob', 'Отступ', '<p> </p>', '' );
</script>
<?php }
add_action('admin_print_footer_scripts', '_add_my_quicktags');
}

Теперь нужно разобраться ,как он формируется и, что делает.

  • Первая часть в кавычках — это служебное название кнопки, оно необходимо для системы и должно быть на английском, либо транслите.
  • Вторая часть в кавычках — это название кнопки в html редакторе wordpress. Оно может быть любым, главное чтобы было понятно, что это за кнопка.
  • Третья часть — это непосредственно код, который будет вставлен. Важно, писать его в одну строку, так как если вы сделаете перенос он не будет работать.
  • Четвертая часть в кавычках может быть пустой, либо содержать закрывающий парный тег

QTags.addButton( 'downlbtn', 'скачать+демо"', '
<div class="downloadbtn">Такой вариант записи кнопки не сработает</div>
', '' );

Чтобы добавить все необходимые фрагменты кода, достаточно для каждого прописать свой QTags.addButton, после чего нужно сохранить файл functions php.

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

надежный хостинг
Поделиться в социальных сетях: