Сейчас очень популярно после каждой статьи выкладывать разного рода полезности. Будь это жирные ссылки, интересные факты и даже видео. Первое мы можем организовать с помощью плагина, добавление интересных фактов не вызовет трудностей, так как это можно просто вставить в статью, отступив несколько строчек от  конца статьи, а вот с добавлением видео, могут возникнуть небольшие проблемы, добавление специального кода. Сегодня я расскажу как автоматизировать вставку кода в статью – вставим кнопку для добавления видео Youtube в редакторе материалов.

Первое о чем нужно сказать — плагин Shadowbox. При добавлении кода нашей кнопкой, он будет форматироваться в ссылку. Обработчиком ссылки и будет наш плагин.
Сильно в подробности вдаваться не буду, кратко объясню.
Открываем файл темы functions.php и добавляем код :

// Добавляем обработчик короткого кода для видео YouTube
	function addYouTube($atts, $content = null) {
	        extract(shortcode_atts(array( "id" => '' ), $atts));
	        return '<p style="text-align:center"> \
	        <a href="http://www.youtube.com/v/'.$id.'"> \

	        <img src="http://img.youtube.com/vi/'.$id.'/0.jpg" width="400" height="300" class="aligncenter" /> \
        <span>Смотреть видео</span></a></p>';
}
add_shortcode('youtube', 'addYouTube');

Он позволяет на страницах использовать код: [yuotube id=”123”], так же будет появляться картинка предварительно просмотра размером 400×300 выровненная по центру и ссылка на видео. А плагин Shadowbox загрузит видео прямо на странице, не переходя на сайт YouTube.
Следующим этапом будет добавление кнопки в панель редактирования.
В том же файле functions.php вставляем код (в самом низу перед тегом ?>) :

 function add_youtube_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_youtube_tinymce_plugin');
	     add_filter('mce_buttons', 'register_youtube_button');
   }
	}
add_action('init', 'add_youtube_button');

Данный код проверяет имеет пользователь право на редактирование, после идет проверка находится ли редактор в режиме редактирования. Далее идут фильтры загрузки кнопок.
Следующий код, который нужно добавить в functions.php:

function register_youtube_button($buttons) {
	   array_push($buttons, "|", "brettsyoutube");
	   return $buttons;
	}
function add_youtube_tinymce_plugin($plugin_array) {
	   $plugin_array['brettsyoutube'] = get_bloginfo('template_url').'/custom/editor_plugin.js';
	   return $plugin_array;
	}

Первая функция говорит, что сначала идут кнопки, потом разделитель и наша новая кнопка brettsyoutube. Следующая функция говорит о том что будет выполнять наша кнопка. А в нашем случае выполнять она будет функции из файла editor_plugin.js, который находится в папке custom.
Следующий код:

function my_refresh_mce($ver) {
	  $ver += 3;
	  return $ver;
	}

	add_filter( 'tiny_mce_version', 'my_refresh_mce');

выполняет роль перехватчика версии редактора и прибавляет к номеру версии 3.
Остается последний шаг. Нужно создать js файл, который и будет отвечать за функционал и оформление кнопки.
В Dremweaver или вашем редакторе создаете новый js файл и добавляете в него следующее:

 (function() {
	tinymce.create('tinymce.plugins.YourYouTube', {
		init : function(ed, url) {
			ed.addButton('youryoutube', {
				title : 'youryoutube.youtube',
				image : url+'/youtube.png',
				onclick : function() {
					idPattern = /(?:(?:[^v]+)+v.)?([^&=]{11})(?=&|$)/;
					var vidId = prompt("YouTube Video", "Введите id или адрес url вашего видео");
					var m = idPattern.exec(vidId);
					if (m != null && m != 'undefined')
						ed.execCommand('mceInsertContent', false, '[youtube id="'+m[1]+'"]');
				}
			});
		},
		createControl : function(n, cm) {
			return null;
		},
		getInfo : function() {
			return {
				longname : "YouTube Shortcode",
				author : 'Brett Terpstra',
				authorurl : 'http://brettterpstra.com/',
				infourl : 'http://brettterpstra.com/',
				version : "1.0"
			};
		}
	});
	tinymce.PluginManager.add('youryoutube', tinymce.plugins.YourYouTube);
})();

сохраняете, назвав именем editor_plugin.js. Заметьте что картинка image : url+’/youtube.png’, должна располагаться там же, где и файл editor_plugin.js.
Ну вот и все, теперь с нашей новой кнопкой без проблем можно вставить видео.
Урок взят с сайта: ruseller.com

Похожие записи:

1. Добавляем кнопку retweet на блог