Как добавить новую кнопку в текстовой редактор WordPress

Admin WordPress

Если возникла потребность дополнительных HTML кнопок в текстовой редактор WordPress, то сделать это достаточно просто.

Есть два способа добавления своих кнопок в редактор.

1. Добавить через файл functions.php.
2. Откорректировать один из предустановленных файлов WordPress.

Добавляем новые кнопки через файл functions.php

Следующий код нужно добавить в файл functions.php шаблона своего сайта:

add_action( 'admin_print_footer_scripts', 'add_sheensay_quicktags' );
function add_sheensay_quicktags() {
   if (wp_script_is('quicktags')) :
?>
    <script type="text/javascript">
      if (QTags) {  
        // QTags.addButton( id, display, arg1, arg2, access_key, title, priority, instance );
        QTags.addButton( 'sheens_h2', 'h2', '<h2>', '</h2>', 'h', 'Заголовок 2 уровня', 1 );
        QTags.addButton( 'sheens_h3', 'h3', '<h3>', '</h3>', 'h', 'Заголовок 3 уровня', 2 );
      }
    </script>
<?php endif;
}

В вышеприведенном коде меняем значения на нужные вам кнопки.

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

Этот способ является дилетантским и не профессиональным, как и любое действие, которое направлено на изменение движка. Тем не менее, о нем тоже расскажу. Самый главный минус этого способа, что после обновления движка WordPress, придётся изменения вносить заново.

Файл quicktags.min.js отвечает за кнопки в упращенном редакторе, который работает с html. Находится файл в папке js в папке wp-includes.

Находим следующий код:

edButtons[110]=new b.TagButton("code","code","<code>","</code>","","","",{ariaLabel:quicktagsL10n.code,ariaLabelClose:quicktagsL10n.codeClose}),

И вставляем после запятой свои кнопки. Я добавил H2, H3 и pre, но можно добавить любые другие. Обратите внимание, код в файле идёт без пробелов, всё слитно. Пусть так и остаётся.

Кнопка H2:

edButtons[120]=new b.TagButton("h2","h2","<h2>","</h2>","","","",{ariaLabel:quicktagsL10n.h2,ariaLabelClose:quicktagsL10n.h2Close}),

Кнопка H3:

edButtons[130]=new b.TagButton("h3","h3","<h3>","</h3>","","","",{ariaLabel:quicktagsL10n.h3,ariaLabelClose:quicktagsL10n.h3Close}),

Кнопка pre (предварительно в коде ниже уберите пробел в слове «pr e» пришлось добавить, чтобы правильно вывести код на сайте):

edButtons[140]=new b.TagButton("pre","pre","","","","","",{ariaLabel:quicktagsL10n.pre,ariaLabelClose:quicktagsL10n.preClose}),
[/cc]

edButtons[140] - в скобках дано значение расположения, на котором находится кнопка. В данном случае значение 140 означает, что кнопка находится на 14 месте. При добавлении своей кнопки, если она в редакторе не появилась, надо увеличить это значение. Т.е. каждая отдельная кнопка увеличивает это значение на 10.

Метки:

Если вам пригодилась информация, вы можете поблагодарить автора сайта символическим пожертвованием:

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

Напишите свой комментарий, если вам есть что добавить/поправить/спросить по теме текущей статьи:
"Как добавить новую кнопку в текстовой редактор WordPress"