Cómo agregar miniaturas para videos de YouTube en WordPress

¿Has visto que los sitios populares usan miniaturas de videos de YouTube en la página principal de su sitio? Si ejecuta un canal de video en sitios como YouTube, Vimeo u otros, también puede ver una miniatura de video para todas las publicaciones que contienen videos en la portada y en las páginas de archivo de su blog. En este artículo, le mostraremos cómo agregar miniaturas para videos de YouTube en WordPress.

Miniaturas de vídeos de WordPress y miniaturas de publicaciones

WordPress viene con funciones integradas para agregar imágenes destacadas o publicar miniaturas, y la mayoría de los temas de WordPress admiten esta función. Sin embargo, si desea resaltar el contenido de su video de YouTube, entonces querrá mostrar ese contenido con miniaturas de video. Este artículo lo ayudará a hacerlo utilizando la función de vista previa de publicación predeterminada de WordPress.

Configuración del plugin para miniaturas de video en WordPress

Lo primero que debe hacer es instalar y activar Miniaturas de vídeo conectar. Después de activar el plugin, debe ir a Configuración »Miniaturas de video para configurar los ajustes del plugin.

Configurar miniaturas de video

En la pantalla de configuración, le recomendamos que elija almacenar la miniatura en su biblioteca de medios. Esto reducirá las solicitudes http externas en su sitio y sus páginas se cargarán más rápido. En la sección de tipos de publicaciones, el plugin mostrará publicaciones, páginas y tipos de publicaciones personalizados, si tiene alguna en su sitio web. Seleccione los tipos de publicaciones donde desea que el plugin busque enlaces a videos. La última opción en esta página es elegir un campo personalizado. Algunos plugins de video de WordPress guardan las URL de los videos en un campo personalizado, y si está utilizando esos plugins, deberá ingresar ese campo personalizado aquí. A continuación, haga clic en el botón Guardar cambios.

En la página de configuración, también verá la pestaña Proveedores. Si está utilizando Vimeo para compartir sus videos, deberá crear una aplicación en Vimeo y luego ingresar los valores de ID de cliente, Secreto de cliente, Token de acceso y Secreto de Token de acceso aquí.

Agregar credenciales de la aplicación Vimeo

En la pestaña Acciones masivas, puede escanear sus publicaciones publicadas en busca de videos y generar miniaturas de video para ellos. El plugin también proporciona un botón para borrar todas las miniaturas de videos y eliminarlas como archivos adjuntos de sus publicaciones.

Escanear publicaciones para generar miniaturas de video

Creación de miniaturas de video en publicaciones de WordPress

Ahora que ha configurado el plugin, creemos una miniatura de video agregando una URL de video en una publicación de WordPress. Para hacer esto, necesita crear o editar una publicación de WordPress y agregar la URL de su video en el área de edición de la publicación. Una vez que se publique la publicación, verá que el plugin ha generado una miniatura de video para usted y la ha agregado a su publicación.

Agregar un video en la publicación de WordPress y generar una miniatura de video

Ver una miniatura de video en su tema de WordPress

El plugin de miniaturas de video utiliza la función de miniaturas de publicaciones de WordPress. La mayoría de los temas de WordPress están configurados para mostrar automáticamente miniaturas de publicaciones. Esto significa que su tema mostrará automáticamente la miniatura del video junto con el contenido o extracto de su publicación. Sin embargo, si el tema no muestra miniaturas de video, entonces debe editar los archivos del tema y agregar este código a la plantilla donde desea mostrar la miniatura.

<?php the_post_thumbnail(); ?>

Cómo agregar un botón de reproducción en la miniatura de un video en WordPress

Ahora que ha capturado y mostrado con éxito miniaturas de video en sus publicaciones de WordPress, es posible que desee distinguir las miniaturas de imágenes normales de las miniaturas de video. Esto les permitirá a los usuarios saber que hay un video en la publicación y que pueden hacer clic en el botón de reproducción para ver la publicación del video. Le mostraremos cómo usar etiquetas condicionales para distinguir entre miniaturas de video y miniaturas de publicaciones regulares, y agregaremos un botón de reproducción.

Para utilizar este método, debe asegurarse de publicar sus publicaciones de video en una categoría específica, como Videos. Luego, dentro de los archivos de plantilla de su tema como index.php, archive.php, category.php, or content.php busque esta línea de código:

<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>

Ahora necesitamos reemplazar este código con el siguiente código:

<?php if ( in_category( 'video' )) : ?>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?><span class="playbutton"></span></a>
<?php else : ?> 
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>	
<?php endif; ?>

Este código agrega <span class="playbutton"?></span> después de la miniatura de la publicación solo para las publicaciones archivadas en la categoría de video. El siguiente paso es cargar un archivo de imagen desde Medios »Agregar nuevo pantalla. Esta imagen se utilizará como botón de reproducción. Después de cargar el archivo de imagen, anote la ubicación del archivo de imagen haciendo clic en el enlace Editar junto a la imagen.

El último paso es mostrar el botón de reproducción. Usaremos CSS para mostrar y posicionar el botón de reproducción en la miniatura del video. Para hacer esto, debe copiar y pegar este código CSS en el tema o la hoja de estilo del tema hijo haciendo clic en Apariencia »Editor.

.playbutton {
    background: url('https://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 { 
    opacity:1.0;
}

No olvide reemplazar la URL de la imagen de fondo con la URL del archivo de imagen del botón de reproducción que cargó anteriormente. Eso es todo. Los archivos de miniaturas de video ahora deberían tener un botón de reproducción.

Esperamos que este artículo te haya ayudado a resaltar tus videos de YouTube con miniaturas en WordPress.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir