X

Entradas relacionadas mejoradas sin plugins en WordPress

En un artículo anterior vimos cómo mostrar entradas relacionadas sin plugins basadas en categorías o etiquetas, sin embargo en algunos casos es posible que quieras asignar adicionalmente entradas relacionadas específicas para un artículo.

 

1- Agregando Campo personalizado

Lo primero que tenemos que hacer es definir cómo asignar ciertas entradas relacionadas a una entrada específica, para lograr esto usaremos los campos personalizados.

En nuestro ejemplo usaremos el campo personalizado llamado «relacionados» y asignaremos el ID de sus entradas relacionadas separados por comas, tal como se muestra en la siguiente imagen.

Si no puede ver los campos personalizados en WordPress 5.0 debido a Gutenberg, puedes hacer click en los tres puntos verticales que aparecen en la barra lateral y luego en opciones, aparecerá un popup desde donde puedes habilitar los campos personalizados.

 

2- Código para mostrar entradas específicas y por categorías

El código primero comprueba si tienes entradas relacionadas específicas asignadas a un artículo, prioriza estas entradas relacionadas y las completa con entradas relacionadas obtenidas de la misma categoría del artículo.

En el código anterior:

  • Utilizamos el hook the_content que hace referencia a la función dc_related_after_content
  • Lo que hacemos dentro de la función es definir la cantidad de entradas relacionadas que aparecerán, por defecto 4
  • Definimos también el nombre de nuestro campo personalizado que usarán las entradas que definen entradas relacionadas específicas
  • La función tiene dos partes, primero comprueba si hay post o entradas relacionadas específicas a través de campos personalizados
  • Luego completa las entradas relacionadas con entradas que corresponden a la misma categoría
  • La función usa una función auxiliar llamada dc_loop_related que nos sirve para realizar el loop
  • Finalmente formamos una cadena con todos las entradas relacionadas y las concatenamos al final del contenido, es decir en la variable $content

Puedes añadir este código al final de tu archivo functions.php de tu child-theme

 

3- Estilos CSS

Igualmente puedes dar estilos a las entradas relacionadas a través de CSS. El código CSS aplicado en este ejemplo se puede descargar desde el siguiente enlace.

Tras hacer los cambios los posts relacionadas lucirán tal como se muestra en la siguiente imagen.

Puedes añadir este código CSS como parte del código CSS de la opción de personalización de tu theme o también al final del archivo style.css de tu child-theme

 

Conclusión

Usando este código podemos evitarnos el uso de un plugin adicional en nuestro sitio, hemos obtenido una funcionalidad de entradas relacionadas de manera simple usando la funcionalidad nativa de campos personalizados de WordPress y colocando el código en el functions.php del theme.

 

Categorías: Themes

Ver comentarios (21)

    • Hola, la función get_the_post_thumbnail() es nativa de WordPress, asegúrate de que tus artículos tengan una imagen destacada asignada ya que esa función hace referencia a esa imagen y no a imágenes del contenido.

      • Hola, no me acordaba de este comentario :(

        Era por tener ocultas las imagenes destacadas por CSS. Saludos.

  • Excelente John. Muy agradecido por este código, ya lo adapté y funciona perfectamente. Uno menos en el concierto de plugins que utilizo en el sitio web. Lo único que extraño es que no aplica para las páginas, solo los posts. Pero estupenda la rutina, mejor que muchos plugins que probé. En verdad. Gracias.

    • Hola Oswaldo, que bueno que te sirvió :), las páginas se organizan jerárquicamente y no por categorías, igual posiblemente haga algo en futuros artículos para páginas relacionadas. Saludos.

  • He tratado con el código de content views, este código, y nada, no me aparece nada en ninguna entrada.
    Sólo he puesto este código php en el child theme, en fuctions.php, no debo hace nada más?

    • Hola, a qué te refieres con el código de content views?, si tienes varias entradas en la misma categoría si que debería aparecer algo en la parte inferior, aunque sea sin estilo ya que sólo estas agregando código PHP.

  • Hola, he puesto el código y efectivamente aparecen las entradas en mi post. El problema es que siempre aparecen las últimas entradas publicadas y no las relacionadas.

    • Hola, siempre aparecen las entradas recientes de la categoría, sin embargo también puedes usar la opcion del campo personalizado "relacionados" colocando los ids de las entradas relacionadas.

  • Hola

    Funciona perfectamente. Una consulta, ¿hay forma de moverlo a una ubicación especifica, un div por ejemplo. Veo que se carga como parte de the_content y a la vez último elemento

    • Hola, podrías probar cambiando la prioridad, hay un parámetro final que por defecto es 10, puedes variar este número y verificar si se mueve antes (en caso tengas algún plugin o tu propio theme que use este filtro y que este colocando elementos igualmente al final)

      Por ejemplo:

      add_filter( 'the_content', 'dc_related_after_content', 5);
      

      Saludos.

  • Muchas gracias por el aporte! Una consulta, en los post relacionados, las imágenes salen desparejas. Regenero las miniaturas con Regenerate thumbnail pero nada. Hay alguna forma de solucionar eso o de agregarle algun tamaño por defeceto?

    • Hola, las imágenes deberían tener dimensiones similares para que no tengas ese problema, sin embargo igual puedes forzar que tengan un tamaño, por ejemplo:

      .rel_posts .thumb_rel img{
          width:100px;
          height:100px;
      }

      Saludos.

  • Hola!

    ¿Es posible asignar este código a un shortcode y insertarlo donde quieras?

    Por ejemplo, tengo tipos de post en los que me gustaría poner 5 entradas relacionadas, otros en los que tendría que poner 3... etc.

    Mil gracias por el aporte.

  • Hola Jhon
    una pregunta de novato...
    tengo que copiar también el signo <?php
    o sólo hay que ponerlo debajo y sirve como referencia

    un saludo gracias

    • Hola, no es necesario, en mi caso lo coloco para que Gits entienda que es código PHP