Добавление своей кнопки в WYSIWYG-редактор wordpress

Один из клиентов попросил упростить вставку 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