Видели ли вы, как популярные сайты используют миниатюры видео с YouTube на главной странице своего сайта? Если вы ведете видеоканал на таких сайтах, как YouTube, Vimeo или других, то вы также можете отображать эскиз видео для всех постов, содержащих видео, на главной и архивных страницах вашего блога. В этой статье мы покажем вам, как добавить эскизы для видео с YouTube в WordPress.
Эскизы видео и эскизы постов WordPress
WordPress поставляется со встроенной функциональностью для добавления тематических изображений или миниатюр постов, и большинство тем WordPress поддерживают эту функцию. Однако если вы хотите выделить свой видеоконтент с YouTube, то вам нужно показать его с помощью эскизов видео. Эта статья поможет вам сделать это, используя стандартную функциональность миниатюр постов WordPress.
Настройка плагина Video Thumbnails в WordPress
Первое, что вам нужно сделать, это установить и активировать плагин Video Thumbnails. После активации плагина, вам нужно перейти на страницу настроек Настройки » Эскизы видео для настройки параметров плагина.
На экране настроек мы рекомендуем вам выбрать сохранение миниатюры в вашей медиатеке. Это уменьшит количество внешних http-запросов на вашем сайте, и ваши страницы будут загружаться быстрее. В разделе типов постов плагин покажет посты, страницы и пользовательские типы постов, если они есть на вашем сайте. Выберите типы постов, которые вы хотите, чтобы плагин сканировал на наличие ссылок на видео. Последняя опция на этой странице — выбор пользовательского поля. Некоторые видео плагины для WordPress сохраняют URL видео в пользовательском поле, и если вы используете такие плагины, то вам нужно ввести это пользовательское поле здесь. После этого нажмите кнопку Сохранить изменения.
На странице настроек вы также увидите пункт Провайдеры вкладка. Если вы используете Vimeo для обмена видео, то вам нужно создать приложение на Vimeo, а затем ввести ID клиента, секрет клиента, токен доступа и секретный токен доступа.
На Mass Actions Вкладка, вы можете сканировать ваши опубликованные посты на наличие видео и генерировать для них видео миниатюры. Плагин также предоставляет кнопку, чтобы очистить все видео миниатюры и удалить их как вложение из ваших постов.
Создание эскизов видео в постах WordPress
Теперь, когда вы настроили плагин, давайте создадим эскиз видео, добавив URL видео в пост WordPress. Для этого вам нужно создать или отредактировать пост WordPress и добавить URL вашего видео в область редактирования поста. После публикации поста вы увидите, что плагин сгенерировал для вас эскиз видео и добавил его в пост.
Отображение миниатюры видео в вашей теме WordPress
Плагин Video thumbnails использует функциональность WordPress Post Thumbnails. Большинство тем WordPress настроены на автоматическое отображение миниатюр постов. Это означает, что ваша тема будет автоматически отображать миниатюру видео вместе с содержимым вашего поста или отрывком. Однако если ваша тема не отображает миниатюры видео, то вам нужно отредактировать файлы темы и добавить этот код в шаблон, где вы хотите отображать миниатюры.
Как добавить кнопку воспроизведения на миниатюру видео в WordPress
Теперь, когда вы успешно захватили и отобразили миниатюры видео в ваших постах WordPress, вы можете захотеть отличить обычные миниатюры изображений от миниатюр видео. Это даст вашим пользователям знать, что в посте есть видео, и они могут нажать на кнопку воспроизведения, чтобы просмотреть видео поста. Мы покажем вам, как использовать условные теги, чтобы отличить эскизы видео от обычных эскизов поста и добавить кнопку воспроизведения.
Чтобы использовать этот метод, необходимо убедиться, что вы публикуете видеопосты в определенной категории, например, Videos. Затем внутри файлов шаблона вашей темы, например index.php, архив.php, категория.php, или content.php найдите эту строку кода:
Теперь нам нужно заменить этот код на следующий код:
Этот код добавляется после миниатюры поста только для постов, относящихся к категории видео. Следующим шагом будет загрузка файла изображения из раздела Медиа » Добавить новый экран. Это изображение будет использоваться в качестве кнопки воспроизведения. После загрузки файла изображения, обратите внимание на расположение файла изображения, нажав на кнопку Редактировать ссылка рядом с изображением.
Последним шагом будет отображение кнопки воспроизведения. Мы будем использовать CSS для отображения и расположения кнопки воспроизведения на миниатюре видео. Для этого вам нужно скопировать и вставить этот CSS-код в таблицу стилей вашей темы или дочерней темы, нажав на кнопку Внешний вид » Редактор.
.кнопка воспроизведения < background: url('http://example.com/wp-content/uploads/playbutton.png') center center no-repeat; position: absolute; top: 50%; left: 50%; width: 74px; height: 74px; margin: -35px 0 0 -35px; z-index: 10; opacity:0.6; >.playbutton:hover
Не забудьте заменить url фонового изображения на URL файла изображения кнопки воспроизведения, который вы загрузили ранее. Вот и все. На ваших видео миниатюрах теперь должна быть кнопка воспроизведения.
Мы надеемся, что эта статья помогла вам выделить ваши видео на YouTube с помощью миниатюр в WordPress. Для обратной связи и вопросов, пожалуйста, оставьте комментарий или следуйте за нами в Twitter.
Источник: www.wpbeginner.com