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

Ajustes multimedia ‹ ceslava   diseño   cursos — WordPress

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.

marla-wordpress-theme-free-gratuito

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.

video-thumbnails-plugin-wordpress

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' );
    }
}
Escribí esto el 21/01/2015

54 comentarios

  1. Muy interesante la información, es bueno tomarse el tiempo necesario para dejar listo el post y no publicar por publicar. Muchas gracias.

  2. xavierv dice:

    muy claro tu post, muchas gracias

  3. Francisco dice:

    Tengo el problema que cuando quiero subir una imagen con la opción Usar imagen destacada de wordpress, me mada un mensaje de error diciendo algo asi de que no puede cargar la imagen, pese a que no es muy grande la imagen (menor a 40 Kb), agradecería me ayudaran.

    Saludos.

    • ceslava dice:

      Hola Francisco,

      Puede ser por varios motivos, conflictos de plugins, configuración de WP/servidor, incluso por el nombre de la imagen. Para estas consultas por favor mejor las solucionamos en el foro: http://foro.ceslava.com Abre un hilo y dame más detalles, si te pasa sólo con esa imagen, con todas, qué plugins tienes, etc.

      Saludos

      • Francisco dice:

        Traté de abrir un hilo en la página que me dices pero me dice que soy un spamer y no pude pasar una prueba de un rectángulo que pasa por varias caras y una cámara en el centro, o que ponga el número de un teléfono móvil, y como no tengo no pude poner ninguno, así que te pido de favor me asesores por aquí. El archivo que quiero subir es una imagen con extension .png y también con extensión .jpg y me dice algo así de que ha habido un error y que intente más tarde, yo creo que el problema puede estar en el archivo functions.php ya que cuando lo tengo así hay veces que quiero abrir el wordpress y me manda el siguiente mensaje: “Warning: Cannot modify header information – headers already sent by (output started at C:\xampp\htdocs\wordpress\wp-content\themes\themeTaller\functions.php:7) in C:\xampp\htdocs\wordpress\wp-includes\pluggable.php on line 1196”
        y para entrar al wordpress tengo que cambiar el nombre del archivo functions.php no se si eso pueda servir para que resuelva el problema.

        Saludos.

  4. Francisco dice:

    Ya resolví el problema que tenía de que no podia subir una imagen destacada o me mandaba el mensaje de error: Warning: Cannot modify header information etc. y aquí les pongo la solución por si a alguien le sirve: en el archivo functions.php tiene que ir el código siguiente:

    pero sin ningún espacio o retorno de carro antes o al final, porque nadamas quité los espacios y retornos de carro que estaban de más y funcionó a las mil maravillas.

    Saludos.

    • ceslava dice:

      Me alegro Francisco, no sé qué te ocurrió en el foro, probablemente pinchaste en algún anuncio. En cualquier caso me alegro que lo solucionaras y de que volvieras para compartir tu solución pero como verás el código no se ve en los posts de ahí el porqué intentar llevar las dudas al foro.

      Saludos

  5. Roberto dice:

    Hola! Muy interesante el post… A mi lo que me sucede es que la imagen destacada se me alinea ala izquierda en el post y me gustaría que esta apareciera centrada en el blog… como puedo lograr esto? Supongo que será a través de código… pero dónde? Mil Gracias

    • ceslava dice:

      Gracias Roberto. Lo que te ocurre es por el diseño de tu tema, debes editar la CSS para centrarlo. Lo ideal sería que hicieras un tema hijo si el tema que estás utilizando no lo has creado tú.

      Saludos

  6. Axel dice:

    Muy bueno el artículo. Te hago una pregunta. ¿es posible utilizar la imagen destacada para que aparezca como preview en alguna galería, pero cuando ingresamos a la página en cuestión, no se vea esta imagen destacada? (Uso betheme)
    Muchas gracias.

    • ceslava dice:

      Hola Axel,

      Sí se puede pero depende del tema que uses, puedes usar la Imagen Destacada donde quieras, y se puede incluso crear una seguna imagen para por ejemplo mostrar según la orientación del dispositivo donde se vea. Como te digo todo depende del tema, si el tuyo permite la opción de personalizarlo podrás hacer lo que dices si no tendrás que modificar los archivos creando un tema hijo.

      Saludos

  7. A mi me parece que wordpress debería tener una actualización para resolver el problema de que asignas una imagen destacada y al publicarla al facebook se cambia por una al azar, es una calamidad que no he podido resolver, no se si es el jetpack o el tema el que ocasiona este error n sé cómo resolverlo, agradecería tu ayuda… :)

    • ceslava dice:

      Hola Francisco,

      Comprueba que tienes en el header la meta tag para las imágenes Open Graph para Facebook

      Si no lo tienes en tu código FB escogerá por ti. Recuerda que la imagen sea lo suficientemente grande, a veces nuestra imagen destacada es la que ponemos y tiene un tamaño tan pequeño que FB se la salta.

      Debe ser insertada mediante una función de tu tema o un plugin, por ejemplo este

      https://wordpress.org/plugins/facebook-thumb-fixer/

      Saludos

  8. Borja dice:

    Hola Ceslava, antes de nada comentarte que tu post me ha parecido muy interesante, el tema es que me quedo con una duda que no acabo de solucionarla e igual me podrías ayudar :)

    Es sobre lo que que comentas en la parte de que te sale la imagen destacada 2 veces y que hace que sea redundante. El tema que uso para el blog es “Cerauno”, y quiero poner una imagen destacada en la portada del blog y que esa sea la misma foto que está dentro del post, el problema es que dentro del post se ve gigante y en la portada del blog se ve bien.. ¿Cómo podría solucionarlo?

    Muchas gracias de antemano

  9. Marilia dice:

    Hola Ceslava, tengo un problemilla. Cuando asigno la imagen destacada a un post, ésta se ve nítida y perfecta. Pero las miniaturas (entradas populares, entradas relacionadas) se ven borrosas. He entrado en ajustes>medios y está marcada la opción de recortar las miniaturas como tú has explicado ¿Qué puede ser? Gracias de antemano.

  10. Angela dice:

    Uso el tema BeTheme y, por defecto, las imágenes destacadas que salen en el portfolio me salen al inicio de cada post (de cada uno de las entradas del portfolio). Yo no quiero que salgan las imágenes destacadas ahí pero no sé cómo quitarlas. ¿Alguna idea? Muchas gracias!!

  11. Gracias, me ayudo bastante.

  12. Hola. Me encanto tu post, me ayudo muchísimo. Pero tengo un hiper problema con la imagen destacada. Quiero que esa imagen destacada que yo asigné solo salga en solo en la pagina de inicio y cuando se acceda al post esta no se encuentre. Estoy utilizando WordPress y Acmeblog como tema, no encuentro manera de solucionar esto. He tratado pero termino eliminando la pagina o dañandola, debido que no soy experto con el tema de códigos y diseño web. Me encantaría muchísimo tu ayuda. Gracias!

    • ceslava dice:

      Hola Lorenzo,

      Te aconsejo que crees un tema hijo y mires el archivo single.php donde seguramente encontrarás en él una llamada al thumbnail. Simplemente la eliminas en un single.php de tu tema hijo.

      Si no lo encontraras en single.php es porque cada tema trabaja de forma distinta y puede que en el single.php se llame con get_template_part a otro archivo PHP o incluso que esa llamada al thumbnail se haga desde una función.

      Saludos

  13. jesus dice:

    hola mi duda es por que no me salen las imagenes destacadas en la pagina principal del blog y solo me sale el texto, me gustaria acompañar una imagen por cada entrada en la pagina principal

  14. Abel dice:

    Hombre, me salvaste la vida con tu artículo. Sin mencionar que aprendí muchas cosas que no sabía, bien explicado y detallado.

  15. Rebeca dice:

    Hola, hay alguna posibilidad de usar una imagen destacada pero sólo para que se vea en las miniaturas de por ejemplo los post destacados, o post relacionados, pero que NO se vea en el resumen de los post en la página principal? Espero haberme explicado bien…

    • ceslava dice:

      Claro Rebeca, la imagen destacada se mostrará donde tu tema lo indique, también puedes usar condicionales para que por ejemplo sólo se muestren en los posts de una categoría… Todo es posible.

  16. Buen dato lo aplicare en mi web de mariachis y les cuento los resultados

  17. Tiger King dice:

    Hola, me encantó tu post. Es muy completo. Llevo buscando un tiempo alguna forma de que al hacer clic sobre la imagen destacada pueda llevarme a un enlace determinado. ¿Hay alguna forma de hacer eso? Es decir, en vez de llevarme al post que me lleve a un enlace personalizado y si por ejemplo le den click sobre el texto de la entrada o título que los lleve a la entrada en sí.
    Si sabes alguna forma te amaré eternamente.

  18. Estoy peleándome co la imagen destacada ya que por mucho que quiera reducir, siempre me aparece un tamaño enorme y no consigo que me quede al tamaño que yo quiero.
    Me podrías ayudar?

    Gracias de antemano

    Jose

  19. Luciana dice:

    hay alguna función nativa que aplique este tipo de seteo para plugin?

  20. Adonis dice:

    Saludos, excelente foro, bien lo siguiente es porque cuando estoy insertando una entrada y le doy a asignar una imagen destacada me abre una pestaña nueva y anteriormente me salia con un ligt box y es la opcion que quiero seguir utilizando.
    saludos

  21. Foto Fanny dice:

    Hola,

    Estoy desarrollando un blog, para el cual uso WordPress,org (versión 4.7) y el tema LiteMag. Me está generando problemas ya que hay una opción para colocar “top image” (como un banner) en una entrada, sin embargo, al subir el archivo, no se muestra. En la versión demo de la plantilla, se ve correctamente y no sé donde puedo encontrar las especificaciones para que se visualice bien. ¿Alguien me podrían ayudar?

    Saludos

  22. Estefania dice:

    Hola, mi problema es que al subir la foto se selecciona automaticamente una sección que no siempre es la mejor por ejemplo mi texto habla del campo y mi imagen trae cielo y campo y al visualizarla se ve unicamente la parte del cielo , mi pregunta es hay alguna manera de mover la imagen para q se vea la parte que deseo. Muchas gracias uso dara

  23. Jorge dice:

    Hola mi tema no permite ver los pie de fotos en las imagenes destacadas, se puede solucionar eso con algún plugin o editando el CSS del sitio?

    • ceslava dice:

      Hola Jorge,

      Las imágenes destacadas no muestran normalmente el pie de foto. Habría que editar tu tema, mejor con un tema hijo, no es algo que esté oculto y se pueda mostrar con CSS.

      Saludos

  24. Angela dice:

    Hola, gracias por tan interesante aporte.
    Estoy usando el tema Sydney, y mi problema es que tengo definida una imagen destacada en la pagina de inicio, pero me sale una imagen que tenia en la biblioteca de medios, la cual hasta borre, y me continua saliendo.
    Alguna idea de porque podría estar pasando esto?

    • ceslava dice:

      Hola Ángela,

      Necesitaría más información aunque puede ser por dos cosas.

      1. Que estés viendo una versión cacheada de tu sitio
      2. Que hayas eliminado la imagen original pero no la versión de la imagen destacada. Las imágenes destacadas son nuevos archivos que se generan a partir de la original con el tamaño y configuración definida.

      Saludos

      • Angela dice:

        Muy agradecida con tus sugerencias. elimine el cache del navegador, y ahora no me aparece ninguna imagen destacada. Imagino que la que estoy usando esta por debajo de los estándares para mostrarla.

        Así que voy a probar colocando otra imagen destacada con mayor resolución.

        Saludos y que tengas un excelente día.

  25. Natascha dice:

    hola!.. tengo un inconveniente con las imagenes destacadas, cada vez que subo una, sale perfecto pero cuando la chequeo en la web las fotografias me salen cortadas o si es de personas salen enfocadas es ekl torso y no la cabeza, como hago para que la fotografia me salga centrada?

    Muchas Gracias!!

  26. liz dice:

    Necesito de una cuenta premium para hacer esto ?

    • ceslava dice:

      Hola Liz,

      Imagino que te refieres a la versión de wordpress.com y no a wordpress.org

      Si es así la respuesta es sí, la .com está limitada en muchos aspectos, entre ellos la instalación de plugins.

      Saludos

Enlazan a este artículo:

Tu comentario