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

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

0
Как добавить собственные кнопки в редактор 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");

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

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

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

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


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

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

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

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;
    }

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

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

И теперь вам остается лишь прописать стили для тегов кнопки, чтобы выделенные слова или фразы имели свое уникальное оформление. Но для этого в файле 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, добавьте в него созданный класс и пропишите для него свой стиль оформления, и после этого кнопка заработает так, как вам нужно:

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

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

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

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

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

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

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

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

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

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


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


Дополнительные кнопки текстового редактора создаются значительно проще: вам нужно лишь добавить одну функцию в файл 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:

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

И как всегда демонстрирую вам конечный результат:

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

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

Внимание!
Для просмотра скрытого текста, Вам необходимо Войти или Зарегистрироваться.
  • WordPress, Полезные статьи
  • 28-10-2018, 17:03
  • 1045
Вернуться назад