Agregar páginas o publicaciones relacionadas a WordPress, sin plugins

La función de Paginas o publicaciones relacionadas (Relateds posts), es una de las más demandadas y populares en los sitios con WordPress.
Es un widget o bloque del post, generalmente al final, donde se muestra el título y en ocasiones una miniatura y descripción, de otros artículos con contenido relacionado, lo que ayuda a que los lectores se mantengan navegando en el sitio.
En los blogs del servicio gratis de WordPress.com, esta función está integrada, pero los que usamos WordPress.org necesitamos de alternativas para disponer de ella.

¿Cómo mostrar las páginas relacionadas en mi blog?

Hay gran cantidad de plugins que habilitan la función de páginas o publicaciones relacionadas, algunos de ellos muy sofisticados, pero no son necesarios en lo absoluto.
Podemos insertarla manualmente con solo unas líneas de código.
Las ventajas de esta opción son varias: librarse de estar pendientes de las actualizaciones regulares de estos plugins, evitar los riesgos de seguridad que siempre suponen y no retardaremos la velocidad de carga de las páginas, debido al exceso de código adicional.
En esta publicación explico cómo insertar manualmente la función de páginas relacionadas, del mismo modo que la empleo en este blog.

¿Cómo se detectan y escriben las páginas relacionadas?

El método consiste de un script que efectúa una consulta (query) en el contenido y escribe de cada una de las entradas encontradas el título, una miniatura que representa dicha página, una corta descripción y su enlace.
Para obtener el resultado se vale del contenido de las etiquetas o “tags”, que poseen estas entradas.
Por supuesto es imprescindible haber agregado las etiquetas correctas a cada publicación.
También es necesario habilitar la imagen destacada en cada una de ellas, para poder mostrar las miniaturas.
A continuación explico cómo insertarlo y como personalizarlo de acuerdo a nuestras necesidades y gustos.

Código para escribir las páginas relacionadas en WordPress

Agrega el siguiente código en el interior de una copia del archivo de plantilla “single.php”, situado en el interior de la carpeta Child.
Debe ir exactamente antes de la etiqueta de cierre </main>.
En caso de que se haya agregado los botones sociales de compartir, como publiqué en otro artículo, el código puede ir encima de ellos o abajo, de acuerdo al gusto de cada cual.

<?php
$tags = wp_get_post_tags($post->ID);
if ($tags) {
	$tag_ids = array();
	foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;	
	$args=array(
		'tag__in' => $tag_ids,
		'post__not_in' => array($post->ID),
		'showposts'=>3, 
		'ignore_sticky_posts'=>1
	);	
	$my_query = new wp_query($args);	
	if( $my_query->have_posts() ) {
		echo '<h3>P&#225;ginas relacionadas</h3>';
		while ($my_query->have_posts()) {
			$my_query->the_post();			
		?>
<div class="relatedcuadros"><a href="<?php the_permalink() ?>" rel="bookmark" target="_blank" title="<?php the_title_attribute(); ?>"><?php $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' ); ?><img src="<?php echo $thumbnail['0']; ?>" alt="<?php the_title(); ?>" /><br><?php the_title(); ?></a></div>
<?php
		}
echo '<div style="clear:both;"></div>';
}}
wp_reset_query();
?>

¿Cómo funciona el script de páginas relacionadas?

El script carga los thumbnails o miniaturas, usando el alias “médium”, que en este tema (Twenty Seventeen) poseen una medida de 300 x 180 pixeles.
Estas miniaturas se alinean mediante CSS a todo lo ancho en el modo escritorio y se adaptan automáticamente al ancho de cualquier contenedor.
En el modo para móviles se sitúan en forma de bloque y las imágenes se expanden a todo su ancho, adaptándose a la pantalla de cualquiera de estos dispositivos.
Se pueden hacer modificaciones si se desean cargar más miniaturas o que sean de mayor tamaño, lo que explico más abajo.

Código del CSS de los bloques de páginas relacionadas

Agrega las siguientes instrucciones al archivo de estilo “style.css”, como en el caso anterior situado en la carpeta Child.

.relatedcuadros {width: 100%;height: 100%;text-align:center;margin:12px 0 0px 0;}
.relatedcuadros a {color :#333; text-decoration: none; display:block; line-height: 1.2em;}
.relatedcuadros a:hover {background-color:#ffffff;}
@media screen and (min-width: 48em) {
.relatedcuadros {float: left;width: 32%;}
.relatedcuadros a {font-size:0.9em;}
}

Código para cargar las miniaturas correctas

Finalmente agrega las siguientes líneas al archivo de configuración “functions.php”.
El objetivo es lograr que se carguen correctamente las miniaturas del tamaño especificado y evitar la inserción innecesaria adicional de etiquetas SRCSET.

add_filter( 'post_thumbnail_size', function( $size )
 {
     if( is_string( $size ) && 'medium' === $size )
         add_filter( 
             'wp_calculate_image_srcset_meta',  
              '__return_null_and_remove_current_filter' 
         );   
    return $size;
 } );

Personalizar el estilo de las páginas relacionadas

Los que deseen en vez de tres miniaturas usar más de ellas o aumentar su tamaño, pueden hacerlo de la siguiente forma:
Por ejemplo, para mostrar 4 miniaturas alineadas en dos hileras en el modo escritorio, es necesario especificar en el código en ” single.php”, en la propiedad “showposts” el valor 4.
Para mostrar en ese caso miniaturas de mayor tamaño, especifica en la función “the_post_thumbnail” el alias “médium_large”.
De esta forma se cargaran imágenes de 768 x 461 pixeles.
En la siguiente imagen se puede ver una captura de ejemplo.

Para que se muestren correctamente necesitamos en la hoja de estilo CSS, modificar el valor del ancho (width), en la regla “relatedcuadros” a 48%, en el modo escritorio.

Tamaño de las miniaturas o thumbnails en WordPress

El tamaño de las miniaturas o thumbnails en WordPress, pueden diferir de acuerdo al tema empleado.
El valor de su ancho y altura máxima en pixeles, se define el panel Medios, del Escritorio.
WordPress emplea alias para distinguir cada una de ellas.
En el tema Twenty Seventeen son los siguientes, con su valor en pixeles.
Este método podemos modificarlo a nuestro antojo y obtener como resultado mostrar las páginas relacionadas, a nuestro gusto, como si usáramos un plugin profesional, pero con las ventajas que supone.

Otras páginas relacionadas

✓ Como modificar y personalizar mi tema de WordPress
✓ Como usar y configurar WordPress sin plugins
✓ Convertir los enlaces externos en NoFollow en WordPress


Comparte

Sígueme en las redes sociales