“Artículos relacionados” en GeneratePress con WP Show Posts

en

Desde que descubrí el tema GeneratePress de Tom Usborne lo he estado usando para proyectos de WordPress para clientes. Y estoy encantado con la ligereza y flexibilidad que te da sin tener que usar page builders.

Como leí recientemente por ahí, sería un equivalente a Genesis 2.0. Pues es robusto y ligero, pero con mucha más flexibilidad a la hora de editar el aspecto básico de todos los elementos.

Además el diseño de la página Blog es muy versátil y te da muchas opciones para ver las entradas, incluso puedes ordenarlos por columnas y al estilo masonry.

Dentro de una entrada en concreto, tenemos la opción de navegar a la siguiente o anterior, pero por defecto no se puede poner una sección de “artículos relacionados” al final de cada una.

Aunque he descubierto un truco muy sencillo usando un plugin del mismo creador del tema que se llama WP Show Posts.

Este sería el resultado final:

Para poder hacer esto necesitamos tener la versión premium de GeneratePress, este ejemplo en concreto se ha realizado con la versión 1.7.2, y habría que seguir 2 pasos:

  1. Crear un shortcode con WP Show Posts que muestre las entradas
  2. Ubicarlo al final de cada entrada usando los hooks de la plantilla

Veamos cómo se hace paso a paso.

Crear un shortcode con WP Show Posts que muestre las entradas:

El plugin WP Show Posts nos permite mostrar las entradas de nuestro blog en cualquier lugar de la web.

Veamos la interfaz del plugin y qué opciones elegir en cada apartado para lograrlo:

1. Entradas:
Tipo de contenido: post | Taxonomía: category | Términos: (Aquí eliges las categorías que están relacionadas con el post) | Entradas por páginas: 4

2. Columnas:
Elige la cantidad de 2

3. Imágenes:
(Activa la opción) | Ancho de la imagen (px): 100 | Altura de la imagen (px): 100 | Alineación de la imagen: izquierda | Ubicación de la imagen: Sobre el título

4. Contenido:
Tipo de contenido: Ningún | Longitud del extracto (palabras): 0 (aunque no importa ya lo que pongas porque hemos dicho arriba que no obtenga ningún extracto) | Incluir título: Activa la opción | Title element: H3

5. Meta:
Todo desactivado.

Ahora cogemos el shortcode que se nos ha generado automáticamente en la derecha de la interfaz de WordPress que tiene este aspecto y lo copiamos:

¿Trabajar en pijama sonaba mejor de lo que es en realidad?, ¿adoras a tu gato pero a veces te gustaría poder consultarle dudas técnicas?, ¿te has tragado una temporada entera…

Tener estilo propio es encontrar tu propia manera de traducir la realidad Qué fácil es decirlo, y qué difícil es definir esa ‘propia manera’. Buscar un estilo propio que haga…

Cuando necesitas simplificar al máximo una idea en un gráfico, hay que crear un icono. Y aunque hay muchos bancos gratuitos como Flaticon, si un cliente necesita algo muy personal…

Pensar en capas Está comprobado que el contenido animado es la mejor opción si necesitas transmitir una idea compleja de una forma sencilla y directa. Pero diseñar una animación requiere…

Ilustraciones personalizadas para el diseño de una web interactiva Proyecto de Museographia – Espacios Expositivos. Proyecto para conmemorar el 400 aniversario de la primera vuelta al mundo. Se realizaron varias…

¿Cuántas veces hemos caído en la trampa de meternos en un proyecto a sabiendas de que no nos da tiempo a resolverlo en los plazos acordados? ¿Será que confiamos demasiado…

Colección de logotipos, diseñados para clientes de diferentes sectores industriales. Download Premium WordPress Themes FreeFree Download WordPress ThemesPremium WordPress Themes DownloadDownload WordPress Themes Freefree download udemy paid coursedownload lava firmwareDownload…

¿Eres diseñador web y a la vez un amante de los gatos?. En vez de trabajar, ves vídeos de gatitos en youtube y juegas con el láser con tu compañero…

Diseño interactivo para pantalla táctil trabajo realizado para Museographia – Espacios Expositivos Diseño y programación de contenido interactivo complementario a una exposición sobre métodos de inoculación del veneno. Este interactivo…

Diseño interactivo para pantalla táctil trabajo realizado para Museographia – Espacios Expositivos Diseño y programación de contenido interactivo complementario a una exposición sobre métodos de inoculación del veneno. El interactivo…


Ubicar el shortcode al final de cada entrada usando los hooks de la plantilla

Ahora tenemos que crear un elemento nuevo de tipo Hook.

Para ello vamos a Apariencia > Elements y en Choose Element Type, seleccionamos Hook:

Veamos los ajustes de configuración en Settings:

  1. Añade un título a este Hook que sea reconocible.
  2. Pega el shortcode

    ¿Trabajar en pijama sonaba mejor de lo que es en realidad?, ¿adoras a tu gato pero a veces te gustaría poder consultarle dudas técnicas?, ¿te has tragado una temporada entera…

    Tener estilo propio es encontrar tu propia manera de traducir la realidad Qué fácil es decirlo, y qué difícil es definir esa ‘propia manera’. Buscar un estilo propio que haga…

    Cuando necesitas simplificar al máximo una idea en un gráfico, hay que crear un icono. Y aunque hay muchos bancos gratuitos como Flaticon, si un cliente necesita algo muy personal…

    Pensar en capas Está comprobado que el contenido animado es la mejor opción si necesitas transmitir una idea compleja de una forma sencilla y directa. Pero diseñar una animación requiere…

    Ilustraciones personalizadas para el diseño de una web interactiva Proyecto de Museographia – Espacios Expositivos. Proyecto para conmemorar el 400 aniversario de la primera vuelta al mundo. Se realizaron varias…

    ¿Cuántas veces hemos caído en la trampa de meternos en un proyecto a sabiendas de que no nos da tiempo a resolverlo en los plazos acordados? ¿Será que confiamos demasiado…

    Colección de logotipos, diseñados para clientes de diferentes sectores industriales. Free Download WordPress ThemesDownload Nulled WordPress ThemesDownload Best WordPress Themes Free DownloadDownload Premium WordPress Themes Freefree download udemy paid coursedownload…

    ¿Eres diseñador web y a la vez un amante de los gatos?. En vez de trabajar, ves vídeos de gatitos en youtube y juegas con el láser con tu compañero…

    Diseño interactivo para pantalla táctil trabajo realizado para Museographia – Espacios Expositivos Diseño y programación de contenido interactivo complementario a una exposición sobre métodos de inoculación del veneno. Este interactivo…

    Diseño interactivo para pantalla táctil trabajo realizado para Museographia – Espacios Expositivos Diseño y programación de contenido interactivo complementario a una exposición sobre métodos de inoculación del veneno. El interactivo…

  3. Completa con algún elemento más como un título <h3> o unas líneas <hr>
  4. En Hook selecciona el lugar donde aparecerán las entradas, en este caso yo elegí before_comments_container
  5. Activa Execute Shortcodes
  6. Activa Execute PHP

Y ahora los ajustes de configuración en Display Rules.

En Location, simplemente seleccionamos Entrada Categoría en el desplegable y elegimos qué tipo de categoría queremos que se muestre.

Lo normal aquí sería elegir artículos de temática similar:

Y con esto ya tendremos al final de cada entrada de nuestro blog un espacio con enlaces a artículos similares para facilitar al usuario la continuación en nuestra web.


También puede interesarte:


2 comentarios en ““Artículos relacionados” en GeneratePress con WP Show Posts”

Deja un comentario