Как добавить кнопки в редактор WordPress

Последнее обновлене - 15 января 2023 в 16:52

Не так давно у меня возникла необходимость добавить кнопки в редактор WordPress. Я имею в виду старый классический редактор для создания и редактирования записей, поскольку ранее я отключил работу редактора Gutenberg.

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

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

Проще всего добавить свои кнопки в текстовый редактор. Именно с него и начнём.

Текстовый редактор

Чтобы добавить в текстовый редактор WordPress дополнительные кнопки, достаточно внести в файл functions.php небольшой код. Приведу пример кода, которым пользуюсь сам. С его помощью текстовый редактор сейчас выглядит так, как на скриншоте ниже.

А вот и сам код.

//дополнительные кнопки в текстовом редакторе
add_action('admin_footer', 'eg_quicktags');
function eg_quicktags() {
?>
<script>
jQuery(document).ready(function(){
if(typeof(QTags) !== 'undefined') {
QTags.addButton( 'H2', 'H2', '<h2>', '</h2>');
QTags.addButton( 'Info', 'Инфа', '<div class="info">', '</div>');
QTags.addButton( 'Success', 'Успех', '<div class="success">', '</div>');
QTags.addButton( 'Warning', 'Внимание', '<div class="warning">', '</div>');
QTags.addButton( 'Error', 'Ошибка', '<div class="error">', '</div>');
QTags.addButton( 'hidelink', 'hidelink', '', '' );
QTags.addButton( 'Marker', 'Маркер', '<mark>', '</mark>');
}
});
</script>
<?php
}

Как работать теперь с кнопками? Например, для того чтобы поместить заголовок статьи второго уровня между тегами h2 и /h2 (строка 8 кода), необходимо выделить сам заголовок и кликнуть по кнопке H2.

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

QTags.addButton( 'Название кнопки на латинице', 'Надпись на кнопке', '[шорткод]ваш код[/шорткод]' );

Визуальный редактор

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

Отдельная кнопка

Добавить свои кнопки в визуальный редактор немного сложнее, чем в текстовый. Помимо редактирования файла functions.php придётся немного поработать с графикой, создать дополнительный каталог и js-файл. Однако, сделать это не представляет особой сложности. Выглядеть такая кнопка будет следующим образом, как на скриншоте.

Например, можно создать кнопку для выделения некоторого текста цветом. Включим в работу новую кнопку визуального редактора в 5 шагов.

Step 1. Нарисовать, например, в фотошопе, кнопку размером 20х20px. Файл сохранить с расширением png. У меня получилась такая кнопка.

Step 2. Создать каталог (папку) «js» в папке с файлами рабочей темы. И в этой новой папке «js» создать ещё одну папку «images».

Step 3. Файл кнопки залить в папку «images».

Step 4. Создать новый файл «mybuttons.js» в каталоге «…/ваша тема/js» с таким содержанием.

(function() {
tinymce.create('tinymce.plugins.MyButtons', {
init : function(ed, url) {
ed.addButton('knopa', { /*где knopa - название кнопки*/
title : 'knopa', /*где knopa - всплывающая подсказка при наведении на кнопку*/
image : url+'/images/bt.png', /*указываем путь к файлу кнопки, где bt.png - имя файла кнопки*/
onclick : function() {
ed.selection.setContent('[jack]' + ed.selection.getContent() + '[/jack]'); /*где [jack] и [/jack] - теги, которыми оборачивается текст*/
}
});
},
createControl : function(n, cm) {
return null;
},
});
tinymce.PluginManager.add('my_button_script', tinymce.plugins.MyButtons);
})();

Файл сохранить в кодировке UTF-8 без BOM.

Step 5. Добавить в файл functions.php такой код.

//Своя кнопка в визуальном редакторе
/*создаём новые кнопки*/
function my_tinymce_button()
{
if ( current_user_can('edit_posts') && current_user_can('edit_pages') )
{
add_filter('mce_external_plugins', 'my_add_tinymce_button');
add_filter('mce_buttons_2', 'my_register_tinymce_button'); /*где цифра 2 - номер строки, где будет кнопка*/
}
}
add_action('init', 'my_tinymce_button');
/*к файлу functions.php подключаем mybuttons.js */
function my_add_tinymce_button($plugin_array){
$plugin_array['my_button_script'] = get_bloginfo('template_url').'/js/mybuttons.js';
return $plugin_array;
}
/*Регистрируем кнопку*/
function my_register_tinymce_button($buttons){
array_push($buttons, "knopa"); /*Где knopa - название кнопки, как в строке 5 для Step 4*/
return $buttons;
}
/*Функция, при помощи которой кнопка включает стили для выделенного текста*/
function knopa_style($attr,$content= null){ /*где knopa_style - название функции*/
return'
<span style="background:#eee;border:1px dashed #aaa;border-radius:15px;padding: 10px 20px 12px 17px"> /*Стили выделения текста*/
'.$content.'
</span> /*Используйте span для отдельных слов, а div - для блоков*/
';
}
add_shortcode('jack', 'knopa_style'); /*где jack - название шорткода, как в строке 9 для Step 4, а knopa_style - название функции*/

Чтобы добавить в визуальный редактор вторую кнопку, третью и так далее, не надо повторять все вышеописанные действия. В файле «mybuttons.js» просто продублировать строки с 5 по 11. В файле functions.php продублировать строку 19, а также строки с 23 по 30. Конечно, параметры для другой кнопки надо указать новые.

Например, можно добавить в редактор кнопку для публикации адаптивного видео YouTube на сайте. Это позволит каждый раз не копировать и вставлять необходимые теги.

Кнопки в выпадающем меню

Помимо описанного выше способа, дополнительные кнопки можно добавить в виде выпадающего меню. Выглядеть это будет так.

В данном случае, в файл functions.php необходимо прописать такой код.

// Кнопки в выпадающем меню
function wpb_mce_buttons_2($buttons) {
array_unshift($buttons, 'styleselect');
return $buttons;
}
add_filter('mce_buttons_2', 'wpb_mce_buttons_2');
/* Вызов фильтра для настроек редактора*/
function my_mce_before_init_insert_formats( $init_array ) {
/*Определение массива style_formats*/
$style_formats = array(
/*Настройки для каждой отдельной кнопки*/
array(
'title' => 'Информация',
'block' => 'div',
'classes' => 'info',
'wrapper' => true,
),
array(
'title' => 'Внимание',
'block' => 'div',
'classes' => 'attention',
'wrapper' => true,
),
);
/*Вставка массива, JSON ENCODED, в 'style_formats'*/
$init_array['style_formats'] = json_encode( $style_formats );
return $init_array;
}
/*Прикрепить вызов к 'tiny_mce_before_init'*/
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );

Вызов скрытых кнопок визуального редактора

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

А вот и код.

function add_more_buttons($buttons) {
$buttons[] = 'fontselect'; // Семейство шрифтов
$buttons[] = 'fontsizeselect'; // Размеры шрифтов
$buttons[] = 'styleselect'; // Форматы (заголовки, строки, блоки, выравнивание)
$buttons[] = 'backcolor'; // Цвет фона
$buttons[] = 'newdocument'; // Новый документ
$buttons[] = 'cut'; // Вырезать
$buttons[] = 'copy'; // Копировать
$buttons[] = 'paste'; // Вставить
$buttons[] = 'removeformat'; // Очистить форматирование
return $buttons;
}
add_filter("mce_buttons_3", "add_more_buttons");

Как видите, скрытых кнопок в редакторе не так уж и много, однако компенсировать их ограниченное количество возможно при помощи указанных выше способов.