Как добавить новую кнопку в текстовой редактор 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"