Додаємо кнопки до wysiwyg редактор wordpress
TinyMCE WordPress додавання кнопок. Як я вже сказав у вступному тексті, редактор за замовчуванням містить лише необхідні елементи. Ви можете додати функціональні можливості за рахунок додавання нових кнопок. Подаю нижче код додавання кнопки в редактор:
|
1 2 3 4 5 |
function add_mce_buttons($buttons){ array_push($buttons, "hr"); return $buttons; } add_filter("mce_buttons", "add_mce_buttons"); |
Ось ТУТ повний перелік усіх кнопок. Додайте код у вашу тему до файлу function.php. Кнопка також може бути доданий на 2-му або 3-му рядку наступним чином:
|
1 2 |
add_filter ( "mce_buttons_2" , "add_mce_buttons" ); add_filter ( "mce_buttons_3" , "add_mce_buttons" ); |
Створення кнопок користувача в редакторі TinyMCE:
Якщо ви використовуєте shoortcode або класи для тексту, зображення, кнопки, які також можуть бути створені.
Тут я збираюся створити кнопку у третьому ряду, кнопка буде працювати тільки в тому випадку, якщо користувач має права на редагування постів або сторінок.
Додати нижче код у function.php:
|
1 2 3 4 5 6 7 8 |
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:
|
1 2 3 4 |
function add_plugin($plugin_array) { $plugin_array['blist'] = get_bloginfo('template_url').'/scripts/customcodes.js'; return $plugin_array; } |
Виконайте завдання, додавши наступний код файлу з ім'ям customcodes.js . Збережіть його за певним шляхом.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
(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); })(); |
Приховуємо непотрібні кнопки за допомогою параметрів редактора TinyMCE
Якщо ви бажаєте видалити небажані кнопки в редакторі, то просто вкажіть наступний код:
|
1 2 3 4 5 |
function disable_mce_buttons( $opt ) { $opt['theme_advanced_disable'] = 'bold,italic'; return $opt; } add_filter('tiny_mce_before_init', 'disable_mce_buttons'); |
Ви також можете задати спеціальний параметр та показувати лише ті елементи, які ви хочете:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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.
