Плагин WordPress для RuTube и VK: 3 часа возни с ChartGPT

Если бы мне пару лет назад сказали, что я, не умея программировать, заставлю ChartGPT написать плагин для RuTube и VKontakte, я бы, наверное, рассмеялся. Но жизнь полна сюрпризов, особенно когда YouTube вдруг стал врагом №1 Роскомнадзора. А клиенты требуют работу с RuTube и VKontakte (причем, максимально просто и удобно). Как человек любопытный и слегка ленивый (кто любит вручную вставлять коды видео?), я решил создать плагин для WordPress, который облегчит жизнь мне и, возможно, кому-то ещё.

В качестве основы я взял сниппеты отсюда: https://blog.web5x.ru/kak-vstavit-video-rutube-na-sajt-wordpress/. Но мне хотелось полноценный плагин, а потом появились всякие улучшения и доработки.

Активно использовал GPT WordPress Plugin AI, который умеет работать с .zip архивами и создавать полноценные плагины из нескольких файлов. В процессе работы произошёл затык с полосами прокрутки при добавлении RuTube, пришлось переключаться на o1-preview.

YouTube был с нами долгие годы, но доступ к нему стал ограниченным, и многие перешли на RuTube и VKontakte. Однако WordPress не поддерживает автоматическое встраивание видео с этих сайтов, и каждый раз приходилось вручную редактировать код.

Так появилась идея создать плагин, чтобы вставлять ссылки на RuTube и VK прямо в редактор WordPress, превращая их в встроенные видео. Видео теперь той же ширины, что и YouTube, и можно размещать их в нескольких колонках. Плагин даже обрабатывает сложные ссылки VK!

Сразу поделюсь кодом плагина. Если вы любите делать всё сами, вот вам полный набор: (Все это в папке: custom-oembed-support)

Файл custom-oembed-support.php

<?php /* Plugin Name: Custom oEmbed Support for RuTube and VKontakte Description: Добавляет поддержку oEmbed для видео RuTube и VKontakte в WordPress. Version: 1.22 Author: Ваше Имя */ if ( ! defined( 'ABSPATH' ) ) exit; // Защита от прямого доступа // Обработчик RuTube с оберткой div wp_embed_register_handler('rutube', '#https?://(www\.)?rutube\.ru/(play|video)/(.*?)$#i', 'wp_embed_handler_rutube'); function wp_embed_handler_rutube( $matches, $attr, $url, $rawattr ) { $embed = sprintf( '<div class="rutube-embed-wrapper"><iframe width="650" height="365" src="https://rutube.ru/%2$s/embed/%3$s" frameborder="0" allowfullscreen></iframe></div>', esc_attr( $matches[1] ), esc_attr( $matches[2] ), esc_attr( $matches[3] ) ); return $embed; } // Обработчик VKontakte с оберткой div wp_embed_register_handler('vkontakte', '#https?://vk\.com/(video(-?\d+)_(\d+)|video\?z=video(-?\d+)_(\d+)(%2F|/)[^\s]+)#i', 'wp_embed_handler_vkontakte'); function wp_embed_handler_vkontakte( $matches, $attr, $url, $rawattr ) { // Проверяем, какая группа сработала if ( ! empty( $matches[2] ) && ! empty( $matches[3] ) ) { // Обработка прямой ссылки: https://vk.com/video-9410453_456239694 $owner_id = $matches[2]; $video_id = $matches[3]; } elseif ( ! empty( $matches[4] ) && ! empty( $matches[5] ) ) { // Обработка ссылки из адресной строки: https://vk.com/video?z=video-9410453_456239694%2Fpl_cat_trends $owner_id = $matches[4]; $video_id = $matches[5]; } else { return ''; // Если не удалось извлечь ID, возвращаем пустую строку } $embed = sprintf( '<div class="vkontakte-embed-wrapper"><iframe width="650" height="365" src="https://vk.com/video_ext.php?oid=%1$s&id=%2$s&hd=2" frameborder="0" allowfullscreen></iframe></div>', esc_attr( $owner_id ), esc_attr( $video_id ) ); return $embed; } // Подключение стилей для видео на фронтенде function custom_oembed_enqueue_video_styles() { wp_enqueue_style( 'custom-video-styles', plugin_dir_url( __FILE__ ) . 'video-styles.css', array(), '1.3' ); } add_action( 'wp_enqueue_scripts', 'custom_oembed_enqueue_video_styles' ); // Подключение стилей для редактора Гутенберг function custom_oembed_enqueue_block_editor_assets() { wp_enqueue_style( 'custom-oembed-editor-style', plugin_dir_url( __FILE__ ) . 'editor-style.css', array(), '1.3' ); } add_action( 'enqueue_block_editor_assets', 'custom_oembed_enqueue_block_editor_assets' );

Файл video-styles.css

/* Стили для RuTube и VKontakte видео */ /* Общие стили для видео контейнеров */ .rutube-embed-wrapper, .vkontakte-embed-wrapper { position: relative; width: 100%; padding-top: 56.25%; /* Соотношение сторон 16:9 */ overflow: hidden; margin: 0 auto; } /* Стили для iframe внутри контейнера */ .rutube-embed-wrapper iframe, .vkontakte-embed-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

Файл editor-style.css

/* Стили для RuTube и VKontakte видео в редакторе Гутенберг */ /* Общие стили для видео контейнеров в редакторе */ .editor-styles-wrapper .rutube-embed-wrapper, .editor-styles-wrapper .vkontakte-embed-wrapper { position: relative; width: 100%; padding-top: 56.25%; /* Соотношение сторон 16:9 */ overflow: hidden; margin: 0 auto; } /* Стили для iframe внутри контейнера в редакторе */ .editor-styles-wrapper .rutube-embed-wrapper iframe, .editor-styles-wrapper .vkontakte-embed-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

Поддержка любых ссылок для VKontakte: Раньше нужно было вручную чистить ссылки VK. Теперь плагин сам определяет тип ссылки и вытаскивает нужные идентификаторы. Можно копировать ссылку, как есть!
Единая ширина видео: Ширина видео теперь совпадает с YouTube, раньше она была разной.
Размещение видео в нескольких колонках: Видео автоматически подстраиваются по размерам. Не всегда работает в редакторе и альтернативных колонках от других плагинов, но уже лучше.
Поддержка поля видео плагина ACF: Бонус для пользователей Advanced Custom Fields (ACF) — плагин поддерживает поле видео ACF, что позволяет добавлять видео RuTube и VK через пользовательские поля, и они корректно отображаются на сайте. Просто вставьте ссылку, и плагин сделает всё остальное.

На гугл диске расшаренная папка в ней файл, может появятся новые версии:)

⚙ Создание этого плагина оказалось долгим и муторным процессом, но слава 🤖 ChartGPT! Теперь, когда всё работает, надеюсь, что этот плагин поможет вам так же, как он помог мне 😊.

Плагин WordPress для RuTube и VK: 3 часа возни с ChartGPT

Почему это важно?

Код плагина

Что улучшено?

Ссылка на плагин: