Добавляем кнопку на панель редактора TinyMCE в WordPress

В данном уроке мы рассмотрим, как добавить кнопку на панель редактора TinyMCE в WordPress. Кнопка будет предназначена для вставки видео с YouTube. Такое дополнение упрощает процесс добавления материалов на сайт под управлением WordPress для тех авторов, которые плохо владеют HTML.

Кнопка будет добавлять короткий код в текст, который будет форматироваться в правильную ссылку. А ссылка будет обрабатываться плагином Shadowbox и ролик будет выводиться в лайтбоксе на странице материала при показе заметки.

Кнопка Youtube в WordPress TinyMCE

Все ниже перечисленные действия действительны для WordPress версии 2.5+ !

Начнем с добавления короткого кода. Так как плагин Shadowbox нуждается только в ссылке на ролик на YouTube для работы, то короткий код должен получить id ролика и преобразовать его в корректно отформатированную ссылку, вставляя необходимую разметку для плагина Shadowbox. В файл functions.php (или custom/custom_functions.php если вы используете Thesis), добавьте следующий код:

// Добавляем обработчик короткого кода для видео 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');

Данная вставка позволит использовать короткий код вида [youtube id="xxxxx"] в ваших заметках. Он будет преобразовываться в центрированный параграф, в котором будет содержаться изображение предварительного просмотра и ссылка на видео. Если вы используете плагин Shadowbox, или любой другой плагин, который обнаруживает и обрабатывает ссылки на YouTube, то нажатие на ссылке в вашей заметке загрузит видео и запустит его в специальном элементе без перехода со страницы заметки. А если такого плагина нет, то произойдет переход на страницу ролика на сайте YouTube. Изображение предварительного просмотра вытягивается непосредственно с сайта YouTube, и его размер немного изменяется с помощью HTML. В нашем примере картинка должна быть размером 400x300 для соответствия шаблону страницы. Вы можете получить сгенерированный  на YouTube кадр, сформировав ссылку в виде: http://img.youtube.com/vi/[id_видеоролика]/0.jpg.

Теперь добавим кнопку в редактор. Вставим следующий код  в файл functions.php или custom_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');

Код сначала проверяет, что пользователь имеет права на редактирование. Затем выполняется проверка того, что редактор находится в режиме редактирования форматированного текста. После чего добавляется фильтры, которые выполняются во время загрузки редактора и когда загружаются кнопки.  А вызов функции add_action устанавливает запуск нашего кода при загрузке страницы.

Вызываемые функции  add_youtube_tinymce_plugin и register_youtube_button являются пользовательскими функциями, определяемыми ниже в том же файле:

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) к массиву кнопок. Вторая функция описывает, что кнопка будет делать. В нашем примере она выполняет внешний JavaScript файл из каталога “custom”.

Последнее, что нужно сделать, прежде чем перейти к части JavaScript - добавить немного магии для проверки версии TinyMCE. По умолчанию TinyMCE кэширует все. Поэтому, чтобы наши изменения вступили в действие, надо заставить редактор поверить в то, что изменилась версия:

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

add_filter( 'tiny_mce_version', 'my_refresh_mce');

Данный код выполняет перехват проверки версии и увеличивает текущий номер на 3. Это быстрый и грубый способ.

Теперь у нас есть все для нашего функционала, осталось только добавить необходимый для кнопки код Javascript. Вот содержимое файла editor_plugin.js:

(function() {
    tinymce.create('tinymce.plugins.BrettsYouTube', {
        init : function(ed, url) {
            ed.addButton('brettsyoutube', {
                title : 'brettsyoutube.youtube',
                image : url+'/youtube.png',
                onclick : function() {
                    idPattern = /(?:(?:[^v]+)+v.)?([^&=]{11})(?=&|$)/;
                    var vidId = prompt("Видео YouTube", "Введите 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 : "Brett's YouTube Shortcode",
                author : 'Brett Terpstra',
                authorurl : 'http://brettterpstra.com/',
                infourl : 'http://brettterpstra.com/',
                version : "1.0"
            };
        }
    });
    tinymce.PluginManager.add('brettsyoutube', tinymce.plugins.BrettsYouTube);
})();

Данная функция инициализирует плагин, добавляет массив информации о плагине, а затем добавляет плагин в существующий список плагинов TinyMCE. Строки, которые содержат brettsyoutube ссылаются на предыдущие функции. Так что при изменении имени плагина, нужно установить соответствие в коде PHP и JavaScript.

Обратите внимание, что в нашем примере плагин ссылается на файл youtube.png , который расположен в той же директории, что и плагин. Это изображение кнопки. Используется картинка размером 20 х 20 px.

Теперь у нас есть кнопка в визуальном редакторе, которая делает жизнь несколько проще при вставке видео YouTube в материалы. Подобная функция может быть очень полезна на сайте клиента, который слабо владеет вопросами веб программирования.

sourse

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: brettterpstra.com/adding-a-tinymce-button/
Перевел: Сергей Фастунов
Урок создан: 22 Февраля 2011
Просмотров: 27902
Правила перепечатки


5 последних уроков рубрики "Wordpress"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 22 Февраля 2011 19:29
    Mazanakisicq
    Классный урок! Нечего нового не узнал, но прочитал до конца. Спс автору!)
  • 23 Февраля 2011 22:42
    Underworld
    Я так понимаю можно ещё многое что-то добавить? Спасибо полезно! Многие люди которые сюдазаходят, сами не понимаю почему они такие умные с помощью Вашего сайта и лично Евгения Попова!
  • 21 Марта 2011 00:26
    paulkiri
    А для меня вот наоборот статья оказалась полезной и в то же время узнал много нового! Спасибо!
  • 16 Апреля 2011 22:02
    hamidullo
    oho mne ochin pomoglo
  • 16 Апреля 2011 22:03
    hamidullo
    скачайти видео уроки там отлично все сказано
    • 24 Мая 2011 16:37
      artkik
      А где ты уваидел эти уроки? Я бы не против посмотреть. Т.к. все прикрутил и tinyMCE перестал отображаться((
  • 24 Мая 2011 15:53
    artkik
    В яндексе что не вбьеш везде руселлер))) Молодцы, материал класный
  • 19 Сентября 2011 17:44
    djonny_f
    Такая же ситуация как и у artkikа, после ввода кода, для отображения кнопки Ютуб, исчезает панель редактирования в визуальном режиме!!! Может кто то объяснит причины??
  • 30 Января 2012 13:06
    Pacifik
    Все бы хорошо, только не понимаю смысл этого кода, если видео посмотреть прямо на моем сайте нельзя. Он в любом случае скидывает пользователя на сайт YouTube - проще просто вставить код плеера имхо...
  • 30 Января 2012 13:27
    Pacifik
    В таком виде он мне больше нравиться
    return '<iframe width="450" height="259" src="http://www.youtube.com/embed/'.$id.'" frameborder="0" allowfullscreen></iframe> <p style="text-align:center"><span>Смотреть видео на YouTube</span></a></p>';
    
  • 30 Января 2012 17:46
    Pacifik
    Shadowbox JS Plugin на WordPress.org удален, можно скачать тут http://sivel.net/2011/12/shadowbox-js-plugin-pulled-from-the-wordpress-org-repository/
  • 22 Сентября 2012 15:12
    gorizont
    Хотелось аналогичный урок для Joomla 2.5
^ Наверх ^