Dar formato a las miniaturas del feed en WordPress

Desde la aparición de los thumbnails o miniaturas en WordPress casi todo los blogs las han implementado en sus páginas sin mayor problema. Lo que no suele ser tan común es ver esas miniaturas en los feeds con un formato adecuado.

Los RSS no pueden acceder a tu hoja de estilo así­ que por mucho que en tu CSS le hayas dado margen, opacidad, posición en el feed aparece tan solo una imagen y luego el texto. La solución es dar estilo inline. Pero claro esta es una mala práctica para nuestro blog, así­ que lo que haremos es poner un condicional para dar formato sólo a las miniaturas que aparezcan en nuestro feed.

Esto es lo que buscamos | Demo

Este es el feed de pqpq.es y las miniaturas quedan a la izquierda con un margen y un borde. Además aunque el alto del contenido del texto sea mayor de 150px nunca va a meterse debajo de la miniatura evitando así­ las lí­neas huérfanas:

1.- Añadir la función para las miniaturas:

Lo primero es insertar en functions.php esta lí­nea para que podamos utilizar esta función:

if (function_exists(‘add_theme_support’)) { add_theme_support(‘post-thumbnails’); }

De esta forma tendremos la posibilidad de añadir una imagen como miniatura de un post:

2.- Insertar la miniatura en el feed:

function insertrss($content) {
global $post;
$miniatura = the_post_thumbnail(‘thumbnail’); // podemos cambiar el tamaño de la miniatura

$content = ‘<div style=»float:left;»>’ .  $miniatura . ‘<div style=»overflow:hidden;»>’ . $content .  ‘</div></div>’;
return $content;
}

add_filter(‘the_excerpt_rss’, ‘insertrss’); //estos filtros son los que hacen que sólo aparezcan en el feed
add_filter(‘the_content_rss’, ‘insertrss’);

Esta serí­a una opción que insertamos en el archivo functions.php y que insertarí­a la imagen de miniatura al principio de cada artí­culo del feed con el tamaño «thumbnail».

El html con el CSS inline lo utilizamos para dar el formato que queremos, es opcional y lo puedes editar a tu gusto. La propiedad inline overflow que utilizamos en el div contenedor del contenido nos sirve por si queremos que debajo de la miniatura no salga nada. Es opcional y podéis cambiarlo o quitarlo.

3.- Dar formato a la miniatura:

Para dar estilo inline a la miniatura debemos cambiar el atributo $html y lo hacemos con otra función dentro de functions.php.

function miniatura_rss( $html ) {
$html = ‘<div style=»float:left; margin: 0 15px 15px 0; border: 10px solid #E9E9E9;»>’ . $html . ‘</div>’;
return $html;
}

add_filter( ‘post_thumbnail_html’, ‘miniatura_rss’ );

Aquí­ también podrí­amos hacer que la miniatura enlazara con el post

$html = ‘<a href=»‘ . get_permalink( $post_id ) . ‘» title=»‘ . esc_attr( get_post_field( ‘post_title’, $post_id ) ) . ‘» rel=»nofollow»>’ . $html . ‘</a>’;

4.- Especificar que ese código es sólo para el feed:

Añadimos en la segunda lí­nea de la función anterior:

if(!is_feed()) return $html;

Eso es todo, las posibilidades son muchas.

Demos: feed de pqpq | feed de justtellmewhy

(Actualizado: en el sidebar derecho también podéis ver el feed de pqpq con las miniaturas)

Cursos de diseño web en cursos v2b

Para aprender a tu ritmo y desde tu equipo. Todos estos cursos son en formato videotutorial y tienen la garantí­a de video2brain.

• Curso de diseño web y Estilos CSS | Curso de PHP | Curso de JavaScript | Curso TODO Web |Curso Efectos Web

Puedes ver en esta demo más de 12 horas de ví­deotutoriales completamente gratis.

Si estás interesado en más de uno lo mejor es que adquieras una suscripción, acceso a TODOS los cursos de video2brain durante 1 año. Ofertas de suscripción anual:

• Suscripción Anual Online: sólo 189€
• Suscripción TOTAL Online: por 289€ te podrás descargas todos los cursos a tu equipo.

Cursos gratuitos para trabajadores

Los cursos puedes subvencionarlos con las ayudas de la Fundación Tripartita si estás trabajando en España.

Para estos cursos ofrecemos en exclusiva dos opciones:

• 1 curso monográfico (el que tú elijas de todo el catálogo de video2brain), con descarga incluida a tu equipo y con tutorí­as personalizadas
• Suscripción Mensual: si en tu empresa o tú mismo quieres disfrutar de todos los cursos de video2brain durante 1 mes esta es tu opción.

Cualquier duda ponte en contacto, estaremos encantados de atenderte.

Concurso para tuiteros | Gana una suscripción mensual

Hasta el 1 de junio puedes participar enviando un tweet con el enlace al concurso.

¡Suerte!