Один из клиентов попросил упростить вставку e-mail-адресов в текст, потому как люди, ответсвенные за заполнение сайта с html не дружат категорически и обучению поддаваться не планируют.
После непродолжительного гугления был найден донор, проведены косметические процедуры и в редакторе сайта появилась кнопка с собакой.
Ниже я распишу что и как я делал. Больше для себя, но если вам пригодится — будет замечательно.
В папке темы создаем файл editor_plugin.js с таким содержимым:
(function() { // Создаем кнопку tinymce.create('tinymce.plugins.YourEmail', { init : function(ed, url) { ed.addButton('youremail', { title : 'youremail.email', image : url+'/email_btn.png', // Тут начинается самое главное колдунство - все, что происходит после нажатия кнопки onclick : function() { var m = prompt("Insert Email", "Введите e-mail адрес"); if (m != null && m != 'undefined') // Простая проверка на email-овость введенного if (m == "" || m.indexOf('@', 0) == -1) // Если ввели фигню - ругаемся. alert("Неверно введен адрес e-mail!"); else // Собираем строчку для вставки в текст text = "[email id='"+m+"']"; ed.execCommand('mceInsertContent', false, text); } }); }, // Вот тут все интересное закончилось и началась бюрократия. createControl : function(n, cm) { return null; }, getInfo : function() { return { // Передаем привет мужику, который все это сочинил... только для YouTube longname : "Brett's YouTube Shortcode. Alexey Kolesnikov's email edition ;)", author : 'Brett Terpstra', authorurl : 'http://brettterpstra.com/', infourl : 'http://brettterpstra.com/', version : '1.0' }; } }); tinymce.PluginManager.add('youremail', tinymce.plugins.YourEmail); })();
Теперь открываем function.php вашей темы. Если такого нет — создайте! Он еще пригодится.
Пишем туда (или добавляем, если там уже что-то есть) такое:
// Добавляем обработчик shortcode - т.е. той фигни, что мы вставим кнопкой в текст поста. function addEmailLink($atts) { extract(shortcode_atts(array( "id" => '' ), $atts)); return '<a href="mailto:'.$id.'">'.$id.'</a>'; } add_shortcode('email', 'addEmailLink'); function add_email_button() { // Ничего не делаем, если пользователь не имеет доступа к редактированию 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_email_tinymce_plugin"); add_filter('mce_buttons', 'register_email_button'); } } function register_email_button($buttons) { array_push($buttons, "|", "youremail"); return $buttons; } // Загружаем плагин TinyMCE: editor_plugin.js (wp2.5) function add_email_tinymce_plugin($plugin_array) { $plugin_array['youremail'] = get_bloginfo('template_url').'/editor_plugin.js'; return $plugin_array; } function my_refresh_mce($ver) { $ver += 3; return $ver; } // Процесс инициализации управления кнопками add_filter( 'tiny_mce_version', 'my_refresh_mce'); add_action('init', 'add_email_button');
Осталось только сохранить! Теперь в WYSIWYG редакторе wordpress появится кнопка? с помощью которой любая бабушка вставит свой email в текст поста.
И да. Обратите внимание, что теперь в папке темы должна лежать иконка для вашей кнопки — email_btn.png.
Передаем пламенный привет команде сайта ruseller.com, которые его перевели
Источник урока: brettterpstra.com/adding-a-tinymce-button/
Перевел: Сергей Фастунов (из ruseller.com), адаптировал Колесников Алексей.
Урок создан: 22 Февраля 2011