Добавляем скрытые кнопки в редактор TinyMCE.
TinyMCE - это текстовый редактор в WordPress.
По умолчанию, в редакторе TinyMCE есть скрытые кнопки, и чтобы их вывести на панель управления есть два пути:
- Установить плагин TinyMCE Advanced.
Заходим в WordPress на вкладку плагины и жмем кнопку добавить новый . В поле поиска пишем TinyMCE Advanced и запускаем поиск, жмем на кнопку установить и вводим логин:пароль от FTP сервера.
Или делаем это все в ручном режиме.
Копируем плагин с сайта https://ru.wordpress.org/plugins/tinymce-advanced/
cd /home/user/temp
wget https://downloads.wordpress.org/plugin/tinymce-advanced.4.4.3.zip
unzip tinymce-advanced.4.4.3.zip
mv -r /home/user/temp/tinymce-advanced/ /var/www/my.sites.net/wp-content/plugins/
Заходим в WordPress на вкладку плагины и жмем Активировать на плагине TinyMCE Advanced.
- Активируем кнопки с помощью конфигурационных файлов
Добавляем следующий код в functions.php (в примере у вас появятся кнопки hr, fontselect, sup ):
function enable_more_buttons($buttons) {
$buttons[] = 'hr';
$buttons[] = 'fontselect';
$buttons[] = 'sup';
return $buttons;
}
add_filter("mce_buttons", "enable_more_buttons");
Для отображения доступны следующие кнопки: bold, italic, underline, strikethrough, justifyleft, justifycenter, justifyright, justifyfull, bullist, numlist, outdent, indent, cut, copy, paste, undo, redo, link, unlink, image, cleanup, help, code, hr, removeformat, formatselect, fontselect, fontsizeselect, styleselect, sub, sup, forecolor, backcolor, charmap, visualaid, anchor, newdocument и separator.
Добавим свои кнопки в TinyMCE Advansed.
Теперь добавим свои собственные кнопки, так как мне не хватило функционала который заложен по умолчанию в данном редакторе.
Дописываем в конец данный код:
function mihalica_button()
{
if ( current_user_can('edit_posts') && current_user_can('edit_pages'$
{
add_filter('mce_external_plugins', 'mihalica_plugin');
add_filter('mce_buttons_3', 'mihalica_register_button');
}
}
add_action('init', 'mihalica_button');
function mihalica_plugin($plugin_array){
$plugin_array['mihalica'] = get_bloginfo('template_url').'/js/newbut$
return $plugin_array;
}
function mihalica_register_button($buttons){
array_push($buttons, "z1");
array_push($buttons, "z2");
array_push($buttons, "z3");
array_push($buttons, "gg");
array_push($buttons, "ss");
array_push($buttons, "sss");
return $buttons;
}
В строке: add_filter(‘mce_buttons_3′, mihalica’_register_button’); цифра 3 отвечает за строку в панели управлении, для последующих блоков кнопок её надо увеличивать на 1.
Строки типа array_push($buttons, "ss"); -это наши кнопки.
Далее создаём новый документ с именем newbuttons.js
Вносим туда данный код:
(function() {
tinymce.create('tinymce.plugins.mihalica', {
init : function(ed, url) {
ed.addButton('ss', {
title : 'Блок с красным шрифтом',
image : url+'/images/comand.png',
onclick : function() {
ed.selection.setContent('<div class="class-comand">' + ed.selection.getConte$
}
});
ed.addButton('z1', {
title : 'Заголовок 1',
image : url+'/images/thema1.png',
onclick : function() {
ed.selection.setContent('<span class="thema1">' + ed.selection.getContent() $
}
});
ed.addButton('gg', {
title : 'Выделенное слово',
image : url+'/images/word.png',
onclick : function() {
ed.selection.setContent('<em> <span class="word">' + ed.selection.getContent$
}
});
ed.addButton('z2', {
title : 'Заголовок 2',
image : url+'/images/thema2.png',
onclick : function() {
ed.selection.setContent('<span class="thema2">' + ed.selection.getContent() $
}
});
ed.addButton('z3', {
title : 'Заголовок 3',
image : url+'/images/thema3.png',
onclick : function() {
ed.selection.setContent('<ul><li><span class="thema3">' + ed.selection.getCo$
}
});
ed.addButton('sss', {
title : 'Блок с желтым фоном',
image : url+'/images/code.png',
onclick : function() {
ed.selection.setContent('<div class="class-code">' + ed.selection.getContent$
}
});
},
createControl : function(n, cm) {
return null;
},
});
tinymce.PluginManager.add('mihalica', tinymce.plugins.mihalica);
})();
Строка image : url+'/images/code.png' , это путь к иконке, которая должна быть 18x18 пикселей в формате .png и лежать папке js вашей темы.
Строка title : 'Блок с желтым фоном', это описание кнопки, которое будет выскакивать при на наведении курсора.
Строка ed.selection.setContent('<div class="class-code">' + ed.selection.getContent() + '</div>'); это код который будет задавать нужные параметры выделенному тексту.
На этом все, у нас должна появиться на 3 панели 5 кнопок с нашими иконками.
Источники:
http://www.sycha.com/wordpress-add-hr-button-tinymce-visual-editor