• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Entradas relacionadas mejoradas sin plugins en WordPress

Entradas relacionadas mejoradas sin plugins en WordPress

Entradas relacionadas mejoradas sin plugins en WordPress

[ 16 abril 2019 ] [ Actualizado: 3 junio 2019 ]
[ Autor: Jhon Marreros Guzmán ][ Themes - Intermedio] [ ]

mejoras optimización

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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.

usar campos personalizados para entradas relacionadas

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.

Entradas relacionadas sin plugins

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.

 
¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Posts relacionados sin pluginsPosts relacionados sin plugins en WordPress
  • Letra capital en párrafos en WordPressLetra capital en párrafos en WordPress
  • Clases CSS por defecto WordPressEstilos CSS por defecto que genera WordPress
  • Tablas Responsive en WordPressTablas Responsive en WordPress sin plugins
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (8 votos, promedio: 4,88 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. juan

    25 abril, 2019

    Lo he usado en GeneratePress y no me salen las miniaturas :/

    • Jhon Marreros Guzmán

      29 abril, 2019

      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.

      • juan

        29 junio, 2019

        Hola, no me acordaba de este comentario 🙁

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

  2. Oswaldo Nuñez

    16 mayo, 2019

    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.

    • Jhon Marreros Guzmán

      16 mayo, 2019

      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.

  3. Bruno

    10 diciembre, 2019

    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?

    • Jhon Marreros Guzmán

      13 diciembre, 2019

      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.

  4. Javi

    21 febrero, 2020

    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.

    • Jhon Marreros Guzmán

      23 febrero, 2020

      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.

  5. Victor H.

    13 marzo, 2020

    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

    • Jhon Marreros Guzmán

      13 marzo, 2020

      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.

  6. Martin

    17 abril, 2020

    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?

    • Jhon Marreros Guzmán

      17 abril, 2020

      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.

  7. Adela

    16 febrero, 2021

    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.

    • Jhon Marreros Guzmán

      16 febrero, 2021

      Hola, si, el shortcode tendría que detectar el ID actual de la página. Revisa: https://decodecms.com/que-son-los-shortcodes-en-wordpress-y-como-usarlos/

  8. Yerai

    31 marzo, 2021

    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

    • Jhon Marreros Guzmán

      4 abril, 2021

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

  9. Gabriel Martín

    3 mayo, 2021

    Muchísimas gracias Jhon, justo lo que estaba buscando. Es perfecto!

    • Jhon Marreros Guzmán

      4 mayo, 2021

      🙂

  10. RaguPluas

    3 noviembre, 2021

    Saludos DecodeCMS, como puedo mostar los mismos post pero en columna y no en fila? te lo agredezco.

    • Jhon Marreros Guzmán

      5 noviembre, 2021

      Hola, en el código CSS, .rel_posts ul li , prueba cambiar el ancho a 100%

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Búsqueda en tabla personalizada en WordPress

Modificar el orden de productos destacados en StoreFront

Copias no actualizadas de algunos archivos de plantilla WooCommerce

Generador de plugins base para WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados