Как добавить видео HTML5 в WordPress с помощью настраиваемых полей

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

Недавно я столкнулся с проблемой настройки видео HTML5 на странице WordPress. Он находится в статичном месте и время от времени требует замены. Хотя можно использовать шорткод для видео, в данном случае я хотел упростить задачу для людей, которые будут обновлять страницу. Я не хотел, чтобы им приходилось узнавать, что такое шорткод или как его использовать.

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

Требования к проекту

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

• Способ создания настраиваемых полей. Бесплатная версия Advanced Custom Fields (ACF) отлично справится с этой задачей. Установите и активируйте его на своем сайте WordPress.
• Видео — в идеале в нескольких форматах. Хотя файлы MP4 теперь поддерживаются во всех основных браузерах, было бы неплохо предоставить версию WEBM для дополнительного охвата. И, пока вы это делаете, запасной вариант FLV для тех, кто использует действительно старые браузеры, не повредит. Вы должны убедиться, что каждая версия вашего видео имеет одинаковое разрешение.
• Изображение «плакат». Либо снимок экрана, либо пользовательская графика, созданная с самым высоким разрешением, в котором будет воспроизводиться ваше видео.

Шаг 1: Создайте настраиваемые поля

После того, как вы установили и активировали бесплатную версию ACF, перейдите в меню «Пользовательские поля» в WordPress и нажмите «Добавить новый».

Внутри вашего нового набора полей (наши называются «Поля видео») вам нужно будет создать поле «Файл ACF» для каждого видеоформата, который вы планируете загружать, а также еще одно поле для изображения постера. В нашей настройке у нас есть поля для MP4, WEBM, FLV и плаката. Для каждого поля файла обязательно выберите переключатель в поле «Возвращаемое значение» с надписью «URL-адрес файла». Кроме того, обязательно запишите имена полей — они понадобятся нам позже.

Затем в настройке «Местоположение» ACF назначьте новые поля любой странице или публикации, которые вы хотите, и сохраните свою работу. Когда вы перейдете к редактированию этой назначенной страницы, вы должны увидеть поля (возможно, вам придется немного прокрутить вниз, чтобы найти их).

Шаг 2: Загрузите видеофайлы

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

Шаг 3: отредактируйте шаблон

Теперь начинается самое интересное — добавление магии PHP в шаблон вашей темы. Если вы не знакомы с иерархией шаблонов WordPress, сейчас самое время изучить ее.

Найдите правильный файл шаблона и место, где вы хотите разместить видео. Затем скопируйте и вставьте следующий фрагмент кода и настройте его в соответствии с вашими потребностями:

 <?php
// Получить поля видео
$video_mp4 = get_field('mp4_video'); // Имя поля MP4
$video_webm = get_field('webm_video'); // Имя поля WEBM
$video_flv = get_field('flv_video'); // Имя FLV-поля
$video_poster = get_field('poster_image'); // Имя поля изображения постера
                

// Создаем шорткод
$ attr = массив (
'mp4' => $video_mp4,
'вебм' => $video_webm,
'flv' => $video_flv,
'плакат' => $video_poster,
«предварительная загрузка» => «авто»
);

// Показать шорткод
эхо wp_video_shortcode($attr);
?>

Первый раздел кода ссылается на имена настраиваемых полей, которые мы создали на шаге 1. Мы создаем переменную PHP для каждого поля (они будут выводить URL-адрес соответствующего файла), который нам нужно будет использовать в середине. раздел кода.

В этом среднем разделе у нас есть массив атрибутов для функции wp_video_shortcode . Обратите внимание, что для каждого типа файла существует свой атрибут. Мы также выбираем предварительную загрузку видео, но это совершенно необязательно. Здесь вы также можете установить ширину, высоту, цикл и даже (вздох) автоматическое воспроизведение видео, если хотите.

Нижняя часть кода выводит результат нашей работы в наш шаблон.

После того, как вы все настроите удовлетворительно, вы захотите сохранить свой шаблон и загрузить его на свой веб-сайт (или просто сохранить, если вы используете встроенный редактор темы WordPress). Затем проверьте свою страницу в интерфейсе, чтобы убедиться, что видео отображается правильно.

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

Пользовательские поля упрощают процесс

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

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

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