Как сделать кнопки для шорткода в админке вордпресса

Все оказалось просто, как мычание. Прописываем в functions.php код скрипта js, и загружаем его.

Код для functions.php

// Своя кнопка в редакторе для шорткода
function true_add_mce_button() {
// проверяем права пользователя - может ли он редактировать посты и страницы
if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) {
return; // если не может, то и кнопка ему не понадобится, в этом случае выходим из функции
}
// проверяем, включен ли визуальный редактор у пользователя в настройках (если нет, то и кнопку подключать незачем)
if ( 'true' == get_user_option( 'rich_editing' ) ) {
add_filter( 'mce_external_plugins', 'true_add_tinymce_script' );
add_filter( 'mce_buttons', 'true_register_mce_button' );
}
}
add_action('admin_head', 'true_add_mce_button');

// В этом функции указываем ссылку на JavaScript-файл кнопки
function true_add_tinymce_script( $plugin_array ) {
$plugin_array['true_mce_button'] = get_stylesheet_directory_uri() .'/true_button.js'; // true_mce_button - идентификатор кнопки
return $plugin_array;
}

// Регистрируем кнопку в редакторе
function true_register_mce_button( $buttons ) {
array_push( $buttons, 'true_mce_button' ); // true_mce_button - идентификатор кнопки
array_push( $buttons, 'true_mce_button2' ); // true_mce_button2 - идентификатор кнопки
array_push( $buttons, 'true_mce_button3' ); // true_mce_button2 - идентификатор кнопки
return $buttons;
}

 

Сайм файл true_button.js кладем в корень темы, его содержание такое:

(function() {
tinymce.PluginManager.add('true_mce_button', function( editor, url ) { // true_mce_button - ID кнопки
editor.addButton('true_mce_button', { // true_mce_button - ID кнопки, везде должен быть одинаковым
text: '[uppod]', // текст кнопки, если вы хотите, чтобы ваша кнопка содержала только иконку, удалите эту строку
title: 'Вставить шорткод [ad1]', // всплывающая подсказка
icon: false, // тут можно указать любую из существующих векторных иконок в TinyMCE либо собственный CSS-класс
onclick: function() {
editor.insertContent('[uppod video=""]'); // вставляем шорткод [misha] в редактор, также можно задать любое действие jQuery
}
});
editor.addButton('true_mce_button2', { // true_mce_button - ID кнопки, везде должен быть одинаковым
text: '[ad2]', // текст кнопки, если вы хотите, чтобы ваша кнопка содержала только иконку, удалите эту строку
title: 'Вставить шорткод [ad2]', // всплывающая подсказка
icon: false, // тут можно указать любую из существующих векторных иконок в TinyMCE либо собственный CSS-класс
onclick: function() {
editor.insertContent('[ad2]'); // вставляем шорткод [misha] в редактор, также можно задать любое действие jQuery
}
});
editor.addButton('true_mce_button3', { // true_mce_button - ID кнопки, везде должен быть одинаковым
text: '[ad3]', // текст кнопки, если вы хотите, чтобы ваша кнопка содержала только иконку, удалите эту строку
title: 'Вставить шорткод [ad3]', // всплывающая подсказка
icon: false, // тут можно указать любую из существующих векторных иконок в TinyMCE либо собственный CSS-класс
onclick: function() {
editor.insertContent('[ad3]'); // вставляем шорткод [misha] в редактор, также можно задать любое действие jQuery
}
});

});
})();

Тут 3 кнопки будет вставлено.

Добавить комментарий