Entradas relacionadas con miniatura sin plugins

guru del código

Las entradas relacionadas son un modo estupendo de atraer a tus lectores hacia otras publicaciones de temática similar, aumentando la fidelidad y permanencia en tu web de los visitantes, así que es un elemento fundamental y casi obligatorio en cualquier sitio.

Si le sumamos una atractiva miniatura de imagen que le de mayor visibilidad a las entradas relacionadas mejor que mejor ¿no?

Pues bien, cómo ya hemos visto en otras ocasiones cómo mostrar entradas relacionadas con código, o uno de los mejores plugins para mostrar entradas relacionadas con miniatura, hoy rizamos el rizo y unimos ambas posibilidades.

posts-relacionados-con-miniatura

Para mostrar entradas relacionadas con miniatura sin plugins hay 3 pasos fundamentales, a saber … 

1. Añadir soporte de miniaturas al tema

Esto ya lo hemos visto varias veces pero lo repasamos por si no lo has añadido ya. Para ello añade al fichero functions.php de tu tema la siguiente línea, con la que le añadimos soporte de miniaturas de entrada:

Y además, siempre es conveniente definir los tamaños de miniatura adaptados lo mejor posible al diseño:

A partir de ahí solo tienes que acordarte de que en cada entrada definas una “Imagen destacada” desde la “meta box” del editor así denominada.
imagen destacada

2. Añadir el código al loop

En el loop del archivo single.php debemos añadir el código que mostrará las entradas relacionadas. El sitio ideal sería antes de la llamada a los comentarios, que identificarás por el siguiente código:

El código sería algo así:

Básicamente, lo que hace el código anterior es identificar las tags en que está etiquetada la entrada actual para, a continuación, mostrar otras entradas etiquetadas con las mismas tags, excluyendo la entrada actual, que identifica por su ID único. en la línea 14 definimos el número de entradas a mostrar (en el ejemplo 4), que puedes cambiar a tu gusto.

3. Añadir estilos mediante CSS

Ahora bien, lo anterior no quedaría bonito ni atrayente si no creamos unas clases CSS adecuadas, que atraigan atención y coloquen las entradas relacionadas de manera ordenada.

Por tanto, y usando las mismas denominaciones de clases CSS de ejemplo usadas en el código previo, habría que crearlas en la hoja de estilos de tu tema activo, habitualmente el archivo style.css.

Lógicamente, es solo un ejemplo, y debes adaptarlo a los estilos generales de tu tema o tus gustos personales …

Lo que hace este CSS de ejemplo es mostrar las miniaturas con un ancho de 150 pixels, lo que significa que para un ancho del bloque principal de 640 pixels mostraría 4 entradas, márgenes incluidos. Por descontado que debes ajustar esto a tus necesidades, reduciendo el valor .miniaturarelacionada a 125 pixels si quieres 5 miniaturas, por poner un ejemplo. No digamos si el ancho del bloque de la entrada de tu tema WordPress es menor de 640 pixels.

También, y para terminar, es importante que definas el ancho de las miniaturas en los ajustes multimedia de WordPress al mismo tamaño especificado en el CSS que, además, debe coincidir con el tamaño definido en el código php en the_post_thumbnail(array(150,100).

Por lo demás funciona de maravilla, siempre y cuando etiquetes tus entradas claro, sino verás un feo espacio en blanco.

AVISO: esta publicación es de hace dos años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.

Valora este artículo para mejorar la calidad del blog ...

FlojitoNo está malEstá bienMe ha servidoFantástico (7 votos, promedio: 5,00 de 5)
Cargando…

Autor: Fernando

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran.Autor del libro WordPress - La tela de la araña. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera.

Comparte esta entrada en
468 ad

ESTA WEB UTILIZA COOKIES PARA OFRECER LA MEJOR EXPERIENCIA POSIBLE. SI SIGUES NAVEGANDO DAS TU CONSENTIMIENTO PARA LA ACEPTACIÓN DE COOKIES Y NUESTRA POLÍTICA DE PRIVACIDAD más información

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar