Mostrar posts relacionados por etiquetas en WordPress – vertegrande ® – Marketing & Diseño Web en Puerto Madryn
Copyright © Vertegrande. 2023. Agencia de Marketing & Diseño Web en Puerto Madryn / Contanos tu Proyecto. Esto puede ser el principio de una gran aventura.
vertegrande ® – Marketing & Diseño Web en Puerto Madryn » Front-end » Snippets » WordPress » Mostrar posts relacionados por etiquetas en WordPress

Mostrar posts relacionados por etiquetas en WordPress

Las entradas o posts relacionados suelen ser una herramienta muy practica y útil para mantener a nuestros […]

Publicado el 19 julio, 2022 - Categorias: Front-end, Snippets, WordPress

Las entradas o posts relacionados suelen ser una herramienta muy practica y útil para mantener a nuestros visitantes entretenidos leyendo mas de un articulo en nuestro sitio web.

La idea de este posteo es poder obtener esta funcionalidad de posts relacionados, pero sin recaer en la utilización de algún plugins. Podrás implementarlo en tu proyecto fácilmente y acomodarlo donde mas desees.

Posts relacionados por etiquetas


            <div class="verte_relacionados_tags">
            <?php
            $orig_post = $post;
            global $post;
            $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),
            'posts_per_page'=>3, //Cantidad de posts por página
            'orderby' => 'RAND' //Orden de posts
            );

            $my_query = new wp_query( $args );
            if( $my_query->have_posts() ) {

            echo '   <div class="titulo-lineal">
                  <h4>Noticias Relacionadas</h4>
                </div><ul>';

            while( $my_query->have_posts() ) {
            $my_query->the_post(); ?>
            <!-- El listado de posts -->
            <li>
            <!-- <div class="relatedthumb"><a href="<? the_permalink()?>" rel="bookmark" target="_blank" title="<?php the_title(); ?>"><?php the_post_thumbnail(); ?></a></div> -->
           <a href="<?php the_permalink()?>" rel="bookmark" target="_blank" title="<?php the_title(); ?>"><?php the_title(); ?></a>
            </li>
            <!-- Hasta aquí -->

            <?php }
            echo '</ul>';
            }}
            wp_reset_query(); ?>
            </div>

.verte_relacionados_tags  h3  {

  	  font-family: 'Roboto';
  		text-transform:capitalize;
  	    font-weight: 900 !important;
  	    font-size: 15px !important;

  	    color: #212121 !important;
  	    border-top-width: 0;
  	    border-bottom-width: 0;
  	    border-left-width: 0;
  	    border-right-width: 0;
  	    border-color: initial;
  	    border-style: solid;
  	    padding-top: 0;
  	    padding-left: 0;
  	    padding-right: 0;
  	    padding-bottom: 0;
  	    margin-top: 0;
  	    margin-left: 0;
  	    margin-right: 0;
  	    margin-bottom: 20px;
  	    width: 100%;
	}
  .verte_relacionados_tags ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .verte_relacionados_tags ul li a{
    color: #000;
  }
  .verte_relacionados_tags ul li {
      margin: 0;
      font-family: 'Roboto';
      padding: 0;
      color: #666;
      list-style: none;
      position: relative;
      font-size: 14px;
      border-bottom: 1px solid #e7e7e7;
      padding-bottom: 15px;
      margin-bottom: 15px !important;
  }

Casi todo lo vamos a dejar por defecto, y sólo te recomiendo cambiar un par de cosas, para ponerlo a tu gusto:

  1. posts_per_page : indicaremos cuántos posts relacionados podemos mostrar así que puedes cambiar el 3 por la cantidad que te interese
  2. orderby indicamos en qué orden se van a mostrar esos posts, que está puedo en RAND de random (aleatorio) pero puedes cambiarlo por date, para que los ordene por fecha

Mostrar imagen destacada y título

Si lo que deseamos es acompañar el titulo con una imagen destacada, editamos solo la parte comentada   <!– El listado de posts –> por el siguiente codigo

            <!-- El listado de posts -->

<li>
<div class="relatedthumb"><a href="<? the_permalink()?>" rel="bookmark" target="_blank" title="<?php the_title(); ?>"><?php the_post_thumbnail(); ?></a>
</div>
 
<a href="<?php the_permalink()?>" rel="bookmark" target="_blank" title="<?php the_title(); ?>"><?php the_title(); ?></a>
 
</li>
  <!-- Hasta aquí -->

Si deseas puedes ampliar información sobre esto en los siguientes enlaces:

Posts relacionados sin plugins en WordPress

Entradas relacionadas mejoradas sin plugins en WordPress

Cómo mostrar en los posts de WordPress artículos relacionados por etiqueta


Blog

Instagram @holavertegrande