¿Has visto sitios populares usando las miniaturas de sus videos de YouTube en la página principal de su sitio? Si tienes un canal de video en sitios como YouTube, Vimeo u otros, entonces tú también puedes mostrar una miniatura de video para todas las publicaciones que contengan videos en las páginas principal y de archivo de tu blog. En este artículo, te mostraremos cómo agregar miniaturas para videos de YouTube en WordPress.
Miniaturas de video y miniaturas de publicaciones de WordPress
WordPress viene con funcionalidad incorporada para agregar imágenes destacadas o miniaturas de publicaciones, y la mayoría de los temas de WordPress admiten esta función. Sin embargo, si deseas resaltar tu contenido de video de YouTube, querrás mostrar ese contenido con miniaturas de video. Este artículo te ayudará a hacerlo utilizando la funcionalidad predeterminada de miniaturas de publicaciones de WordPress.
Configuración del plugin de miniaturas de video en WordPress
Lo primero que debes hacer es instalar y activar el plugin Video Thumbnails. Después de activar el plugin, debes ir a Ajustes » Miniaturas de video para configurar los ajustes del plugin.
En la pantalla de configuración, 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 publicación, el plugin mostrará publicaciones, páginas y tipos de publicación personalizados si tiene alguno en su sitio web. Seleccione los tipos de publicación para los que desea que el plugin escanee los enlaces de video. La última opción en esta página es elegir un campo personalizado. Algunos plugins de video para WordPress guardan las URL de video en un campo personalizado, y si está utilizando dichos plugins, deberá ingresar ese campo personalizado aquí. Después de eso, 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 e ingresar aquí los valores de ID de cliente, secreto de cliente, token de acceso y secreto de token de acceso.
En la pestaña Acciones masivas, puede escanear sus publicaciones publicadas en busca de videos y generar miniaturas de video para ellas. El plugin también proporciona un botón para borrar todas las miniaturas de video y eliminarlas como adjuntos de sus publicaciones.
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 hacerlo, necesita crear o editar una publicación de WordPress y agregar su URL de video en el área de edición de la publicación. Una vez que publique la publicación, verá que el plugin ha generado una miniatura de video para usted y la ha agregado a su publicación.
Mostrar una miniatura de video en su tema de WordPress
El plugin de miniaturas de video utiliza la funcionalidad de miniaturas de publicaciones de WordPress. La mayoría de los temas de WordPress están configurados para mostrar automáticamente las miniaturas de las publicaciones. Esto significa que tu tema mostrará automáticamente la miniatura del video junto con el contenido o extracto de tu publicación. Sin embargo, si tu tema no muestra las miniaturas de video, deberás editar los archivos de tu tema y agregar este código a la plantilla donde deseas mostrar la miniatura.
<?php the_post_thumbnail(); ?>
Cómo agregar un botón de reproducción a la miniatura de video en WordPress
Ahora que has capturado y mostrado con éxito miniaturas de video en tus publicaciones de WordPress, es posible que desees distinguir tus miniaturas de imagen normales de tus miniaturas de video. Esto permitirá a tus 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 de video. Te mostraremos cómo usar etiquetas condicionales para distinguir entre miniaturas de video y miniaturas de publicaciones normales y agregar un botón de reproducción.
Para usar este método, debes asegurarte de publicar tus videos en una categoría específica, por ejemplo, Videos. Luego, dentro de los archivos de plantilla de tu tema, como index.php, archive.php, category.php o content.php, busca 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 clasificadas en la categoría de video. El siguiente paso es cargar un archivo de imagen desde la pantalla de Medios » Agregar nuevo. Esta imagen se usará como botón de reproducción. Una vez que haya cargado el archivo de imagen, anote la ubicación del archivo de imagen haciendo clic en el enlace Editar junto a la imagen.
El paso final 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 hacerlo, necesita copiar y pegar este código CSS en la hoja de estilo de su tema o tema secundario haciendo clic en Apariencia » Editor.
.playbutton {
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 {
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. Sus archivos de miniaturas de video ahora deberían tener un botón de reproducción.
Esperamos que este artículo le haya ayudado a resaltar sus videos de YouTube con miniaturas en WordPress. Para comentarios y preguntas, deje un comentario o síganos en Twitter.
Peter
¡Es increíble que todavía funcione!
Sin embargo, ¿alguien sabe por qué no obtiene una miniatura de una lista de reproducción de YT?
Tengo varias publicaciones con listas de reproducción y la imagen siempre es una imagen gris de "Video no encontrado"
Soporte de WPBeginner
El plugin fue creado para videos y no para listas de reproducción completas, necesitaría contactar al autor del plugin para incluir la funcionalidad de listas de reproducción.
Administrador
eddie art
¿funcionaría esto para obtener una imagen en miniatura en un video incrustado con código iframe?
Soporte de WPBeginner
Debería consultar con el soporte del plugin para ver si eso es compatible.
Administrador
Faisal Iqbal
¿Dónde pongo ese código en functions.php? No soy un experto en tecnología, ¿alguien me puede ayudar?
Mohammad
Hola
Intento usar este plugin pero no me funciona y el desarrollador en los foros de soporte no responde a la mayoría de los temas sin resolver. En la página de depuración, cuando intento "Probar marcado para video", obtengo este error:
Miniatura encontrada, pero es posible que no exista en el servidor de origen. Si al abrir la URL a continuación en su navegador web se produce un error, la fuente está proporcionando una URL no válida. URL de la miniatura:
¿cuál es el problema?
Neon emmanuel
¿qué pasa si quiero tres parámetros, 1 un respaldo cuando no hay miniatura, 2 un respaldo si es video (es decir, agregando una superposición de botón de reproducción), y 3 un respaldo si es video con un ícono de reproducción superpuesto?
Bryan
¿Funcionará alguno de estos códigos para Adobe Muse/Dreamweaver?
john
Hola
Estamos buscando un desarrollador que pueda implementar esto para nosotros. ¿Está disponible?
pamela sillah
¿Hay alguna otra forma de hacer esto SIN plugins?? por favor ayúdenme
franck
Hola a todos,
¿alguien sabe cómo eliminar videos relacionados cuando un video de YouTube se reproduce hasta el final en el plugin de galería de videos de Huge IT?
Ernesto
¿Cómo elimino la imagen dentro de la entrada? Quiero que se muestre el video y no una imagen
Quoterland
Gracias, gran tutorial.
Rihan
And wordpress 4.0 I add the video (youtube) URL in the post edit area and its showing me a video player
on the video thumb are i can see this text only (No video thumbnail for this post.) not working!
any Idea
thanks
Personal de WPBeginner
No, tu miniatura aparecerá en Facebook, pero no tendrá el botón de reproducción.
srem
Lo siento, no sé por qué no se muestra el código.
Mauro Scarpa
¡Hola! Gran sitio web y publicación, tengo una pregunta: si luego quiero compartir mi publicación en Facebook, ¿aparecerá también con el botón de reproducción? Gracias
Piet
Genial plugin y tutorial. En lugar de mostrar una imagen de botón de reproducción, me gustaría sugerir usar un icono de fuente, por ejemplo, de FontAwesome.
Personal de WPBeginner
TCB: si estás usando el plugin WordPress SEO, entonces puedes probar este método. Una vez que el plugin de miniaturas de video haya obtenido la imagen en miniatura de tu video, deberás encontrar su ubicación en tu biblioteca de medios y copiar la URL. Después de eso, elimina la imagen en miniatura del video de la publicación. En el cuadro meta de WordPress SEO en el editor de publicaciones, haz clic en la pestaña social y pega el enlace junto al campo de imagen de Facebook.
TCB
¿Es posible usar la miniatura del video como imagen de publicación en Facebook?
Sería genial porque no quiero mostrar la imagen como imagen destacada.
Megha Verma
Estoy teniendo un problema, ya que el botón de reproducción solo se muestra en la primera publicación... debido a la posición absoluta... no en las imágenes de otras publicaciones.
Sutherland Boswell
¡Gran tutorial! Como desarrollador, me encanta recibir comentarios de los usuarios y trabajar en soluciones sencillas para las funciones más solicitadas. Superponer un botón de reproducción y hacer que el video se reproduzca al hacer clic en la miniatura son dos de las funciones más solicitadas, pero ambas dependen en gran medida del tema. Aprender a modificar un tema por tu cuenta puede ser gratificante, ¡así que no tengas miedo de intentarlo!
PD: ¡Espero que todos echen un vistazo a la versión pro!
Jesse
Hola Sutherland.
He leído cosas muy buenas sobre tu plugin y estoy ansioso por probarlo.
Sin embargo, al usar tu plugin para escanear archivos de video, encuentra los 22 videos en la página 'video' donde están publicados. El problema es que no encuentra ninguna miniatura.
Después de leer tus diversas respuestas de soporte a problemas similares, así como tus instrucciones, intenté averiguar si mi tema (metric, de grandpixels) está usando un campo personalizado. No he tenido éxito en encontrar esta información.
¿Tienes alguna sugerencia sobre cómo hacer que esto funcione?
Gracias,
Jesse
Audee
¿Qué pasa si solo quiero mostrar la miniatura de la entrada para las entradas clasificadas bajo el 'Formato de entrada' de video?
¡Gracias por compartir el artículo sobre este plugin!
Sutherland Boswell
Deberías poder seguir el tutorial, solo reemplaza
1-click Use in WordPress
con
1-click Use in WordPress
Alex
Hola Sutherland Boswell,
uso tu plugin para el tema Detube, el problema es que no hay ninguna línea de código <a href="”> en esos archivos: index.php, archive.php, category.php..
¿Tienes alguna idea o alguna forma de hacerlo funcionar en el tema Detube?
¡Gracias de antemano!
Alex
Me alegraría mucho si alguien tuviera una idea y pudiera responder mi pregunta. He estado trabajando durante muchas horas para que este código funcione en Detube, pero hasta ahora no he tenido éxito...
¿Podría alguien aquí ayudarme, por favor?
Ahmad Rafi Maseer
¿Cómo reproducir directamente en la miniatura para que el usuario no tenga que ir a la página de la entrada para reproducir el video???
Soporte de WPBeginner
Para eso tendrás que editar tu tema y en lugar de mostrar la miniatura, tendrás que incrustar el video.
Administrador
Sue Anne
¡Muchas gracias por las excelentes instrucciones para poner un video y una miniatura de video en mi blog de WordPress. Me tomó unos 5 minutos y no soy una experta en tecnología!
Pali Madra
¡Hola!
Gran sitio web y una de mis entradas favoritas.
Tenía una pregunta relacionada. Estoy agregando videos colocando la URL en el código HTML de las entradas, pero también quiero mostrar un pie de foto debajo. ¿Es eso posible sin usar un plugin?
Gracias de antemano
Matt
¡Fantástico tutorial. Muchas gracias por publicarlo!
Tiguan
El ‘span’ debe colocarse dentro de las etiquetas de hipervínculo de la miniatura, de lo contrario, el enlace de la imagen sobre el botón de reproducción se deshabilitará. Así que el código correcto será:
Sin embargo, es un buen tutorial.
Soporte de WPBeginner
Tiguan, gracias por señalar esto. Hemos actualizado el tutorial.
Administrador
adolf witzeling
Gran tutorial.
gottfrid q.
> Esto les hará saber a tus usuarios que hay un video en la publicación y podrán hacer clic en el botón de reproducción para ver la publicación de video.
No quiero decepcionarte, pero el botón (girar) no tiene ningún método de clic.
¿Cómo se suponía que funcionara exactamente este botón y cómo implementarlo?
Gracias por tu tiempo.
Soporte de WPBeginner
El botón no reproducirá el video allí mismo, sin embargo, llevará al usuario a la página del video. Toda la miniatura está enlazada a la publicación que contiene el video.
Administrador
gottfrid q.
¿Debe colocarse el ‘span’ dentro de las etiquetas de hipervínculo de la miniatura entonces?
Akash
Y. ¿cómo implementar el Botón de Reproducción en el Tema GENESIS? no hay ningún archivo index.php, archive.php, category.php, o content.php allí para agregar el código.
Gracias.
Soporte de WPBeginner
Contacta los foros de soporte de Genesis.
Administrador
Mark McGinnis
Akash, ¿alguna vez descubriste cómo implementarlo usando el tema Genesis? Tengo el mismo problema…
¡Gracias!
Akash
Pero, ¿cuál será el tamaño de la miniatura del video? ¿Será el mismo que la miniatura de imagen ya establecida en el blog?
Soporte de WPBeginner
Usará el tamaño de miniatura predeterminado. Puedes anular esto agregando tu propio tamaño de imagen y usándolo en tu plantilla. Por ejemplo, si creas un nuevo tamaño de miniatura y lo llamas video-thumbnail, lo llamarías en tu plantilla así:
<?php the_post_thumbnail('video-thumbnail'); ?>1-click Use in WordPress
Administrador