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

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



Активация скрытых функций

Оказывается, в редакторе WordPress уже встроено несколько дополнительных функций, которые изначально не активированы. И чтобы их добавить, вам нужно прописать в 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");

 

В результате в визуальном редакторе у вас появится дополнительный ряд с новыми кнопками:

 

Активация функций, встроенных в редактор

 

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

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

В качестве примера в визуальный редактор я добавлю кнопку CF, которая будет отвечать (вернее уже отвечает) за стиль для названия файлов (наверное, вы замечали, что все файлы я выделяю следующим образом — пример):

1. Первым делом давайте создадим папку js (если ее, конечно, еще нет) в папке вашего шаблона, и в ней создадим еще одну папку images:

 

Создание каталогов в папке шаблона
2. Также вам нужно нарисовать кнопку размером 20×20 пикселей, сохранить ее в формате .PNG и поместить в только что созданную папку «images».
3. Теперь добавьте в файл functions.php следующую функцию (в самый конец перед символами ?>), которая позволит создавать новые кнопки (если вы хотите добавить кнопки в другой ряд (не в 4, как я), то измените цифру в 6 строке на ту, которая соответствует нужному ряду):

 

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_4', 'my_register_tinymce_button');
}
}
add_action('init', 'my_tinymce_button');

 

Далее создайте файл mybuttons.js при помощи текстового редактора Notepad++, пропишите в нем следующий код и разместите файл в папке «js» (файл обязательно сохраняйте в кодировке UTF-8 (без BOM):

 

(function() {
tinymce.create('tinymce.plugins.MyButtons', {
init : function(ed, url) {
 
ed.addButton('codefile', {
title : 'Стиль для названия файлов',
image : url+'/images/CF.png',
onclick : function() {
ed.selection.setContent('[codefile]' + ed.selection.getContent() + '[/codefile]');
}
});
 
},
createControl : function(n, cm) {
return null;
},
});
tinymce.PluginManager.add('my_button_script', tinymce.plugins.MyButtons);
})();

 

Измените следующие строки:
Строка 5: вместо «codefile» напишите название своей кнопки.
Строка 6: здесь пропишите Title для кнопки, который будет отображаться в виде всплывающей подсказки.
Строка 7: укажите путь к изображению, которое вы создали на втором шаге.
Строка 9: вместо «codefile» пропишите собственные теги, которыми будет обрамлен текст, и которые будут отвечать за его стилевое оформление.
А сейчас мы подключим mybuttons.js к файлу functions.php за счет следующей функции, которую нужно прописать сразу после функции, добавленной на 3 шаге:

 

function my_add_tinymce_button($plugin_array){
$plugin_array['my_button_script'] = get_bloginfo('template_url').'/js/mybuttons.js';
return $plugin_array;
}

 

Чтобы зарегистрировать кнопку, добавьте в файл functions.php еще одну функцию (в самый конец перед символами ?>), только вместо codefile пропишите свое название кнопки, которое вы указывали в 5 строке на 4-5 пункте:

 

function my_register_tinymce_button($buttons){
    array_push($buttons, "codefile");
    return $buttons;
    }

 

Если вы все сделали правильно, то в вашем визуальном редакторе появится новая кнопка:

 

Новая кнопка в визуальном редакторе
И теперь вам остается лишь прописать стили для тегов кнопки, чтобы выделенные слова или фразы имели свое уникальное оформление. Но для этого в файле functions.php нужно создать шорткод и присвоить ему класс:

 

function codefile_style($attr,$content= null){
return'
<span class="codefile">'.$content.'</span>
';
}
add_shortcode('codefile', 'codefile_style');

 

Поясню некоторые строки:
Строки 1, 6: вместо codefile_style придумайте свое название функции шорткода.
Строка 3: здесь вам нужно создать новый класс для шорткода (если планируете выделять только отрывки текста, то оставьте тег span, если же хотите с помощью шорткода создать блок, то тогда вам нужно использовать тег div, и вместо codefile не забудьте прописать свой класс).
Строка 6: вместо codefile пропишите шорткод, для которого вы уже создали кнопку в 9 строке на 4-5 шаге.

После этого откройте файл style.css, добавьте в него созданный класс и пропишите для него свой стиль оформления, и после этого кнопка заработает так, как вам нужно:

 

Стиль оформления codefile

 

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

Создание кнопки в файле mybuttons.js (4 шаг) — продублируйте с 5 по 11 строку и измените данные уже под новую кнопку:

 

Добавление второй кнопки через файл mybuttons
Регистрация кнопки (7 шаг) — продублируйте 2 строку и измените название кнопки:

 

Регистрация кнопки

 

Создание шорткода — продублируйте всю функцию, изменив ее название, добавив класс и прописав шорткод:

 

Создание шорткода

 

А вот и результат моих действий:

 

Две кнопки в визуальном редакторе

 

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

Дополнительные кнопки текстового редактора создаются значительно проще: вам нужно лишь добавить одну функцию в файл functions.php (перед символами ?> в самом конце), и отредактировать ее:

 

if( !function_exists('_add_my_quicktags') ){
function _add_my_quicktags()
{ ?>
<script type="text/javascript">
 
QTags.addButton( 'BONUS', 'БОНУС', '<div class="bonus">', '</div>' );
QTags.addButton( 'NOBonus', 'NoBonus', '<div class="nobonus">', '</div>' );
 
</script>
<?php }
add_action('admin_print_footer_scripts', '_add_my_quicktags');
}


 

Редактировать нужно 6 строку:

 

QTags.addButton( 'латинское название кнопки', 'название кнопки в редакторе ', 'открывающаяся часть тега и класс', 'закрывающаяся часть тега' );

 

Чтобы добавить вторую и последующие кнопки достаточно продублировать и отредактировать вышеописанную строку, что, собственно, и сделано у меня в первом примере (кнопки Бонус и NoBonus).И, конечно же, не забудьте оформить классы в файле style.css:
Стиль оформления бонуса
И как всегда демонстрирую вам конечный результат:
Собственные кнопки в текстовом редакторе

 

Кстати, если вы используете плагин WP-Syntax, чтобы выводить код в записях, то вместо дополнительного плагина Wp-Syntax Button (который почему-то у многих работает некорректно) можно просто самостоятельно создать кнопку (я так и сделала, чтобы не прописывать теги вручную).

Екатерина Худякова

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.