Cómo incluir la imagen destacada de WordPress en el RSS

Este post está enfocado a personas que tengan un WordPress autoalojado o que tengan algún tipo de instalación premium que les permita añadir código php a su tema.

La motivación de escribirlo es que en Desvania (un nuevo blog que está empezando a andar y que estoy construyendo junto con mis dos mejores amigas) nos encontramos el problema de que debido al tema que estamos usando como base, nuestros feeds de RSS en algunos lectores populares no contenían la imagen destacada, sino la primera que aparecía

Y diréis ¿y eso pa qué? pues para que en sitios como Bloglovin’ o Feedly, que se basan en los feeds de RSS (esto es un feed y lo tienen todos los WordPress), la imagen que se muestra como destacada sea realmente la que hemos puesto nosotros, y no la primera que sale en el contenido, que no tiene por qué ser la que nos interese mostrar. En este tema que tengo yo puesto la imagen destacada la tengo que subir al interior de cada post si quiero que se vea, pero el Sparkling, que es el que usamos en Desvania, la pone automáticamente.

Entonces, si tenemos este «problemilla» ¿Qué es lo que tenemos que hacer para incluir la imagen destacada de WordPress en el RSS de nuestro blog?

1. Temas hijos

Internet está lleno de listas pasos para crear temas hijos (Aquí las indicaciones oficiales). Trabajar sobre temas hijos en lugar del tema que te instalas tiene la ventaja de que, cuando actualizas el tema de WordPress, no vas a perder tus modificaciones. Es algo que siempre recomiendo hacer si es posible (aunque algunos temas lo ponen difícil).

Personalmente considero un requisito el tener un tema hijo activo antes de hacer cualquier modificación.

2. Añadir el filtro en functions.php

En WordPress, muchas de las funciones que se crean se llaman «filtros», porque procesan contenido existente.

Para poder escribir el código accedemos a Apariencia->Editor, que nos abrirá la pantalla de edición de archivos de nuestro tema. A la derecha aparecen una lista de archivos del tema. Si es un tema hijo, probablemente haya poquitos… 

Necesitamos localizar el archivo functions.php para colocar ahí nuestro filtro. Si no está presente deberemos crearlo dentro de la carpeta de nuestro tema hijo. Una vez lo tenemos abierto, podemos escribir lo siguiente (versión con comentarios explicativos a continuación, después pongo una sin ellos por si no os interesan ;) )

<?php

/**
 * Añade la imagen destacada al RSS 
 * Este tema no necesita esta feature, ya que al no incluir en la pagina 
 * de post la featured image la he de poner a mano
 */
function imagenDestacadaEnRSS($content) {
  // Accedemos a la información del post sobre el que se ejecuta el filtro
  global $post;
  // Comprobamos si este post que se está procesando tiene imagen destacada
  if ( has_post_thumbnail( $post->ID ) ){
    // Si la tiene, la extraemos coon get_the_post_thumbnail en tamaño 
    // "large" (podemos elegir otro tamaño como "medium" o "thumbnail" 
    // si nos interesa más.
    // El style indica el CSS que se aplicará a la imagen destacada, en 
    // este caso la quiero centrada y con 15px de margen debajo
    $content = '<div>' . get_the_post_thumbnail( $post->ID, 'large', array( 'style' => 'float:none; text-align: center; margin-bottom: 15px;' ) ) . '</div>' . $content;
  }
  // devolvemos el contenido procesado
  return $content;
}

// añadimos esta función como filtro al the_excerpt_rss, función 
// encargada de generar el rss cuando está configurado en modo 
// "sólo mostrar el resumen"
add_filter('the_excerpt_rss', 'imagenDestacadaEnRSS');
// y también se la añadimos a la función encargada de generar el 
// rss cuando está configurado en modo "contenido completo"
add_filter('the_content_feed', 'imagenDestacadaEnRSS');

?>

Versión sin comentarios:

<?php

/**
 * Añade la imagen destacada al RSS 
 * Este tema no necesita esta feature, ya que al no incluir en la pagina 
 * de post la featured image la he de poner a mano
 */
function imagenDestacadaEnRSS($content) {
  global $post;
  if ( has_post_thumbnail( $post->ID ) ){
    $content = '<div>' . get_the_post_thumbnail( $post->ID, 'large', array( 'style' => 'float:none; text-align: center; margin-bottom: 15px;' ) ) . '</div>' . $content;
  }
  return $content;
}

add_filter('the_excerpt_rss', 'imagenDestacadaEnRSS');
add_filter('the_content_feed', 'imagenDestacadaEnRSS');

?>

Guarda los cambios y… ¡ya estaría todo listo! Tus nuevos posts deberían mostrarse correctamente. Aunque hay que tener en cuenta que Bloglovin’ últimamente va bastante mal (parece que han crecido demasiado en poco tiempo y eso le ha pasado factura a sus infraestructuras).

Puedes comprobar que los cambios han tenido efecto accediendo a laUrlDeTuBlog/feed/ y mirando en la estructura si está por ahí la imagen al principio de cada texto de post.

Etiquetas:

14 pensamientos sobre “Cómo incluir la imagen destacada de WordPress en el RSS”

  1. Gracias Myddna. Tu código me ha sido de ayuda.
    ¿Como puedo hacer para que en vez de la imagen destacada (a veces tiene tamaño desigual) aparezca la miniatura (thumbnail)?
    Gracias y saludos

    1. Hola José!

      Me alegro un montón que esta entrada te haya ayudado :D

      Si lo que quieres es que sea tu imagen destacada pero en modo miniatura, lo que tienes que hacer es sustituir en la llamada a get_the_post_thumbnail la palabra ‘large’ por la palabra ‘thumbnail’.

      Si el thumbnail por defecto te resulta demasiado pequeño, tienes la opción de definirte un tamaño personalizado por ejemplo con el plugin Simple Image Sizes https://wordpress.org/plugins/simple-image-sizes/ Puedes especificar ancho/alto/ si la imagen se recorta o no… Es muy útil :)

        1. En ese caso hay que cambiar un poco los estilos ;) En lugar de:

          ‘float:none; text-align: center; margin-bottom: 15px;’

          Habría que poner, por ejemplo:

          ‘float: left; margin-right: 15px; margin-bottom: 15px;’

    1. Pues no conozco el tema Avada, pero tiene una comunidad amplia de usuarios. Yo probaría primero por allí, porque igual tiene alguna limitación/característica que impida que el código funcione :)

  2. Por si alguno aún seguís por aquí (o recibís notificaciones de este hilo), los problemas con alineación o de imágenes que no se vean pueden deberse a que el lector de feeds que utilicéis no sea compatible con los mismos.

Deja un comentario

You have to agree to the comment policy.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.