Рецепт создания YouTube плагина для WordPress
29 Мая 2022г. в 04:33YouTube самая популярная видео-платформа. Всем хорошо известно, что мы можем встраивать их плеер на свои веб-страницы. Однако простого копирования кода не достаточно. По умолчанию плеер не адаптивен и негативно влияет на время загрузки страницы. В этом случае мы рискуем потерять часть аудитории из-за скорости загрузки страниц.
В этом уроке мы расскажем как создать простой Wordpress плагин для вставки YouTube плеера с собственным набором настроек, которые не будут нагружать страницы.
Стандартное встраивание WordPress
По умолчанию в WordPress существует специальный функционал для вставки видео с YouTube.
К примеру:
Check out this video:
http://www.youtube.com/watch?v=dQw4w9WgXcQ
..URL будет преобразован в:
Check out this video:
<iframe width="560" height="315" src="http://www.youtube.com/watch?v=dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
Однако WordPress вставляет плеер как он есть, без возможности контролировать адаптивность, динамическую подкачку видео и так далее. Чуть поработав, мы можем это исправить.
Как YouTube вставка увеличивает размер страницы?
YouTube позволяет вставлять свой плеер при помощи тега iframe. В этом случае будет закачано примерно ~1MB информации при загрузке страницы. После клика по кнопке плей догрузится ещё ~500KB!
На данном изображении перечислены все ресурсы, которые будут загружены для воспроизведения одного видео:
Всё это негативно сказывается на время загрузки ваших страниц.
Адаптивность видео
По умолчанию, вставляемый YouTube плеер не адаптивен. Ширина составляет 560px; высота 315px. Если же у вас на сайте предусмотрена адаптивность под различные устройства, то контейнер размером 560px слишком избыточен.
Приступаем к созданию плагина!
Давайте создадим плагин, который будет предусматривать все эти нюансы. Перед написанием кода создайте каталог для плагина. Вот так будет выглядеть его структура:
--youtube-embed
-youtube-embed.php
-mce.js
-youtube-embed.js
-youtube-embed.css
Для начала поместите следующий код в youtube-embed.php:
1
<?php
2
/**
3
* Plugin Name: SitePoint YouTube Embed
4
* Plugin URI: http://sitepoint.com/
5
* Description: An plugin to embed YouTube videos responsively.
6
* Version: 1.0
7
* Author: Narayan Prusty
8
*/
Создание шорткода
Давайте создадим шорткод под названием youtube, который будет принимать ID видео с YouTube и генерировать HTML код для отображения плеера на странице.
Далее следует код создания шорткода. Поместите следующий листинг в файл youtube-embed.php:
1
function youtube_embed_callback($atts=null, $content=null)
2
{
3
extract($atts);
4
5
return "<div class='youtube-container-parent'><div class='youtube-container-child'><div class='youtube-video' data-id='". $id ."'></div></div></div>";
6
}
7
8
add_shortcode("youtube", "youtube_embed_callback");
Далее вот так мы сможем использовать его на странице:
Если вы сейчас попробуете поставить шорткод на страницу, то ничего не увидите потому что вместо возврата iframe, мы возвращаем простой div с ID видео. Мы динамически буем подставлять код после того как пользователь нажмёт на кнопку проигрывания видео, что позволит выиграть в времени загрузки страницы.
Динамическая загрузка видео с YouTube
Мы будет осуществлять рендеринг видео только в случае если пользователь кликнет по видео. На данный момент у нас нет никаких графических элементов, которые бы показывали пользователю что на странице есть видео. Для этого напишем небольшой код вставки миниатюры видео при загрузке страницы и прикрепить к нему прослушку клика.
Поместите следующий код в файл youtube-embed.js:
1
window.addEventListener("load", function(){
2
var v = document.getElementsByClassName("youtube-video");
3
for (var n = 0; n < v.length; n++) {
4
var p = document.createElement("div");
5
p.innerHTML = '<img class="youtube-thumb" src="//i.ytimg.com/vi/' + v[n].dataset.id + '/hqdefault.jpg"><div class="play-button"></div>';
6
p.onclick = youtube_video_clicked;
7
v[n].appendChild(p);
8
}
9
}, false);
Мы находим все DOM элементы с классом youtube-video и передаём значение атрибуту data-id. Затем добавляем тег img во внутренний тег div для вставки миниатюры.
Для подключения скрипта добавьте следующий код в файл youtube-embed.php:
1
function register_youtube_embed_plugin_scripts()
2
{
3
wp_register_script("youtube-embed-js", plugins_url("youtube-embed/youtube-embed.js"));
4
wp_enqueue_script("youtube-embed-js");
5
}
6
7
add_action("wp_enqueue_scripts", "register_youtube_embed_plugin_scripts");
Теперь наш шорткод преобразуется в что-то подобное:
Следующим шагом будет подгрузка iframe, если пользователь кликнет по миниатюре. Для этого поместите следующий код в youtube-embed.js:
1
function youtube_video_clicked() {
2
var iframe = document.createElement("iframe");
3
iframe.setAttribute("src", "//www.youtube.com/embed/" + this.parentNode.dataset.id + "?autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&controls=0&showinfo=0");
4
iframe.setAttribute("frameborder", "0");
5
iframe.setAttribute("id", "youtube-iframe");
6
this.parentNode.replaceChild(iframe, this);
7
}
При клике по миниатюре будет загружен тег iframe с настройкой авто-воспроизведения со значением true. Теперь при клике по изображению мы увидим видео.
Делаем видео адаптивным
Для обеспечения адаптивности добавьте следующий CSS в файл youtube-embed.css:
01
.youtube-container-child
02
{
03
position: relative;
04
padding-bottom: 56.25%; /* 16:9 */
05
padding-top: 25px;
06
height: 0;
07
}
08
09
.youtube-container-child iframe, .youtube-container-child img
10
{
11
position: absolute;
12
top: 0;
13
left: 0;
14
width: 100%;
15
height: 100%;
16
}
Для подключения таблицы стилей добавьте следующий код в файл youtube-embed.php:
1
function register_youtube_embed_plugin_styles()
2
{
3
wp_register_style("youtube-embed-css", plugins_url("youtube-embed/youtube-embed.css"));
4
wp_enqueue_style("youtube-embed-css");
5
}
6
7
add_action("wp_enqueue_scripts", "register_youtube_embed_plugin_styles");
Теперь наш видео будет похоже на это:
Создание кнопки вставки шорткода
Теперь давайте создадим кнопку для текстового редактора, при клике на которую в текстовом поле появится наш шорткод.
Для добавления кнопки в редактор WordPress воспользуемся Quicktags API.
Поместите следующий код в файл youtube-embed.php:
01
function youtube_shortcode_text_editor_script()
02
{
03
if(wp_script_is("quicktags"))
04
{
05
?>
06
<script type="text/javascript">
07
08
QTags.addButton(
09
"youtube_shortcode",
10
"Youtube Embed",
11
youtube_callback
12
);
13
14
function youtube_callback()
15
{
16
var id = prompt("Please enter your video id");
17
18
if (id != null)
19
{
20
QTags.insertContent('<div class="flex-video widescreen"><iframe width="425" height="344" src="http://www.youtube.com/embed/id="'+id+'"][/youtube?wmode=transparent" frameborder="0" allowfullscreen=""> </iframe></div>');
21
}
22
}
23
</script>
24
<?php
25
}
26
}
27
28
add_action("admin_print_footer_scripts", "youtube_shortcode_text_editor_script");
Таким образом мы создали кнопку youtube_shortcode. При клике сработает, youtube_callback и будет вставлен шорткод.
Вот как это будет выглядеть:
Создание кнопки для визуального редактора
Таким же образом мы можем создать кнопку для визуального редактора. К примеру TinyMCE.
Добавьте код в файл youtube-embed.php для регистрации TinyMCE плагина:
01
function enqueue_mce_plugin_scripts($plugin_array)
02
{
03
//enqueue TinyMCE plugin script with its ID.
04
$plugin_array["youtube_button_plugin"] = plugin_dir_url(__FILE__) . "mce.js";
05
return $plugin_array;
06
}
07
08
add_filter("mce_external_plugins", "enqueue_mce_plugin_scripts");
09
10
function register_mce_buttons_editor($buttons)
11
{
12
//register buttons with their id.
13
array_push($buttons, "youtube");
14
return $buttons;
15
}
16
17
add_filter("mce_buttons", "register_mce_buttons_editor");
Далее нам нужно написать JavaScript функционал для отображения окошка в которое мы будем вставлять ID видео. Для этого вставьте код в файл mce.js:
01
(function() {
02
tinymce.create("tinymce.plugins.youtube_button_plugin", {
03
04
init : function(ed, url) {
05
06
//add new button
07
ed.addButton("youtube", {
08
title : "Youtube Embed",
09
cmd : "youtube_command",
10
image : "https://cdn3.iconfinder.com/data/icons/free-social-icons/67/youtube_square_color-32.png"
11
});
12
13
//button functionality.
14
ed.addCommand("youtube_command", function() {
15
var id = prompt("Please enter your video id");
16
if (id != null)
17
{
18
ed.execCommand("mceInsertContent", 0, '<div class="flex-video widescreen"><iframe width="425" height="344" src="http://www.youtube.com/embed/id="'+id+'"][/youtube?wmode=transparent" frameborder="0" allowfullscreen=""> </iframe></div>');
19
}
20
});
21
},
22
23
createControl : function(n, cm) {
24
return null;
25
},
26
27
getInfo : function() {
28
return {
29
longname : "Extra Buttons",
30
author : "Narayan Prusty",
31
version : "1"
32
};
33
}
34
});
35
36
tinymce.PluginManager.add("youtube_button_plugin", tinymce.plugins.youtube_button_plugin);
37
})();
Теперь при клике на кнопку youtube будет вызван колбэк youtube_command.
Вот как это выглядит:
Итог
В этом уроке мы рассмотрели процесс создания Wordpress плагина для вставки видео с YouTube. Данный плагин небольшой, однако очень полезный за счёт уменьшения времени загрузки страницы.
