Inicio Informática Artículos relacionados en Wordpress, cómo añadirlos sin plúgins

Artículos relacionados en Wordpress, cómo añadirlos sin plúgins

Publicado por entreunosyceros
Publicado el: Última actualización:

AVISO: Esta entrada tiene más de dos años desde su publicación. Es posible que el contenido esté desactualizado.

En el siguiente artículo voy a dejar una función muy chula que me encontré por internet. Esto es algo que hace tiempo que tenía ganas de hacer. Aun que la verdad por falta de tiempo he preferido buscarla por la red. Se trata de una función para agregar los artículos relacionados a nuestros artículos de Wordpress.

Con ella, podrás eliminar los artículos relacionados que Jetpack ofrece, que no están mal. Pero distan mucho de ser lo que yo quería, sobre todo en la versión para móviles.

Por esta razón también, he buscado un poco por internet. Me he encontrado en la web decodecms.com una función. Aun que ya tiene un par de años publicada, realiza la función que a mi me interesa. Supongo que al amigo que la publica, no le importará demasiado que la modifique un poco. Sobre todo para adaptarla a las necesidades (sobre todo de tamaño) de esta página.

Hoy en día, todo el mundo sabe que las entradas o posts relacionados son de gran ayuda para mantener a los visitantes leyendo en nuestro blog. Por esto siempre es interesante mantener esta funcionalidad en nuestras páginas. Aun que he de decir que según el CMS que utilicemos (o bien si lo programamos nosotros mismos), la cosa cambiará un poco. En este artículo, y gracias al amigo de decodecms, veremos cómo obtener esta funcionalidad de posts relacionados. Sin la necesidad de utilizar plugins (que siempre es buena idea no cargar en exceso nuestro blog).

La página a la que hago referencia, nos enseña que podemos mostrar los artículos relacionados utilizando como referencia las categorías y los TAGS. En esta ocasión yo solo voy a mostrar la opción de las categorías (ya que es la que a mi me interesa). Decir que también incluiré los CSS que en esta web nos muestran pero un poco modificados para adaptarlos mejor a esta página.

Decir que el código que a continuación voy a mostrar, necesitaremos incluirlo bien sea dentro del archivo functions.php de nuestro tema o bien dentro del plugin de funciones que utilicemos para no recargar demasiado dicho archivo de funciones.

Función para mostrar Artículos relacionados

/*Artículos relacionados*/
 function dc_related_after_content( $content ) 
 { 
    
    if ( !is_singular('post') ) return $content;  
  
  $cad      = "";
  $template_li  = '<li>
              <a class="thumb_rel" href="{url}"><div class="img_post_relac">{thumb}</div></a>
              <a class="title_rel" href="{url}">{title}</a>
            </li>';
  $template_rel = '<br/><p><div class="rel_posts">
              <h3>Quizás también te interese ... </h3>
              <br/><ul>
                {list}
              </ul>
             </div></p>';

    $terms = get_the_terms( get_the_ID(), 'category');
    $categ = array();
    
    if ( $terms )
    {
      foreach ($terms as $term) 
      {
        $categ[] = $term->term_id;
      }
    }
    else{
      return $content;
    }

    $loop = new WP_QUERY(array(
            'category__in'    => $categ,
            'posts_per_page'  => 4,
            'post__not_in'    =>array(get_the_ID()),
            'orderby'     =>'rand'
            ));

    if ( $loop->have_posts() )
    {

      while ( $loop->have_posts() )
      {
        $loop->the_post();

        $search  = Array('{url}','{thumb}','{title}');
        $replace = Array(get_permalink(),get_the_post_thumbnail(),get_the_title());
      
        $cad .= str_replace($search,$replace, $template_li);
      }

      if ( $cad ) 
      {
        $content .= str_replace('{list}', $cad, $template_rel);
      }

    }
    wp_reset_query(); 

    return $content;
}

add_filter( 'the_content', 'dc_related_after_content');

Una vez guardados los cambios, ya deberíamos ver los cambios en nuestra página. Decir que es conveniente desactivar los artículos relacionados que estemos mostrando anteriormente.

Para que quede un poco más claro el anterior código, decir que lo que hace es:

  • Usar un filtro con el hook the_content para ejecutar una función que agregará los posts relacionados al contenido.
  • Dentro de la función comprobamos que sólo sea ejecutada cuando veo el detalle de un post.
  • Uso la función get_the_terms para obtener las categorías del post actual.
  • Paso los datos obtenidos desde el objeto a un array.
  • Recupero los datos de la base de datos con la clase WP_QUERY, pasando los argumentos como categoría, cantidad de posts, exclusión, y orden.
  • Empiezo el bucle para obtener los datos y concatenarlos en una variable, usando variables de plantilla.
  • Finalmente concateno los datos de la variable en la variable $content y usando igualmente una variable de plantilla

A continuación vamos a ver el estilos CSS que se le pueden aplicar a esta función. Estos estilos se pueden aplicar al archivo style.css de nuestro tema. Tambien podremos aplicarlo a la opción CSS personalizado (si es que el tema que estemos utilizando nos lo permite).

Estilos CSS para la función de los artículos relacionados

/*CSS Artículos relacionados*/
.rel_posts > h3:nth-child(1){font-weight:bold;}
.rel_posts {
  border-top: 1px dotted gray;
  padding-top: 20px;
}
.rel_posts:after {
  content: "";
  display: block;
  margin-bottom: 10px;
  padding-bottom: 10px;
  clear: both;
}
.rel_posts ul {
  width: 100%;
}
.rel_posts ul li {
  list-style: none;
  width: 20%;
  float: left;
  margin-left: 20px;
}
.rel_posts ul li .title_rel {
  display: block;
  padding: 4px;
	text-decoration:none;
}

.img_post_relac > img {width:120px !important;
height: 100px;}

.img_post_relac > img:hover {border: 1px solid green;border-radius:5%;}

@media only screen and (max-width: 600px) {
  .rel_posts ul li {
    width: 40%;
    margin-left: 15px;
    margin-bottom: 15px;
  }
	.img_post_relac > img {width: 80px !important;
height: 60px;}
  .rel_posts ul li:nth-child(odd) {
    clear: both;
  }
	.rel_posts > h3:nth-child(1){text-align:center;}
}

Estos estilos los guardaremos también. El resultado final debería ser algo similar a lo que se puede ver justo debajo de estas líneas. Quiero decir también que el hombre que publicó en su día esta función y sus correspondientes CSS publicó estos códigos en su repositorio de GitHub, por si alguien quiere descargar el código que el aportó al mundo.

 

También te puede interesar ...

Deja un comentario

* Al utilizar este formulario, aceptas que este sitio web almacene y maneje tus datos.

Resumen de privacidad
cookies entreunosyceros

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible.

La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudarnos a comprender qué secciones de la web encuentras más interesantes y útiles.

Nunca almacenamos información personal de ningún tipo.

Tienes toda la información sobre privacidad, derechos legales y cookies en nuestra página sobre la política de privacidad o en la página sobre nuestra política de cookies.

Cookies necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.

Cookies de terceros

Esta web utiliza las siguientes cookies adicionales:

- Mailchimp: Recordar si ya estás suscrito al boletín de noticias y sino ofrecértelo al salir.

- Accesibilidad: Para saber tus ajustes de accesibilidad en cada visita.

- Comentarios: Saber si has leído y aceptado nuestra política de privacidad a la hora de dejar un comentario en la web.

- Google Analytics: Localización para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

- Goggle Adsense: Anuncios personalizados según tu geolocalización y preferencias.

Dejar estas cookies activadas nos permite mejorar nuestra web.

Adblock Detectado!!

Ayúdanos deshabilitando la extensión AdBlocker de tu navegador para visitar esta web.
Si no sabes hacerlo en Chrome, consulta el siguiente enlace. Si utilizas Firefox, puedes consultar este otro enlace.
Esto mejorará tu experiencia en este sitio web.