Добавляем кнопку YouTube в панель редактирования записи Сейчас очень популярно после каждой статьи выкладывать разного рода полезности. Будь это жирные ссылки, интересные факты и даже видео. Первое мы можем организовать с помощью плагина, добавление интересных фактов не вызовет трудностей, так как это можно просто вставить в статью, отступив несколько строчек от конца статьи, а вот с добавлением видео, могут возникнуть небольшие проблемы, добавление специального кода. Сегодня я расскажу как автоматизировать вставку кода в статью – вставим кнопку для добавления видео Youtube в редакторе материалов.
Первое о чем нужно сказать – плагин
Внимание! У вас нет прав для просмотра скрытого текста.
При добавлении кода нашей кнопкой, он будет форматироваться в ссылку. Обработчиком ссылки и будет наш плагин. Сильно в подробности вдаваться не буду, кратко объясню. Открываем файл темы 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. Ну вот и все, теперь с нашей новой кнопкой без проблем можно вставить видео.
Комментарии к статьеЕсли Вам понравилась эта статья или не понравилась напишите об этом в комментариях
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации. |
