
Если вы бы хотели сделать быструю и легкую вставку видео с YouTube на сайт вордпресс, то эта статья для вас.
Что вам даст этот способ добавления видео с YouTube:
Так как YouTube, по умолчанию генерирует код для вставки видео, с тегом
Примечание: Если вы делаете сайт для клиента, то я рекомендую вам создать плагин в место того чтобы вставлять весь код в functions.php вашей темы. Т.к. клиент может сменить тему и код вставленный в functions.php, не будет больше работать.
Создание плагина
Создадим новый php файл и назовем его shortcode-youtube.php, но вы можете назвать его как вам угодно.
Вставляем в созданный нами файл shortcode-youtube.php, следующий код:
1 2 3 4 5 6 7 8 9 10 11 |
<?php /* Plugin Name: shortcode youtube Plugin URI: site.ru Description: Используйте шорткод для вставки видео [responsive-video identifier="O56p5nOYNHo"]. Version: 1.0 Author: Rachel McCollin Author URI: authorsite.ru License: 1234 */ ?> |
Это настройки плагина — они говорят wordpress название и версию плагина.
Добавляем короткую функцию
Вставьте код ниже в ваш файл:
1 2 3 4 5 6 7 8 9 10 |
<?php function wptuts_responsive_video_shortcode( $atts ) { extract( shortcode_atts( array ( 'identifier' => '' ), $atts ) ); return '<div class="wptuts-video-container"><iframe src="//www.youtube.com/embed/' . $identifier . '" height="240" width="320" allowfullscreen="" frameborder="0"></iframe></div> <!--.wptuts-video-container-->'; } add_shortcode ('responsive-video', 'wptuts_responsive_video_shortcode' ); ?> |
Эта функция создаст и подключит короткий код к шорткоду.
Давайте посмотрим, что выдает эта функция:
Тег div и класс wptuts-video-container, который будет использоваться для добавления css, чтобы видео подстраивалось под разрешение экрана пользователя.
заключенный в тег div.
Ссылка на видео с youtube и индефикатор видео.
Атрибут $identifier, который пользователь укажет при добавлении шорткода на страницу.
Добавление css, чтобы видео подстраивалась под разрешение
Следующим шагом будет добавление стиля, который сделает содержание тега div подстраиваемым под разрешение экрана. Создайте новый css документ и назовите его style.css. И добавьте в него следующее:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.wptuts-video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .wptuts-video-container iframe { position: absolute; top:0; left: 0; width: 100%; height: 100%; } |
Регистрируем css стиль в плагине
Последним шагом является регистрирование стилей внутри плагина.
Откройте файл плагина «shortcode-youtube.php» и добавьте следующую функцию:
1 2 3 4 5 6 7 |
<?php function wptuts_responsive_video_add_stylesheet() { wp_register_style( 'wptuts_responsive_video_style', plugins_url( 'style.css', __FILE__ ) ); wp_enqueue_style( 'wptuts_responsive_video_style' ); } add_action( 'wp_enqueue_scripts', 'wptuts_responsive_video_add_stylesheet' ); ?> |
Использование шорткода
Теперь сохраните оба ваших файла в папке с названием вашего плагина. Сохраните и загрузите в папку плагинов wordpress. Активируйте плагин в админке wordpress.
Вот пример использования шорткода [responsive-video identifier=»xKRXaevlCt4″]:
Не забудьте проверить, как отображается видео с разными размерами экранов, так же, не забудьте проверить это с мобильного телефона.