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.