Características, plugins y snippets para la gestión de la Imagen Destacada en WordPress

Cuando escribimos una entrada o una página en WordPress es conveniente asignarle una imagen destacada (Feautured Image), algunos la llaman también miniatura o thumbnail.

Es lo que generalmente se muestra en nuestra home y páginas de archivos junto al título para invitar a su lectura. También podemos gestionarla para que se comparta en las redes sociales. Fotografías o imágenes que deben invitar a la lectura y mejorar el diseño de nuestro sitio.

Vamos a ver sus características y cómo sacar todo el partido a este elemento visual de gran importancia para tu sitio. Iremos de lo básico a lo avanzado terminado el post con 5 plugins y 4 snippets muy útiles para la gestión de las imágenes destacadas en WordPress.

1. Características de la Imagen Destacada en WordPress
2. Consideraciones y soluciones
3. 6 Plugins para la automatización y gestión de la imagen destacada
4. 4 Snippets para la automatización y gestión de la imagen destacada

1. Características de la Imagen Destacada en WordPress

Se introdujo en la versión 2.9 de WordPress a finales de 2009. Tu tema debe tener activada esta función, normalmente todo en functions.php

add_theme_support( 'post-thumbnails' );

WordPress va a generarte por defecto 3 imágenes extras a partir de la que hayas subido que se llamarían desde los archivos de tu tema de esta forma, siendo su tamaño máximo el indicado y siempre proporcionales:

the_post_thumbnail('thumbnail');       // Tamaño de la miniatura 150x150 píxeles 
the_post_thumbnail('medium');          // Tamaño de la mediano 300x300 píxeles
the_post_thumbnail('large');           // Tamaño de la grande 640x640 píxeles

Al tamaño de miniatura puedes activarle la opción de que se recorte para que sea exactamente ese tamaño.

Y la imagen original:

the_post_thumbnail('full'); // La resolución original

Estos tamaños puedes cambiarlos en los Ajustes Multimedia: Ajustes > Medios

Estos tamaños también los podrás utilizar cuando insertes una imagen en tu editor siempre y cuando el tamaño original sea superior al que vas a utilizar, es decir, si subes una imagen de 500×500 no vas a poder insertarla al “tamaño grande” (640×640)

Si necesitas un tamaño especial tu tema lo puede asignar de esta forma, con los parámetros (nombre, ancho, alto y true o false si quieres que se recorte la imagen para que sea ese tamaño exacto

add_image_size( 'nombre-de-tu-nueva-imagen-destacada', 300, 450, true );

Para utilizarla no tendrías más que utilizar

the_post_thumbnail( 'nombre-de-tu-nueva-imagen-destacada');

Esta función además de mostrar la imagen destacada al tamaño que le indiques les añade dos clases CSS: wp-post-image y attachment-(el nombre del tamaño utilizado). Ejemplos para darle estilos en tu CSS

img.wp-post-image
img.attachment-thumbnail
img.attachment-medium
img.attachment-large
img.attachment-full
img.nombre-de-tu-nueva-imagen-destacada

2. Consideraciones y soluciones

Generalmente estas imágenes se utilizan en la home, sidebar, pié, posts relacionados y páginas de archivos junto al título y extracto. Es una forma muy visual de invitar a seguir la lectura.

1. Al cambiar de tema

Hay que tener en cuenta que si cambias de tema y ese nuevo tema utiliza un tamaño distinto al que estabas utilizando puede causarte problemas en tu diseño.

Digamos que decides utilizar mi tema gratuito Marla, las imágenes no van a salirse de su contenedor pero no estarán optimizadas porque se utiliza un tamaño especial para la home y archivos.

La solución es muy simple, instalas el plugin gratuito Regenerate Thumbnails o AJAX Thumbnail Rebuild que volverá a crear los tamaños de imagen destacada que lleve tu tema.

2. Utilizar una Imagen Destacada en la página de tus entradas

Muchos temas muestran una imagen destacada en la misma página de tus entradas, en tu archivo single.php

A veces puede ser redundante si la misma Imagen Destacada está nuevamente inserta en el propio artículo. La solución es utilizar imágenes distintas, la que uses como destacada no la insertes en el post o al menos no al principio

3. Plugins para la automatización de la imagen destacada

Como con toda automatización hay que ir con cuidado. Vemos una serie de plugins que pueden ayudarnos.

1. Con Default featured image puedes asignar una imagen destacada por defecto.
2. Si quieres ahorrarte el paso de Fijar la imagen destacada y asegurarte que no se te ha olvidado puedes utilizar el plugin gratuito Easy Add Thumbnail de Samuel Aguilera, añadirá automáticamente como Imagen Destacada la primera de las imágenes insertada en tu post.
3. Con el plugin Require Featured Image te saldrá un aviso si intentas publicar antes de fijar la imagen destacada.
4. Con el plugin Auto Post Thumbnail podrás añadir imágenes destacadas a posts ya publicados que no la tuvieran.
5. Si publicas vídeos puedes conseguir la imagen que lo ilustre por ejemplo de YouTube: https://img.youtube.com/vi/<id-del-video>/0.jpg o utilizar este plugin gratuito que la saca por ti Video Thumbnails de distintos proveedores como Vimeo.

Bonus: Y si lo que quieres en que en esos posts de vídeos en vez de una imagen tu “Imagen Destacada” sea realmente un vídeo prueba el plugin Featured Video Plus

Cómo recortar manualmente la imagen destacada de tu WordPress (Actualización 8/05/15)

Si tu tema o en tus opciones has optado por recortar la imagen destacada recuerda que WordPress siempre recortará por el medio. Para personalizar ese recorte y hacerlo manualmente tenemos el plugin gratuito Post Thumbnail Editor del que hablamos en Cómo recortar manualmente los thumbnails en WordPress

4. Snippets para la automatización de la imagen destacada

Si quieres prescindir de plugins e insertar tus propio código en functions.php aquí van algunos snippets:

1. Añade como imagen destacada la primera imagen de tu entrada

function imagen_destacada_automatica() {
    global $post;
    $ya_tiene_imagen_destacada = has_post_thumbnail($post->ID);
    if (!$ya_tiene_imagen_destacada)  {
    $attached_image = get_children( "post_parent=$post->ID&post_type=attachment&post_mime_type=image&numberposts=1" );
        if ($attached_image) {
            foreach ($attached_image as $attachment_id => $attachment) {
                set_post_thumbnail($post->ID, $attachment_id);
            }
           }
     }
}
add_action('the_post', 'imagen_destacada_automatica');
add_action('save_post', 'imagen_destacada_automatica');
add_action('draft_to_publish', 'imagen_destacada_automatica');
add_action('new_to_publish', 'imagen_destacada_automatica');
add_action('pending_to_publish', 'imagen_destacada_automatica');
add_action('future_to_publish', 'imagen_destacada_automatica');

2. Imagen por defecto si no tiene imagen destacada, utiliza un condicional y cuando no encuentre una imagen destacada muestra una por defecto, esto lo puedes hacer también por categorías o tags:

<?php if ( has_post_thumbnail() ) {
the_post_thumbnail();
} else { ?>
<img src="<ruta de tu imagen por defecto>" alt="<?php the_title(); ?>" />
<?php } ?>

3. Uso de la imagen destacada para las redes sociales. Cuando se comparte un post en Facebook puedes indicar la imagen que quieres mostrar en una meta etiqueta

<meta content="ruta-imagen-destacada-para-facebook" property="og:image">

Debe ser al menos 200×200 y el aspect ratio no puede ser mayor de 3, es decir, la imagen que indiques no puede ser 3 veces más ancha que alta o viceversa. Para Twitter debes crear primero una Twitter Card y añadir el siguiente código que te sirve también para Facebook cambiando las correspondientes meta etiquetas:

function img_destacada_twitter() {
if ( has_post_thumbnail()) {
   $twitter_thumb = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large'); 
   $twitter_thumb = $twitter_thumb[0];
} else {
	$fbthumb = "https://ceslava.com/img/imagen-destacada-por-defecto.jpg";
}
echo 	'<meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@ceslava">
    <meta name="twitter:title" content="'. get_the_title().'">
    <meta name="twitter:description" content="'. strip_tags(get_the_excerpt()).'">
    <meta name="twitter:creator" content="@ceslava">
    <meta name="twitter:url" content="'. get_permalink().'">
    <meta name="twitter:image:src" content="'.$twitter_thumb.'">';
}
add_action('wp_head', 'img_destacada_twitter');

También puedes utilizar el plugin WordPress SEO by Yoast y configurar algunas opciones en su sección “Social”

4. Añadir la imagen destacada al listado de entradas de tu panel de administración de WordPress, una buena forma de comprobar si a algún post le falta la imagen destacada (vía)

add_filter('manage_posts_columns', 'posts_columns', 5);
add_action('manage_posts_custom_column', 'posts_custom_columns', 5, 2);
function posts_columns($defaults){
    $defaults['riv_post_thumbs'] = __('Thumbs');
    return $defaults;
}
function posts_custom_columns($column_name, $id){
        if($column_name === 'riv_post_thumbs'){
        echo the_post_thumbnail( 'featured-thumbnail' );
    }
}