¿Cómo insertar posts relacionados sin plugins en WordPress?
Si eres de los que prefiere eliminar plugins para usar funciones ya disponibles en WordPress, este es un estupendo hack que te puede ofrecer la funcionalidad de posts relacionados sin usar plugins.
¿Has pensado las veces que entraste a un blog por un artículo y terminaste leyéndolos todos? A eso se le conoce como ‘posts relacionados‘, sirven de gran ayuda para lograr que el usuario permanezca el mayor tiempo posible dentro de nuestro blog. En este artículo compartiremos cómo podemos insertar (de forma fácil y sencilla) Artículos relacionados sin necesidad de plugins.
A continuación te mostraremos dos formas de obtener posts relacionados en WordPress: Categorías y por etiquetas.
Post relacionados sin plugin WordPress
Debemos tener en cuenta que debemos crear categorías o etiquetas para que aparezcan los post relacionados de forma automática, no es necesario realizar una acción más en el WordPress, el código realizará toda la función para mostrar related posts. Si le quieres brindar un estilo más propio (y tienes la base de programación) se lo puedes añadir sin problemas.
Porqué recomendamos insertar posts relacionado sin plugins
Las páginas web tienden llenarse de memoria al instalar plugins para todo tipo de funcionalidades, esto no es lo más recomendable. Lo mejor siempre es tratar de insertar la menor cantidad de código para que la web sea más veloz y no tarde tanto en cargar al momento de ingresar, con esto mejoramos la experiencia del usuario y el posicionamiento en los buscadores de Google.
Pasos para crear post relacionado para WordPress sin plugin
Los siguientes pasos son muy sencillos, simplemente tienes que insertar los códigos en donde te indicamos.
Usos de Posts relacionados por categorías.
El siguiente código puede ser agregado en nuestro functions.php de nuestro theme en WordPress. O por medio de algún plugin donde se pueda insertar código PHP en este caso recomendaría plugins llamado Code Snippets
<?php function dc_related_after_content( $content )
{
if ( !is_singular('post') ) return $content;
$cad = "";
$template_li = '<li>
<a class="thumb_rel" href="%7Burl%7D">{thumb}</a>
<a class="title_rel" href="%7Burl%7D">{title}</a>
';
$template_rel = '<div class="rel_posts">
<h3>Artículos Relacionados</h3>
<ul>
{list}
</ul>
</div>';
$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');
¿Qué funcionalidad tiene el código?
1) Usa un filtro con Hook theme_content para ejecutar una función que agregara los post relacionados.
2) La función se ejecutará cuando comprobamos el detalle de un post.
3) Usamos la función get_the_terms para obtener las categorías del post actual.
4) Paso los datos por medio de un objeto a un array.
5) 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.
6) Empiezo el bucle para obtener los datos y concatenarlos en una variable, usando variables de plantilla.
7) Finalmente concateno los datos de la variable en la variable $content y usando igualmente una variable de plantilla
Usos de Posts relacionados por etiquetas
El código es muy similar al anterior solo que varían los parámetros de la función get_the_terms usada para el filtro, y los argumentos de la clase WP_QUERY, en vez de filtrar por categorías filtramos por tags.
$terms = get_the_terms( get_the_ID(), 'post_tag');
$loop = new WP_QUERY(array(
'tag__in' => $tags,
'posts_per_page' => 4,
'post__not_in' =>array(get_the_ID()),
'orderby' =>'asc'
));
Archivo CSS
Por último paso insertamos el CSS para darle estilos a los artículos en WordPress para un mejor diseño. Este código CSS lo podemos añadir en el personalizador CSS, Footer, Head como lo prefieras. De igual forma lo comentado anteriormente le puedes añadir códigos propios para un mejor estilo.
.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;
}
@media only screen and (max-width: 600px) {
.rel_posts ul li {
width: 40%;
margin-left: 15px;
margin-bottom: 15px;
}
.rel_posts ul li:nth-child(odd) {
clear: both;
}
}
