7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Creative Coding

Ampliar el feed RSS predeterminado de WordPress

Scroll to top
Read Time: 15 mins

Spanish (Español) translation by Trix (you can also view the original English article)

Es posible que en ocasiones tengas que mejorar tu presencia online y llegar a una audiencia más amplia enviando tu contenido fuera de tu sitio web. Por ejemplo, podrías querer que tus entradas estén disponibles en la mayoría de agregadores de redes sociales, o en dispositivos móviles, o publicar podcasts de audio o vídeo en tiendas digitales.

En la mayoría de estos casos, es necesario personalizar la fuente RSS añadiendo metadatos personalizados para posibilitar su publicación.

En este tutorial veremos cómo lograr este objetivo para dos importantes plataformas: Flipboard e iTunes Store, pero el código también se puede personalizar fácilmente para otras plataformas y servicios web.


Introducción

Flipboard es una aplicación para agregar contenidos procedentes de redes sociales para dispositivos Android e iOS que periódicamente extrae contenido de tu sitio web y lo presenta en formato de revista de manera que tus usuarios móviles puedan leer tus noticias a través de la app instalada en sus smartphones o tabletas. iTunes Store es una tienda online de productos digitales en la que puedes publicar tus podcasts de audio o vídeo.

La suscripción a ambos servicios es gratuita pero sujeta a aprobación, especialmente en el caso de Flipboard, que sólo parece aceptar sitios web que cuenten con un cierto número de lectores.

Ambos te permiten publicar contenido a través del feed RSS de tu blog, pero esta debe cumplir con sus especificaciones. Por fortuna WordPress permite que los desarrolladores modifiquen la estructura predeterminada del feed RSS.


Paso 1 La estructura predeterminada del feed RSS de WordPress

Por defecto, WordPress viene con varios feeds. En este tutorial usaremos el feed RSS 2.0 disponible en http://example.com/?feed=rss2 o http://example.com/feed/ si es que estás usando permalinks. Este feed es un sencillo documento XML estructurado de la siguiente manera:

Como puedes ver, cada elemento <item> representa una entrada y contiene varios subelementos, cada uno de ellos relacionado con ese “componente” entrada. Los principales son:

  • <title> es el título de la entrada
  • <link> es el permalink de la entrada
  • <pubDate> es la fecha de publicación de la entrada en formato RFC822
  • <dc:creator> es el nombre del autor de la entrada
  • <dc:category> es un subconjunto de elementos, uno para cada categoría de la entrada
  • <description> es el extracto de la entrada sin etiquetas HTML
  • <content:encoded> es el contenido completo de la entrada con etiquetas HTML

Paso 2 Personalizar el feed RSS para Flipboard

Según los requisitos técnicos de Flipboard, es posible mejorar el contenido.

proporcionando más elementos semánticos dentro del código del artículo, añadiendo la posibilidad de especificar citas, presentaciones de diapositivas ("slideshows"), y otros elementos de diseño

Estos elementos semánticos adicionales son:

  • Título y subtítulo
  • Citas
  • Recursos de imagen, vídeo y audio
  • Presentaciones de diapositivas ("slideshows")
  • Información geográfica

Podemos implementar estos elementos semánticos en nuestro feed RSS a través de un plugin. Como ya he mencionado, WordPress proporciona ganchos concretos que te permiten modificar la estructura predeterminada del feed RSS:

  • rss2_ns - permite añadir nuevos espacios de nombres o “namespaces” dentro del elemento raíz XML
  • rss2_head - permite añadir etiquetas en la cabecera del feed;
  • the_content_feed - permite modificar el contenido de cada entrada que aparece en le feed;
  • rss2_item - permite añadir nuevos subelementos a cada elemento <ítem> (post);

Crea un nuevo archivo llamado flipboard-feed.php, ábrelo en tu editor de texto favorito y pega este encabecezado de plugin:

Copia el archivo en tu directorio /wp-content/plugins/ y actívalo desde la página de administración de plugins de tu WordPress.

Título y subtítulo

Si quieres añadir un título y un subtítulo justo antes del contenido de la entrada, tienes que añadir algo como esto:

También podrías añadir esto manualmente en el contenido de la entrada, desde el editor de texto, pero no sería una solución ideal porque entonces estas etiquetas también se mostrarían en tu sitio web (a menos que ocultes el elemento hgroup a través de un estilo CSS). Por tanto, para automatizarlo y mostrarlo sólo en el feed RSS, es mejor usar el título de la entrada en el elemento <h1> y un campo personalizado para el subtítulo <h2>.

Si editas un página de entrada, añade un campo personalizado flipboard_subtitle.

Añade estas líneas a nuestro plugin Flipboard RSS Feed:

Ahora, si publicas la entrada y refrescas la página de tu feed RSS, verás la etiqueta hgroup justo antes del contenido de la entrada.

Extraer citas

Para extraer citas puedes usar en el contenido tu entrada la etiqueta <blockquote> para destacar algunas partes del texto. Podemos aprovechar el plugin para reemplazar <blockquote> por la etiqueta <aside>.

Añade estas líneas al plugin Flipboard RSS Feed:

Refresca la página de tu feed RSS, ahora verás la nueva etiqueta <aside>.

Imagen

Para todos estos elementos, seguiremos otro método sugerido por Flipboard: en lugar de colocar los elementos semánticos directamente en el contenido de la entrada, añadiremos un nuevo subconjunto de elementos RSS para medios dentro del elemento <item>.

Media RSS es una extensión RSS que mejora la publicación de archivos multimedia en los feeds RSS. Los archivos de imagen, vídeo y audio y sus metadatos pueden ser incluidos en feeds RSS gracias a sus elementos especiales.

En nuestro caso, usaremos el principal de todos ellos: <media:content>.

Además, también necesitamos la extensión GeoRSS para poder usar información geográfica, así que tenemos que añadir los namespaces al feed RSS para que sea válido.

Añade estas líneas a nuestro plugin Flipboard RSS Feed:

Y el resultado será:

Ahora queremos añadir en nuestro feed RSS todas las imágenes adjuntadas a nuestras entradas. Tenemos que hacer algo como lo siguiente:

El elemento <media:content> admite dos subelementos: <media:description> es el pié de foto usado para la imagen y en WordPress es el título de la imagen, mientras que <media:copyright> contiene la información sobre los derechos de autor o los créditos del autor de la imagen.

Ahora, lo implementaremos en nuestro feed de WordPress. Crea una entrada y adjunta algunas fotos en ella (observa que las imágenes deben tener al menos 400px en su lado más corto):

Publica la entrada, después añade estas líneas en nuestro plugin Flipboard RSS Feed:

Refresca tu página de feed RSS, comprobarás como aparece ahora el elemento <media:content> para cada imagen adjuntada.

Una breve nota sobre el elemento <media:group>: puede usarse para proporcionar recortes y tamaños de la misma imagen, por ejemplo versiones en orientación vertical u horizontal.

Video

Para los archivos de vídeo Flipboard nos sugiere que usemos este código:

Aquí tenemos un nuevo subelemento: <media:thumbnail>: simplemente especifica una imagen de previsualización para el vídeo. Esto puede ser un poco confuso ya que necesitamos una forma de crear una conexión directa entre el vídeo adjuntado y su imagen de previsualización e indicarle a WordPress que los dos archivos están conectados. Podemos proceder de la siguiente forma:

  1. Añade una nueva entrada y adjunta en él uno o más vídeos o audios.
  2. En la página de la Biblioteca de medios, carga la imagen de previsualización para el vídeo, anota las dimensiones de la imagen y copia la URL del archivo.
  3. Localiza el vídeo en la Biblioteca de medios, edítalo y pega la URL de la imagen en el campo Descripción y añade también la anchura y la altura de la imagen, cada uno de ellos separados por el carácter “|”. Esto es necesario para establecer las dimensiones correctas de la imagen.

Ahora es el momento de colocar el vídeo en nuestro feed RSS. Añade estas líneas en nuestro plugin Flipboard RSS Feed:

Y aquí tienes el resultado final:

Audio

El código de Flipboard para archivos de audio es:

Como puedes ver, es prácticamente idéntico al del video: así que adjunta la previsualización de la imagen al archivo de audio, podemos usar el mismo método que seguimos para los vídeos.

Así que, añade estas líneas a nuestro plugin:

Pases de diapositivas (slideshows)

Para añadir todas las imágenes adjuntadas a una entrada mediante un slideshow debemos añadir un fragmento de código HTML en el contenido de la entrada del feed RSS:

Añade estas líneas a nuestro plugin:

Y este es el resultado:

Información geográfica

Para mostrar información geográfica podemos usar un campo personalizado tal y como hicimos para el subtítulo hgroup.

Así que, en la página de edición de tu entrada, añade un campo personalizado flipboard_geo y establece el valor con un formato similar a este: 45.256 -71.92 (puedes consultar una listado completo de las etiquetas válidas en la documentación GeoRSS).

Añade estas líneas al plugin Flipboard RSS Feed:

Envía tu feed a Flipboard

Una vez tengas listo el feed RSS, podrás solicitarle a Flipboard que lo incluya en sus fuentes de noticias: tendrás que contactar con el equipo de Flipboard vía email, incluyendo la URL de tu feed RSS, Twitter, Facebook y detalles sobre el sitio web. El equipo revisará toda la información y te dará una respuesta transcurridos 5 días hábiles.


Paso 3 Personaliza el feed RSS para tus podcasts en iTunes

Para publicar nuestro podcast de audio o vídeo en iTunes de Apple, tenemos que formatear el feed RSS conforme a las especificaciones técnicas de iTunes mediante un nuevo plugin:

Crea un nuevo archivo llamado itunes-feed.php, ábrelo en tu editor de texto favorito y pega lo siguiente:

Copia el archivo en tu directorio /wp-content/plugins y actívalo en la página de administración de Plugins de WordPress.

Namespace de iTunes

Para añadir el namespace de iTunes y compatibilidad sus meta etiquetas específicas, podemos usar el filtro rss2_ns:

Etiquetas de cabecera de iTunes

El siguiente paso consiste en añadir distintos datos que ayudarán a que iTunes categorice mejor tu feed en su tienda y que muestre información detallada sobre tu canal de podcast.

Podemos añadir toda esta información a través del filtro rss2_head:

Para ser más breves en este tutorial, nuestro ejemplo es estático. Puedes codificar toda la información manualmente en el código fuente del plugin. Si prefieres hacerlo dinámico, puedes crear una Página de Opciones que gestione toda esta información (consulta también el artículo Handling Plugins Options in WordPress 2.8 with register_setting() de Ozh).

Etiquetas de entrada para iTunes

Para cada entrada, iTunes requiere el empleo de algunas etiquetas adicionales:

Podemos gestionar parte de esta información de la siguiente manera:

  • author: usaremos el autor de la entrada
  • subtitle: usaremos el título del archivo adjunto de la entrada
  • summary: usaremos el pié de foto del archivo adjunto
  • duration: usaremos la descripción del adjunto
  • keywords: usaremos las etiquetas de la entrada

Escribe una nueva entrada, añade un título, algo de contenido y algunas etiquetas. Después, adjunta un archivo de audio a la entrada.

Después de subir el archivo, añade otra información: título, leyenda o pié de foto y usa el campo Descripción para especificar la duración.

Añade una imagen destacada para la entrada, y por último, publícala.

Ahora, añade estas líneas en nuestro plugin itunes-feed.php:

Por último, publica la entrada y refresca la página de la fuente del feed RSS.


En conclusión

Aunque este tutorial cubre dos importantes plataformas, gracias a los ganchos de WordPress es posible personalizar el Feed RSS predeterminado y adaptarlo a otras aplicaciones web externas. Para cada entrada puedes adjuntar información adicional usando nuevas extensiones, o puedes mejorar el contenido de la entrada proporcionando código HTML adicional para adherirte a los requisitos de todas las plataformas en las que desees publicar tu contenido.


Referencias

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.