Как создать галерею видео в WordPress

0 1

Пошаговое руководство как создать галерею видео в WordPress

Привет, друзья!

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

Как создать галерею видео в WordPress

Когда и зачем создавать галерею видео в WordPress

WordPress позволяет легко вставлять видео в сообщения на сайте, просто вставляя URL-адреса видео. Он также может отображать размещенные вами видео на вашем собственном веб-сайте.

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

Ко мне часто поступают вопросы про хостинг, которым я пользуюсь и поэтому решил указать хостинг в статье https://sprinthost.ru. Вы можете попробовать попользоваться хостингом 30 дней бесплатно. Чтобы понять, как будет работать Ваш сайт на этом хостинге просто перенести свой сайт (в этом поможет поддержка хостинга бесплатно) и и таким образом сможете понять подходит хостинг Вам или нет. На этом хостинге находятся сайты с 20 000 тысяч посещаемость и сайты чувствуют себя отлично. Рекомендую! Да, если делать оплату на 1 год то получаете скидку 25%. И что мне нравится — тех. поддержка всегда помогает в технических вопросах, за что им спасибо. Как Вы понимаете не всегда проходит всё гладко и нет желания, чтобы сайт не был доступен тем самым страдал трафик и доход.

Вы можете легко добавить одно видео в свою статью, но что, если вы хотите показать несколько видео?

Один из способов сделать это — добавить одно видео за другим. Хотя это и работает, но создает неприятный пользовательский интерфейс, потому что нужно много прокручивать страницу.

Было бы лучше, если вы могли создать видео-галерею с эскизами, как в фотогалерее? Это позволит вам показывать больше видео в меньшем пространстве, используя красивую мобильную сетку.

Давайте посмотрим, как легко создать видео-галерею в WordPress.

Способ 1. Создание видео галереи с помощью Envira Gallery

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

Envira Gallery — платный плагин, и вам потребуется купить тариф Pro, чтобы получить доступ к аддону видео.

Первое, что вам нужно сделать, это установить и активировать плагин Envira Gallery.

После активации вам нужно посетить страницу настроек Envira Gallery — Settings, чтобы добавить лицензионный ключ. Вы можете найти эту информацию в своей учетной записи на веб-сайте Envira Gallery.

Как создать галерею видео в WordPress

Затем вам нужно перейти на страницу Envira Gallery — Addons. Вы увидите все доступные вам аддоны. Найдите аддон Видео и установите его.

Как создать галерею видео в WordPress

Envira Gallery загрузит и установит аддон видео. После этого вам нужно нажать «Активировать», чтобы начать использовать его на своем веб-сайте.

Как создать галерею видео в WordPress

Теперь вы готовы создать свою первую видеогалерею.

Идем Envira Gallery — Add New (Добавить новый), чтобы создать свою галерею. Во-первых, вам нужно написать заголовок для вашей галереи.

Как создать галерею видео в WordPress

Envira Gallery может создать видео-галерею ваших видеороликов, а также видеороликов, размещенные на YouTube, Vimeo и Wistia. Я рекомендую использовать сторонние услуги хостинга для лучшего удобства пользователей.

Во-первых, вам нужно будет загрузить свои видео на YouTube или Vimeo. После этого нажмите «Select videos from other sources» (Выбрать видео из других источников), чтобы продолжить.

Это вызовет всплывающее окно «Вставка мультимедиа«, где вам нужно щелкнуть ссылку «Insert videos» (Вставить видео) в левом столбце.

Как создать галерею видео в WordPress

Вам нужно нажать кнопку «Add Video» (Добавить видео), чтобы ввести заголовок и URL-адрес видео.

Чтобы добавить больше видео, нажмите кнопку «Add Video» еще раз. Не стесняйтесь добавлять столько видео, сколько вам нужно.

После того, как вы добавили все видео, которые хотите показать в галерее, нажмите кнопку «Insert into Gallery» (Вставить в галерею), чтобы продолжить.

Теперь Envira выберет миниатюры для ваших видео и покажет их в разделе изображений.

Вы можете редактировать видео в любое время, нажав на значок «карандаша» или удалить любое видео. Вы также можете добавить больше видео, если это необходимо.

Ваша видеогалерея почти готова. Давайте теперь настроим конфигурацию галереи.

Нажав вкладку «Config» (Конфигурация) в левом столбце, а в разделе «Number of Gallery Columns» (Количество столбцов галереи) выберите два или три расположения столбцов.

Это гарантирует, что ваши миниатюры видео будут выглядят хорошо с достаточным пространством между каждым видео.

Как создать галерею видео в WordPress

Теперь давайте добавим кнопку воспроизведения для ваших миниатюр видео.

Перейдите на вкладку «Videos» (Видео) и установите флажок «Display play icon over gallery image» (Отображать значок воспроизведения по галерее)

.

Как создать галерею видео в WordPress

Теперь ваша видео галерея готова. Идем дальше и нажимаем кнопку публикации, чтобы сделать вашу видеогалерею доступной в WordPress.

Показать видео-галерею на своем сайте

Envira Gallery позволяет легко отображать ваши видео-галереи в любом посте или страницах WordPress. Вы также можете отобразить галерею на боковой панели (в сайдбаре).

Давайте создадим новую страницу в WordPress и присвоим ей соответствующий заголовок, например: «Видео».

Затем нажмите кнопку «Add Gallery» (Добавить галерею) вверху редактора сообщений.

Как создать галерею видео в WordPress

Это вызовет всплывающее окно, в котором вы увидите свою видеогалерею. Нажмите, чтобы выбрать его, а затем нажмите кнопку «Insert» (Вставить).

Как создать галерею видео в WordPress

Шорткод Envira Gallery появится в текстовом редакторе.

Теперь, вы можете обновить или опубликовать свою страницу и перейти на нее, чтобы увидеть свою видеогалерею в действии.

Как создать галерею видео в WordPress

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

Они смогут просматривать видео, не выходя из вашего сайта, а также просматривать другие видео в галерее, нажав на миниатюры под плеером.

Как создать галерею видео в WordPress

Способ 2. Создание галереи видео в WordPress с помощью YouTube Channel Gallery

Для этого метода требуется ключ API YouTube, что делает процесс более длинным. Но не волнуйтесь, я проведу вас через это.

Первое, что вам нужно сделать, это установить и активировать плагин YouTube Channel Gallery.

Затем вам нужно перейти на сайт Google Developer Console, чтобы создать ключ API YouTube.

Нажмите кнопку «Select a project» (Выбрать проект) в верхнем левом углу экрана, а затем нажмите кнопку «Добавить».

Как создать галерею видео в WordPress

На следующем экране вам нужно указать имя для своего проекта и согласиться с условиями договора. После этого нажмите кнопку «Create» (Создать), чтобы продолжить.

Как создать галерею видео в WordPress

Затем вам нужно щелкнуть по «API Library» (Библиотеке API), а затем выбрать ссылку «YouTube Data API » (API данных YouTube).

Как создать галерею видео в WordPress

Это приведет вас к странице сведений о API, где вам нужно щелкнуть ссылку «Enable» (Включить), чтобы включить этот API для своего проекта.

Как создать галерею видео в WordPress

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

Нажмите кнопку «Create credentials» (Создать учетные данные), чтобы продолжить.

Как создать галерею видео в WordPress

Теперь вам нужно ввести способ использования ключа API. На вопрос «Where will you be calling the API from?» (Где вы будете вызывать API?) выберите «Web browser (JavaScript)» (Веб-браузер (JavaScript)) и выберите вариант «Public Data» (Публичные данные) в разделе «What data will you be accessing?» (Какие данные вы будете получать?).

Как создать галерею видео в WordPress

Нажмите кнопку «What credentials do I need» (Какие учетные данные мне нужны), чтобы продолжить.

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

Остается еще один последний шаг, который должен ограничивать ваш ключ API, который будет использоваться только на вашем веб-сайте. Для этого нажмите ссылку «Restrict key» (Ограничить ключ), показанный на экране ключа API.

Как создать галерею видео в WordPress

На странице ограничений выберите опцию HTTP Referrers и введите свое доменное имя, как написано ниже в следующем формате:

*.yourdomain.com

Как создать галерею видео в WordPress

Не забудьте нажать кнопку «Сохранить», чтобы применить изменения.

Теперь, когда у вас есть ключ API данных YouTube, пришло время создать свою галерею видео.

Плагин YouTube Channel Gallery создает мощный шорткод, который вы можете добавить к своим сообщениям и страницам, чтобы отобразить свою видео-галерею.

Просто создайте новую страницу или отредактируйте существующую и добавьте следующий шорткод в редактор сообщений.

[Youtube_Channel_Gallery user=»zacompom» maxitems=»8″ thumb_columns_phones=»2″ thumb_columns_tablets=»4″ key=»ваш-youtube-api-ключ-вставить-сюда»]

Не забудьте заменить пользователя своим именем пользователя YouTube и своим ключом API YouTube, который вы создали ранее.

Теперь вы можете сохранить свой пост/страницу и посмотреть свою видео-галерею в действии.

Как создать галерею видео в WordPress

В плагине нет всплывающего окна, и ваши видео будут воспроизводиться на странице. При нажатии на миниатюру видео в галерее будет воспроизводиться видео в верхнем проигрывателе.

Это все на данный момент.

Я надеюсь, что эта статья поможет вам научиться легко создавать видео-галереи в WordPress.

На этом буду с вами прощаться. Не забывайте подписываться на обновления блога.

До скорых встреч!

Источник

Оставьте ответ

Ваш электронный адрес не будет опубликован.