Для удобства администрирования решил добавить в редактор текста в админке несколько полезных кнопок:
- Первые три кнопки будут вставлять определённую картинку
- Четверта кнопка будет вставлять shortcod (О шорткодах в ВордПрессе: тынц)
Начинаем.
Писать отдельный плагин я не стал, поэтому кнопки будут добавлены только для той темы, которую используем.
В файле functions.php этой темы пишем:
[cce lang=»php»] include «plugins/tinymcebutton.php»[/cce]
Создаём папку plugins в папке темы, а в ней файл tinymcebutton.php , его и пишем:
[cce lang=»php»]<?php
add_action(‘init’, ‘add_custom_buttons’); //—ловим событие инициализации WordPress
add_filter( ‘tiny_mce_version’, ‘my_refresh_mce’); //—событие когда TinyMCE запрашивает версию, не обязательно
function add_custom_buttons() { //— сwordpress инициализировался
if ( ! current_user_can(‘edit_posts’) && ! current_user_can(‘edit_pages’) )
return;
if ( get_user_option(‘rich_editing’) == ‘true’) {
add_filter(‘mce_external_plugins’, ‘add_custom_buttons_tinymce_plugin’); //— добавляем фильтр запроса дополнительных кнопок от TinyMce
add_filter(‘mce_buttons’, ‘register_custom_buttons’); //— добавляем фильтр запроса дополнительных плагинов от TinyMCE
}
}
function register_custom_buttons($buttons) { //— регистрируем кнопки
array_push($buttons, «|», «cupgold»);
array_push($buttons, «|», «cupsilver»);
array_push($buttons, «|», «cupbronze»);
array_push($buttons, «|», «addcolumn»);
return $buttons;
}
function add_custom_buttons_tinymce_plugin($plugin_array) { //— регистрируем наш плагин
$plugin_array[‘custombuttons’] = get_bloginfo(‘template_url’).’/plugins/tinymce_plugin.js’;
return $plugin_array;
}
function my_refresh_mce($ver) { //— ну и для прикола обновляем версию TinyMCE
$ver += 3;
return $ver;
}
?>
[/cce]Теперь пора написать сам обработчик плагина и кнопок.
Создаём в папке plugins файл tinymce_plugin.js его и пишем:
[cce lang=»javascript»](function() {
tinymce.create(‘tinymce.plugins.CustomButtons’, {
init : function(ed, url) {
ed.addButton(‘cupgold’, { //— названия кнопок соответственно как мы их регистрировали
title : ‘Золотой кубок’, //— заголовок кнопки
image : url+’/cupgold.png’, //—иконка кнопки, иконка должна лежать рядом с tinymce_plugin.js и размером 20х20
onclick : function() {
imgurl=url+»/../images/CupGold_ico.png»;
ed.execCommand(‘mceInsertContent’, false, ‘<img src=»‘+imgurl+'» alt=»Золотой кубок» title=»Золотой кубок» />’); //— отдаём команду TinyMCE
}
});
ed.addButton(‘cupsilver’, {
title : ‘Серебряный кубок’, //— заголовок кнопки
image : url+’/cupsilver.png’, //—иконка кнопки, иконка должна лежать рядом с tinymce_plugin.js и размером 20х20
onclick : function() {
imgurl=url+»/../images/CupSilver_ico.png»;
ed.execCommand(‘mceInsertContent’, false, ‘<img src=»‘+imgurl+'» alt=»Серебряный кубок» title=»Серебряный кубок» />’);
}
});
ed.addButton(‘cupbronze’, {
title : ‘Бронзовый кубок’, //— заголовок кнопки
image : url+’/cupbronze.png’, //—иконка кнопки, иконка должна лежать рядом с tinymce_plugin.js и размером 20х20
onclick : function() {
imgurl=url+»/../images/CupBronze_ico.png»;
ed.execCommand(‘mceInsertContent’, false, ‘<img src=»‘+imgurl+'» alt=»Бронзовый кубок» title=»Бронзовый кубок» />’);
}
});
ed.addButton(‘addcolumn’, {
title : ‘Добавить колонку’, //— заголовок кнопки
image : url+’/cupbronze.png’, //—иконка кнопки, иконка должна лежать рядом с tinymce_plugin.js и размером 20х20
onclick : function() {
ed.execCommand(‘mceInsertContent’, false, ‘[addcolumn]’);
}
});
},
createControl : function(n, cm) {
return null;
},
getInfo : function() {
return {
longname : «Custom buttons»,
author : ‘PavelK’,
authorurl : ‘http://pavelk.ru/’,
infourl : ‘http://pavelk.ru/’,
version : «1.1»
};
}
});
tinymce.PluginManager.add(‘custombuttons’, tinymce.plugins.CustomButtons); //— custombuttons — как мы назвали плагин когда его регистрировали
})();
[/cce]
Ну и можно добавить обработчик [shortcode] в каком угодно файле. Вот как он может выглядеть, для примера:
[cce lang=»php»] // [addcolumn] function sc_addcolumn_func() {return «ТУТ ДОБАВЛЯЕМ КОЛОНКУ»;
}
add_shortcode( ‘addcolumn’, ‘sc_addcolumn_func’ ); //— addcolumn — наш шорт код.
[/cce]
Ну на этом пожалуй всё.
[tip]UPDT1:
Когда добавляем фильтр регистрации кнопок (add_filter(‘mce_buttons …) если заменить mce_buttons на mce_buttons_3, тогда кнопки появяться в самой нижней строке редактора.[/tip]
[tip]UPDT2:
Так же есть полезный фильтр, срабатывает при инициализации TinyMCE, например, можно изменить valid_elements:
[cce lang=»php»] add_filter(‘tiny_mce_before_init’, ‘tmve_mce_valid_elements’);function tmve_mce_valid_elements( $init ) {
//—делаем своё тёмное дело…
return $init;
}
[/cce] [/tip] [tip]UPDT3:
Обрамление шорткодом выделенного текста:
[cce lang=»javascript»] onclick: function() {ed.focus();
ed.selection.setContent(‘[shortcode]’ + ed.selection.getContent() + ‘[/shortcode]’);
}[/cce] [/tip]
6 комментариев
Есть проблема. Кнопки отображаются только для админа. Для юзера они не видны. Из за чего это может быть и как принудительно их отображать для всех ролей?
Дело в ролях пользователя.
Можно или их изменить через соответствующий плагин или в функции add_cusom_buttons убрать уловия или отредактировать под свои нужды.
Например, так:
[cc lang=»javascript»]
onclick: function() {
ed.focus();
ed.selection.setContent(‘[shortcode]’ + ed.selection.getContent() + ‘[/shortcode]’);
}
[/cc]
Хорошая статья! Работает.
Если можно добавьте пожалуйста вариант при выделении текста нажать на кнопку и вставка шорткода с двух сторон [шорткод] и [/шорткод]
Заранее спасибо!
Пардон, поправил статью.
Какие ошибки?
&& Что это за символы в первом коде?
У меня при вставке include «plugins/tinymcebutton.php»куда не вставлю выдает ошибку?! Что делать, хочу сделать для вставки шорткода и не как в начале даже застрял.