Cómo añadir entradas relacionadas en WordPress con GeneratePress

En este tutorial, vas a aprender cómo añadir y mostrar las entradas relacionadas a un artículo.

Después de un post siempre es bueno proponer a tus visitantes que lean otros artículos relacionados con el tema que acaban de leer.

Primero para ofrecerles más información en relación a su intención de búsqueda en Google antes de entrar en tu sitio web. Pero también si se quedan en tu sitio para visitar otras páginas, se reduce la tasa de rebote, que es un factor importante del SEO.

Te voy a mostrar cómo hacerlo con el tema GeneratePress y su versión premium. Lee mi guía si quieres saber si vale la pena comprarla.

GeneratePress es un tema gratuito y ligero que puede ser ampliado mediante la instalación de un plugin Premium que permite añadir muchas características y funciones. Es un tema receptivo personalizable y bien codificado construido con un enfoque en la velocidad y la usabilidad.

Una de las muchas cosas que puedes hacer con el plugin premium de GeneratePress es usar los Elementos Hook para enganchar tu propio código personalizado en varias áreas del tema sin cambiar los archivos del tema principal.

Si has navegado por mi sitio y otros artículos, notarás que tengo entradas relacionadas bajo todos los artículos. Desafortunadamente, esto no es algo que venga por defecto con el tema GeneratePress. Pero hay formas de hacerlo utilizando el plugin WP Show Posts y los elementos de GeneratePress que forman parte de la versión de pago.

Añadir una lista de entradas relacionadas con el plugin WP Show Posts

Para mostrar las entradas relacionadas en el tema GeneratePress, estoy usando el plugin WP Show Posts y los módulos de elementos del tema.

El plugin WP Show Posts es desarrollado por Tom Usborne, la persona detrás del tema GeneratePress. Así que se enfoca en la ligereza y la buena codificación, por lo tanto, sin comprometer la velocidad de la página web puedo usar este plugin.

Una vez instalado y activado, ve en WP Show Post en la barra lateral y haz clic en Añadir nuevo.

Tomaré como ejemplo este artículo que es parte de la categoría GeneratePress, por lo que nombraré esta lista Artículos relacionados generatepress. Por supuesto puedes nombrarla como quieras.

Añade un título y luego vamos a configurar esta lista.

En Tipo de contenido, elige post y en Taxonomía, category. Aparecerá Términos y podrás elegir cual categoría. Por último, puedes elegir cuantos Entradas por página quieres, te recomiendo que no superes 3 para obtener un mejor renderizado.

Dentro de los ajustes de las Columnas asegúrate de que el número de columnas sea igual al número de posts del paso anterior.

Por defecto el Grosor de las columnas es de 2em, puedes dejarlo así y ver cómo te parece una vez que está en línea. Y luego volver acá para cambiarlo si no te gusta.

Después, la sección de las Imágenes es un poquito engañosa para la optimización de tu página web. Si lo dejas vacío tendrás problemas sobre el Serve scaled images y eso no le gusta a Google. Puedes comprobarlo en GTmetrix y la herramienta de Google: PageSpeed Insights.

Entonces tienes que poner el Ancho de la imagen en px más cerca del renderizado en tu página web.

Cuando subes imágenes en tu sitio web, WordPress crea automáticamente copias. Eso puedes verlo en Ajustes > Medios. Si no has tocado nada entonces el Tamaño medio será de 300×300.

Por eso te aconsejo que escribes 300 en ancho de la imagen. Será el tamaño de imagen más cerca de lo que aparecerá en tu página web, en mía puedes ver que es 270px.

Luego puedes elegir la Alineación de la imagen y su Ubicación en relación con el título.

Al lado de las imágenes queremos Contenido entonces en la próxima sección elige lo que quieres.

Elegí de solo tener el título, entonces en Tipo de contenido he seleccionado Ningún y marqué la casilla Incluir título. El Title element como un h4 pero puedes elegir otro nivel.

Y por último no toques el resto a menos que quieras agregar un botón leer más, pero pienso que no vale la pena. 

En la sección Meta, también puedes elegir las opciones que quieras. Prefiero dejar vacío para no saturar la pantalla.

Finalmente, en Más ajustes asegúrate de habilitar la opción Excluir actual. Esto asegurará que el artículo que se está leyendo actualmente no aparezca en las entradas relacionadas.

No tienes que preocuparte por el resto de las configuraciones.

En este momento puedes publicar la lista WP Show Posts que acabas de crear.

¡Ojo! Recuerda tu Shortcode Post Id, es necesario más adelante. Acá es wp_show_posts id=”3707” pero tuyo tendrá otro número.

Mostrar las entradas relacionadas mediante el módulo Elements de GeneratePress

Para que la lista creada con WP Show Posts sea visible en tu página web tienes que implementarla en un espacio determinado.

Entonces vamos a utilizar el módulo Elements del plugin GeneratePress Premium para crear un Hook.

1 – Crea un elemento Hook

Para este método, necesitas habilitar el módulo de Elementos en la configuración del tema Premium de GeneratePress.

Apariencia > GeneratePress > Módulos > Elementos > Activar

De la misma manera que para las migas de pan, el primer paso es crear un nuevo elemento Hook. Ingresa a tu área de administración de WordPress y haz clic en Apariencia > Elementos en la barra izquierda y luego haz clic en Añadir un nuevo Elemento arriba y selecciona Hook en la lista desplegable.

En la pantalla que sigue, puedes editar tu nuevo elemento Hook.

2 – Añade tu Shortcode

Agrega un título a este gancho, en este ejemplo Artículos relacionados generatepress.

En el cuadro de edición, copia y pega el Shortcode.

Ahora tienes 2 opción. Si copias solamente el Shortcode wp_show_posts id=”3707”, entonces aparecerá en tu página web solamente las configuraciones que hicimos. Y eso en este caso son las imágenes y los títulos.

Pero quería agregar un título a este bloc de artículos relacionados, entonces añadí un poco de código para agregar Artículos relacionados como título.

Nombré esta class "wpsp-gp" para que sea personal si quiero modificarla con CSS. Es lo que veremos luego.

Si quieres copiar este código:

<div class="wpsp-gp">
    <h3>Artículos relacionados</h3>
    [wp_show_posts id="3707"]
</div>

3 – Configura los ajustes del Hook

Abajo en la pestaña de Ajustes, puedes elegir la ubicación del gancho y tendrás que marcar la casilla Ejecutar Shortcodes.

Quería que mis posts relacionados se colocaran encima del contenedor de comentarios, así que me fui con el hook generate_before_comments_container.

Puedes elegir dónde quieres añadir tu bloc con la ayuda de esta guía visual de GeneratePress. Encontrarás la lista de dónde se pueden implementar los ganchos.

En la pestaña Reglas para Mostrar, puedes seleccionar dónde se mostrará la lista (y dónde no).

Junto a Posición, selecciona Entrada Categoría y la categoría que te interesa, en este ejemplo GeneratePress.

Eso hará que tu lista se mostrará solamente en las entradas del blog de una categoría en particular.

Haz clic en el botón Publicar para poner tu lista en línea.

Cambiar el estilo de las entradas relacionadas usando CSS

Ahora, vamos a dar un poco de estilo a las entradas relacionadas usando CSS.

Ve a Apariencia > Personalizar > CSS adicional. Para cambiar el estilo tendrás que utilizar el nombre de class que diste a tu código. En este ejemplo el CSS será como sigue:

.wpsp-gp {
    background-color: #fff;
    padding-left: 20px;
    padding-right: 20px;
}

Es un CSS muy básico, puedes ajustar el estilo según tus necesidades.

Conclusión

Espero que este artículo para añadir y mostrar artículos relacionados en WordPress con el tema GeneratePress te ayudó.

Si quieres mostrar las últimas entradas y no solamente las relacionadas a una categoría entonces sigue los mismos pasos sin elegir una categoría, así de simple.

Espero que hayas encontrado útil este artículo y si te gustó no dudes en compartirlo en las redes sociales. Y si tienes alguna pregunta, pregúntame en los comentarios.