Как создать плагин YouTube для встраивания для WordPress

 .youtube-container-child
{
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}

.youtube-container-child iframe, .youtube-container-child img
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Чтобы поставить скрипт в очередь, поместите следующий код в файл youtube-embed.php

 function register_youtube_embed_plugin_styles() 
{
    wp_register_style("youtube-embed-css", plugins_url("youtube-embed/youtube-embed.css"));
    wp_enqueue_style("youtube-embed-css");
}

add_action("wp_enqueue_scripts", "register_youtube_embed_plugin_styles");

Теперь наше видео должно выглядеть так:

Создание кнопки шорткода

Ввод шорткода для добавления видео является громоздким, поэтому давайте создадим кнопку текстового редактора, которая будет отображать приглашение ввести идентификатор видео и добавить шорткод в редактор сообщений.

Во-первых, чтобы добавить кнопку в текстовый редактор WordPress, нам нужно использовать Quicktags API .

Поместите этот код в файл youtube-embed.php

 function youtube_shortcode_text_editor_script() 
{
    if(wp_script_is("quicktags"))
    {
        ?>
            <script type="text/javascript">

                QTags.addButton( 
                    "youtube_shortcode", 
                    "Youtube Embed", 
                    youtube_callback
                );

                function youtube_callback()
                {
                	var id = prompt("Please enter your video id");

					if (id != null) 
					{
						QTags.insertContent(' ');
					}
                }
            </script>
        <?php
    }
}

add_action("admin_print_footer_scripts", "youtube_shortcode_text_editor_script");
 
  «);
					 }
                 }
             </ Скрипт>
         <? PHP
     }
 }

 add_action ("admin_print_footer_scripts", "youtube_shortcode_text_editor_script"); 

Здесь мы добавляем кнопку с именем youtube_shortcode Когда пользователь нажимает кнопку, запускается youtube_callback

Вот как это выглядит в текстовом редакторе:

Создание кнопки визуального редактора для добавления шорткода

Точно так же мы можем добавить кнопку в визуальный редактор. Для этого нам нужно создать плагин TinyMCE.

Поместите этот код в файл youtube-embed.php

 function enqueue_mce_plugin_scripts($plugin_array)
{
    //enqueue TinyMCE plugin script with its ID.
    $plugin_array["youtube_button_plugin"] =  plugin_dir_url(__FILE__) . "mce.js";
    return $plugin_array;
}

add_filter("mce_external_plugins", "enqueue_mce_plugin_scripts");

function register_mce_buttons_editor($buttons)
{
    //register buttons with their id.
    array_push($buttons, "youtube");
    return $buttons;
}

add_filter("mce_buttons", "register_mce_buttons_editor");

Далее нам нужно написать функциональность JavaScript, чтобы отобразить подсказку, чтобы принять идентификатор в качестве ввода и добавить наш шорткод. Для этого поместите следующий код в файл mce.js

 (function() {
    tinymce.create("tinymce.plugins.youtube_button_plugin", {

        init : function(ed, url) {

            //add new button     
            ed.addButton("youtube", {
                title : "Youtube Embed",
                cmd : "youtube_command",
                image : "https://cdn3.iconfinder.com/data/icons/free-social-icons/67/youtube_square_color-32.png"
            });

            //button functionality.
            ed.addCommand("youtube_command", function() {
                var id = prompt("Please enter your video id");
                if (id != null) 
                {
                    ed.execCommand("mceInsertContent", 0, ' ');
                }
            });
        },

        createControl : function(n, cm) {
            return null;
        },

        getInfo : function() {
            return {
                longname : "Extra Buttons",
                author : "Narayan Prusty",
                version : "1"
            };
        }
    });

    tinymce.PluginManager.add("youtube_button_plugin", tinymce.plugins.youtube_button_plugin);
})();
 
  «);
                 }
             });
         },

         createControl: function (n, cm) {
             вернуть ноль;
         },

         getInfo: function () {
             возвращение {
                 длинное имя: «Дополнительные кнопки»,
                 автор: "Нараян Прусты",
                 версия: "1"
             };
         }
     });

     tinymce.PluginManager.add ("youtube_button_plugin", tinymce.plugins.youtube_button_plugin);
 }) (); 

Теперь мы добавляем кнопку с именем youtubeyoutube_command

Вот как это выглядит:

Вывод

В этом уроке мы увидели, как создать плагин для вставки YouTube, который может вставлять видео YouTube без увеличения размера страницы, а также сделать наши видео адаптивными. Это небольшой, но очень полезный плагин.