Как добавить собственные кнопки в редактор 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, добавьте в него созданный класс и пропишите для него свой стиль оформления, и после этого кнопка заработает так, как вам нужно:
Вторая и последующие кнопки создаются по аналогии, но вам уже не нужно повторно прописывать все функции, которые мы только что разобрали. Их достаточно лишь немного отредактировать, и я вам кратко покажу, как это делать (чтобы избавить вас от лишних трудностей).
Создание кнопки в файле mybuttons.js (4 шаг) — продублируйте с 5 по 11 строку и измените данные уже под новую кнопку:
Регистрация кнопки (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 (который почему-то у многих работает некорректно) можно просто самостоятельно создать кнопку (я так и сделала, чтобы не прописывать теги вручную).
