Cómo agregar video HTML5 a WordPress usando campos personalizados

En términos generales, si le preguntas a 10 desarrolladores de WordPress cómo hacer algo, recibirás diez respuestas diferentes. Pero eso habla tanto de la versatilidad del CMS como de que hay más de una solución para cualquier tarea.

Recientemente, enfrenté el desafío de configurar un video HTML5 dentro de una página de WordPress. Está en una ubicación estática y necesitaría ser reemplazado cada cierto tiempo. Si bien está bien usar Video Shortcode, en este caso quería hacer las cosas más simples para las personas que actualizarían la página. No quería que tuvieran que aprender qué era un Shortcode o cómo usarlo.

Entonces, la solución más simple (en mi opinión, de todos modos) fue crear algunos campos personalizados donde se pudieran cargar los archivos de video relacionados. A partir de ahí, la plantilla del tema crearía automáticamente el código necesario para mostrar el video. Así es como lo hice:

Requerimientos del proyecto

Por supuesto, necesitará un sitio de WordPress y acceso para editar su tema (utilice un tema secundario si aún no lo está haciendo). Un poco de familiaridad con PHP y HTML también será de gran ayuda. Más allá de eso, deberías tener:

• Una forma de crear campos personalizados. La versión gratuita de Advanced Custom Fields (ACF) hará el trabajo bastante bien. Instálelo y actívelo en su sitio web de WordPress.
• Un video, idealmente en múltiples formatos. Aunque los archivos MP4 ahora son compatibles con todos los principales navegadores, puede que no sea una mala idea proporcionar una versión WEBM para una cobertura adicional. Y, ya que está, un FLV alternativo para aquellos que usan navegadores realmente antiguos no podría hacer daño. Querrá asegurarse de que cada versión de su video esté configurada con la misma resolución.
• Una imagen de 'cartel'. Ya sea una captura de pantalla o un gráfico personalizado hecho a la resolución más alta en la que se reproducirá su video.

Paso 1: crear los campos personalizados

Una vez que haya instalado y activado la versión gratuita de ACF, vaya al menú Campos personalizados dentro de WordPress y luego haga clic en Agregar nuevo.

Dentro de su nuevo conjunto de campos (los nuestros se llaman 'Campos de video'), deberá crear un campo de archivo ACF para cada formato de video que planee cargar, más otro para la imagen del póster. En nuestra configuración, tenemos campos para MP4, WEBM, FLV y un póster. Para cada campo de archivo, asegúrese de seleccionar el botón de opción en Valor de retorno que dice "URL de archivo". Además, asegúrese de tomar nota de los nombres de los campos; los necesitaremos más adelante.

A continuación, dentro de la configuración de "Ubicación" de ACF, asigne sus nuevos campos a cualquier página o publicación que desee y guarde su trabajo. Cuando vaya a editar esa página asignada, debería ver los campos (es posible que tenga que desplazarse un poco hacia abajo para encontrarlos).

Paso 2: Cargue archivos de video

Navegue para editar la página o publicación donde asignó sus nuevos campos personalizados. A partir de ahí, es cuestión de subir los archivos correctos. Una vez que haya cargado los archivos necesarios, guarde su página/publicación.

Paso 3: edite la plantilla

Ahora viene la parte divertida: agregar un poco de magia PHP a la plantilla de su tema. Si no está familiarizado con la jerarquía de plantillas de WordPress, ahora puede ser un buen momento para estudiarla.

Encuentre el archivo de plantilla correcto y la ubicación donde desea colocar el video. Luego, copie y pegue el siguiente fragmento de código y personalícelo para que se ajuste a sus necesidades:

 <?php
// Obtenga los campos de video
$video_mp4 = get_field('mp4_video'); // Nombre del campo MP4
$video_webm = get_field('webm_video'); // Nombre del campo WEBM
$video_flv = get_field('flv_video'); // Nombre del campo FLV
$video_poster = get_field('poster_imagen'); // Nombre del campo de la imagen del cartel
                

// Construir el código corto
$atributo = matriz(
'mp4' => $video_mp4,
'webm' => $video_webm,
'flv' => $video_flv,
'cartel' => $video_cartel,
'precargar' => 'automático'
);

// Mostrar el código corto
echo wp_video_shortcode ($atributo);
?>

La primera sección del código hace referencia a los nombres de los campos personalizados que creamos en el Paso 1. Estamos creando una variable de PHP para cada campo (darán como resultado la URL de su archivo respectivo), que necesitaremos usar en el medio sección de código.

Abajo, en esa sección central, tenemos una serie de atributos para la función wp_video_shortcode . Observe que hay un atributo para cada tipo de archivo. También elegimos precargar el video, pero eso es completamente opcional. Aquí también puede configurar el ancho, la altura, el bucle e incluso (jadear) reproducir automáticamente el video si lo desea.

La sección inferior del código muestra el resultado de nuestro trabajo en nuestra plantilla.

Una vez que haya configurado todo satisfactoriamente, querrá guardar su plantilla y subirla a su sitio web (o simplemente guardarla si está utilizando el editor de temas integrado de WordPress). Luego, revise su página en la parte delantera para asegurarse de que el video se muestre correctamente.

WordPress tiene un reproductor de video HTML5 integrado en el CMS y el reproductor predeterminado se ve y funciona bastante bien. Pero puedes estilizar varias opciones si quieres darle un toque más personal. Inspeccione el código de salida con las herramientas de desarrollo de su navegador y tome nota de las distintas clases de CSS. Por ejemplo, el elemento contenedor tiene una clase de .wp-video . También puede echar un vistazo a un tutorial para ver más a fondo las posibilidades.

Los campos personalizados simplifican el proceso

El uso de campos personalizados puede aportar una gran cantidad de nuevas funciones y posibilidades de diseño a WordPress. Pero un elemento central de su genialidad es que pueden facilitar la gestión del contenido. Independientemente de quién agregará y editará el contenido, los campos personalizados pueden optimizar todo el proceso. Eso nos beneficia a todos, pero es especialmente bueno para los usuarios que no son desarrolladores expertos.

Agregar alguna funcionalidad simple como los campos de video HTML5 anteriores puede reducir en gran medida la curva de aprendizaje que enfrenta un nuevo usuario. En lugar de tener que pensar en lo que se supone que deben hacer, ahora se trata de cargar algunos archivos.

Al final, ese pequeño trabajo adicional por adelantado puede ahorrarles a todos algo de tiempo y dolores de cabeza durante la vida útil del sitio web.