X

Cómo agregar una imagen destacada de un video de YouTube en WordPress

Snippets de IsItWP

¿Quieres añadir una imagen destacada de tu video de YouTube? Nuestro fragmento de código añade un metabox a tus publicaciones donde puedes agregar un ID de video de YouTube para mostrar una miniatura.

agregar miniaturas de publicaciones de YouTube con metabox personalizado

Instrucciones:

Para mostrar una miniatura de YouTube como tu imagen destacada, agrega este fragmento de código al archivo functions.php de tu tema o a un plugin específico del sitio:

Siéntete libre de cambiar esta línea: youtube_thumb(‘480′,’360′,’0’)

Los valores en la función son los siguientes: ancho, alto, captura de pantalla. El 0 es la vista previa de la imagen por defecto, 0 debería ser el primer fotograma, pero 1, 2, 3, etc. también pueden funcionar para el video con imágenes de vista previa a lo largo del clip.

	add_action("admin_init", "youtube_init");
	add_action('save_post', 'save_youtube_link');

	function youtube_init(){
		add_meta_box("youtube", "Youtube thumbnail code", "youtube_link", "post", "normal", "high");
	}

	function youtube_link(){
		global $post;
		$custom  = get_post_custom($post->ID);
		$link    = $custom["link"][0];
?>
<div class="link_header">
	<input name="link" class="form-input-tip" value="<?php echo $link; ?>" /><br />
</div>

<div class="yt-thumb"><img src="http://img.youtube.com/vi/<? echo $custom['link'][0]; ?>/0.jpg" width="30" height="30" /></div>
<p>Please place id for the youtube file here! This sample URL ID is hilighted in <span class="yt-id">red</span>. After v= and before & symbol if one exists. <br /> http://www.youtube.com/watch?v=<span class="yt-id">oHg5SJYRHA0</span>&feature=player_embedded</p><div class="yt-clear"></div>
<?php
	}


function save_youtube_link(){
global $post;
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {return $post->ID;}
	update_post_meta($post->ID, "link", $_POST["link"]);
}

function youtube_thumb($w,$h,$t){
     $custom = get_post_custom($post->ID);
     return '<img src="http://img.youtube.com/vi/'.$custom['link'][0].'/'.$t.'.jpg" width="'.$w.'" height="'.$h.'" />';
}


add_action('admin_head', 'youtube_css');
function youtube_css() {
	echo'
	<style type="text/css">
		.link_header{margin:0px 5px 0px 0px;}
		.link_header input{
			font-size:13px;
			color:#666;
			border:solid 1px #ccc;
			-moz-border-radius:3px;
			padding:2px;
			margin:0px 10px 0px 0px;
			width:100%;
			}
		.yt-clear{clear:both;}
		.yt-id{color:#ff0000;font-weight:bold;}
		.yt-thumb{
			float:left;
			margin:6px 6px 0px 0px;
			border:solid 1px #ccc;
			}
	</style>
	';
}
<? 
        echo youtube_thumb('480','360','0'); 
?>

Nota: Si es la primera vez que agregas fragmentos de código en WordPress, consulta nuestra guía sobre cómo copiar / pegar fragmentos de código correctamente en WordPress, para que no rompas accidentalmente tu sitio.

Si te gustó este fragmento de código, considera echar un vistazo a nuestros otros artículos en el sitio como: 62 mejores temas gratuitos de WordPress para blogs o 7 mejores plugins de formularios de contacto de WordPress.

Comentarios   Deja una respuesta

  1. Kim Christiansen February 27, 2019 at 2:04 am

    Así que obtengo el cuadro para ingresar la URL de YouTube y todo, pero no está generando una imagen destacada. Además, estoy usando un complemento de fragmentos diferente y no le gustan realmente los caracteres extraños en medio del fragmento.
    Finalmente, ¿dónde se supone que van las últimas 3 líneas de código?

Agrega un comentario

Nos complace que hayas elegido dejar un comentario. Ten en cuenta que todos los comentarios se moderan de acuerdo con nuestra política de privacidad, y todos los enlaces son nofollow. NO uses palabras clave en el campo del nombre. Tengamos una conversación personal y significativa.

Lista de verificación para lanzar WordPress

La lista de verificación definitiva para lanzar WordPress

Hemos recopilado todos los elementos esenciales de la lista de verificación para el lanzamiento de tu próximo sitio web de WordPress en un práctico ebook.
¡Sí, envíame el eBook gratis!