Добавляем кнопки в wysiwyg редактор wordpress
TinyMCE WordPress добавление кнопок. Как я уже сказал во вступительном тексте, редактор по умолчанию содержит только необходимые элементы. Вы можете добавить функциональные возможности за счет добавления новых кнопок. Представляю ниже код добавления кнопки в редактор:
function add_mce_buttons($buttons){
array_push($buttons, "hr");
return $buttons;
}
add_filter("mce_buttons", "add_mce_buttons");Вот ТУТ полный перечень всех кнопок. Добавьте код в вашу тему в файл function.php. Кнопка также может быть добавлен на 2-й или 3-й строке в следующим образом:
add_filter ( "mce_buttons_2" , "add_mce_buttons" ); add_filter ( "mce_buttons_3" , "add_mce_buttons" );
Создание пользовательских кнопок в редакторе TinyMCE:
Если вы используете shoortcode или классы для текста, изображения, кнопки, которые также могут быть созданы.
Здесь я собираюсь создать кнопку в третьем ряду, кнопка будет работать только в том случаи если пользователь имеет права на редактирование постов или страниц.
Добавить ниже код в function.php:
add_action('init', 'custom_mce_button');
function custom_mce_button() {
if ( current_user_can('edit_posts') && current_user_can('edit_pages') )
{
add_filter('mce_buttons_3', 'add_button');
add_filter('mce_external_plugins', 'add_plugin');
}
}Создадим еще кнопочку которая берет выделенный текст в шорткод:
Функция добавления кнопки:
function add_button($buttons){ array_push($buttons,"blcss");return $buttons;}
Добавляем еще код который будет обращаться к редактору TinyMCE и WordPress:
function add_plugin($plugin_array) {
$plugin_array['blist'] = get_bloginfo('template_url').'/scripts/customcodes.js';
return $plugin_array;
}Этот код просто указывает путь для конкретного файла JavaScript, customcodes.js, который сохраняется в папку scripts, в папке вашей темы. Вы можете жестко закодировать путь, но с использованием get_bloginfo метода у вас получится более гибкий код для переноса на другие сайты.
Выполните задачу, добавив следующий код в файл с именем customcodes.js . Сохраните его по определенному выше путеи.
(function(){
tinymce.PluginManager.requireLangPack('blist');
tinymce.create('tinymce.plugins.blist', {
init : function(ed, url){
ed.addCommand('cmd_css', function(){
ilc_sel_content = tinyMCE.activeEditor.selection.getContent();
tinyMCE.activeEditor.selection.setContent('' + ilc_sel_content + ''); // замените на квадратные скобки
});
ed.addButton('blcss', {
title: 'CSS Wrap',
image: 'https://plugins.jasonbahl.com/wp-content/plugins/j2_anything_slider/js/menu_icon.png',
cmd: 'cmd_css'
});
},
createControl : function(n, cm){
return null;
},
});
tinymce.PluginManager.add('blist', tinymce.plugins.blist);
})();Иконка «CSS.png» должна быть 20px Х 20px.
Скрываем ненужные кнопки при помощи параметров редактора TinyMCE
Если вы хотите удалить нежелательные кнопки в редакторе, то просто укажите следующий код:
function disable_mce_buttons( $opt ) {
$opt['theme_advanced_disable'] = 'bold,italic';
return $opt;
}
add_filter('tiny_mce_before_init', 'disable_mce_buttons');Вы также можете задать специальный параметр и показывать только те элементы, которые вы хотите:
function custom_options( $opt ) {
//format drop down list
$opt['theme_advanced_blockformats'] = 'p,pre,code,h3,h4';
//font list
$opt['theme_advanced_fonts'] = 'Arial=arial,helvetica,sans-serif;Courier New=courier new,courier,monospace';
//font size
$opt['theme_advanced_font_sizes'] = '10px,12px,14px,16px,24px';
//default foreground color
$opt['theme_advanced_default_foreground_color'] = '#000000';
//default background color
$opt['theme_advanced_default_background_color'] = '#FFFFFF';
return $opt;
}
add_filter('tiny_mce_before_init', 'custom_options);Также работать с кнопками редактора TinyMCE можно в файле wp-includes/js/quicktags.js но я бы не советовал, при обновлении движка ваши настройки просто слетят.
Статья была взята и переведена с сайта: sumtips.com
Благодарности и поправки можете отправлять в комментарии.
Постараюсь быстро ответить всем.
Этот код сам использую, так что добавление кнопок в редактор TinyMCE в WordPress должно работать идеально.
Постараюсь в ближайшее время выложить еще статью как добавлять кнопки в режиме редактирования кода в WordPress.




