Posts relacionados sin plugins en WordPress: Guía completa con código

abril 06, 2023

Hola, amigos de Piensa para Crear. 👋

Cuando un lector termina de ver un artículo en tu blog, ¿qué pasa después? Si no le ofreces algo más que leer, probablemente se irá. Pero si le muestras contenido relacionado con lo que acaba de leer, tienes una oportunidad enorme de mantenerlo en tu sitio y aumentar las páginas vistas.

Existen muchos plugins para hacer esto (YARPP, Related Posts, etc.), pero no necesitas ninguno. Con unas cuantas líneas de código en el functions.php de tu tema, puedes añadir posts relacionados automáticamente sin cargar plugins adicionales y sin sacrificar rendimiento.

En este tutorial te explico cómo añadir posts relacionados en WordPress sin plugins, tanto por categorías como por etiquetas, y te doy el CSS para que se vean bien.

🧠 ¿Por qué hacerlo sin plugins?

Ventajas de hacerlo con código:

Menos plugins, menos peso. Cada plugin que instalas añade consultas, scripts y CSS. El código puro es más ligero.
Control total. Puedes personalizar exactamente qué mostrar, cómo y dónde.
Sin dependencias. Si el plugin desaparece o se rompe, tu código sigue funcionando.
Mejor rendimiento. Las consultas se hacen de forma nativa con WP_Query.

Desventaja: Requiere tocar el functions.php (o usar un plugin de snippets). Pero con las precauciones adecuadas, no hay problema.

📄 Código 1: Posts relacionados por categorías

Este es el código completo. Pégalo en el functions.php de tu tema hijo (o usa un plugin como Code Snippets):

function dc_related_after_content( $content ) 
{ 
    if ( ! is_singular( 'post' ) ) return $content;

    $cad           = "";
    $template_li   = '<li>
                        <a class="thumb_rel" href="{url}">{thumb}</a>
                        <a class="title_rel" href="{url}">{title}</a>
                    </li>';
    $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' );

🔍 ¿Cómo funciona este código?

Engancha al filtro the_content → se ejecuta cuando WordPress renderiza el contenido del post.
Comprueba que sea un post individual (is_singular('post')) → no se ejecuta en páginas, archivos ni portada.
Obtiene las categorías del post actual con get_the_terms().
Guarda los IDs de las categorías en un array $categ.
Hace una consulta con WP_QUERY → busca 4 posts que estén en las mismas categorías, excluyendo el post actual, en orden aleatorio.
Recorre los resultados y genera el HTML de cada ítem con str_replace.
Añade el bloque de relacionados al final del contenido ($content .= ...).
Reinicia la consulta con wp_reset_query() para no afectar el resto de la página.

Resultado: Al final de cada artículo, aparecerá un bloque con 4 artículos relacionados de las mismas categorías.

📄 Código 2: Posts relacionados por etiquetas

Si prefieres usar etiquetas en lugar de categorías, solo cambian dos cosas:

1. La función `get_the_terms`

$terms = get_the_terms( get_the_ID(), 'post_tag' );

Cambia 'category' por 'post_tag'.

2. Los argumentos de `WP_QUERY`

$loop = new WP_QUERY( array(
    'tag__in'         => $tags,
    'posts_per_page'  => 4,
    'post__not_in'    => array( get_the_ID() ),
    'orderby'         => 'asc'
) );

Cambia 'category__in' por 'tag__in' y 'rand' por 'asc' (o lo que prefieras).

El resto del código es idéntico.

🎨 Código 3: El CSS para que se vean bien

Pega esto en Apariencia → Personalizar → CSS adicional (o en el style.css de tu tema hijo):

.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;
    }
}

🔍 ¿Qué hace este CSS?

.rel_posts → añade un borde superior punteado para separar los relacionados del contenido.
:after → limpia los floats (evita que el layout se rompa).
ul li → pone los posts en 5 columnas (20% cada uno) en escritorio.
.title_rel → da espacio al título.
@media → en móvil, los posts se muestran en 2 columnas (40% cada uno) y se limpian los impares para que no se descoloquen.

🛠️ Cómo implementarlo correctamente

Opción A: `functions.php` del tema hijo

Ve a Apariencia → Editor de archivos del tema.
Selecciona functions.php de tu tema hijo.
Pega el código.
Guarda.

Opción B: Plugin Code Snippets (recomendado)

Instala y activa Code Snippets.
Ve a Snippets → Add New.
Pega el código.
Actívalo.

Ventaja: Puedes activarlo/desactivarlo sin tocar functions.php. Si algo sale mal, lo desactivas y listo.

⚠️ Consideraciones importantes

1. Haz backup antes de tocar `functions.php`

Un error de sintaxis en este archivo puede tumbar todo tu sitio con un error fatal. Antes de pegar el código:

Haz un backup completo de tu sitio (archivos y base de datos).
Usa un tema hijo para no perder cambios al actualizar el tema.
Prueba en staging si tu hosting lo ofrece.

2. Rendimiento

La consulta WP_QUERY se ejecuta en cada carga de un post. Si tu sitio tiene mucho tráfico, esto puede afectar el rendimiento. Solución: Instala un plugin de caché para que las consultas se guarden.

3. Personalizar el número de posts

Cambia 'posts_per_page' => 4 por el número que quieras mostrar. Si cambias a 3 o 5, ajusta el CSS (width: 20% es para 5 columnas; para 3, usa width: 33%).

4. Personalizar el orden

'rand' → aleatorio.
'asc' → ascendente (A-Z).
'desc' → descendente (Z-A).
'date' → por fecha.

5. Excluir posts específicos

Si quieres excluir ciertos posts además del actual, añade sus IDs:

'post__not_in' => array( get_the_ID(), 123, 456 ),

6. Si no hay relacionados

Si el post no tiene categorías o etiquetas, el código no muestra nada. Puedes añadir un fallback (mostrar los últimos posts) si quieres.

🎯 Conclusión: contenido relacionado sin plugins

Añadir posts relacionados sin plugins es una de esas mejoras que valen la pena:

✅ Mejor experiencia de usuario: el lector encuentra más contenido que le interesa.
✅ Más páginas vistas: cada clic es una visita adicional.
✅ Sin dependencias: no cargas plugins innecesarios.
✅ Control total: tú decides qué mostrar y cómo.

Resumen del proceso:

Pega el código en functions.php o Code Snippets.
Elige entre categorías o etiquetas.
Añade el CSS para que se vea bien.
Prueba y ajusta.

💬 ¿Necesitas ayuda para personalizar los posts relacionados o mejorar el rendimiento de tu WordPress?
En Piensa para Crear ofrecemos servicios de desarrollo, personalización y optimización para sitios WordPress.
Contáctanos aquí y hablemos.

❓ Preguntas frecuentes

¿Dónde pongo el código?
En el archivo functions.php de tu tema hijo, o usa el plugin Code Snippets.

¿Necesito un tema hijo?
Sí, es muy recomendado. Si editas el tema padre, perderás los cambios al actualizar.

¿Funciona con cualquier tema?
Sí. Solo usa funciones nativas de WordPress (get_the_terms, WP_QUERY, the_content).

¿Puedo mostrar más de 4 posts?
Sí. Cambia 'posts_per_page' => 4 por el número que quieras. Ajusta el CSS según el número de columnas.

¿Qué diferencia hay entre relacionados por categorías y por etiquetas?
Las categorías son más amplias; las etiquetas son más específicas. Puedes usar las dos o elegir una.

¿El bloque aparece en todas las páginas?
No. Solo en posts individuales (is_singular('post')). No aparece en páginas, portada ni archivos.

¿Cómo excluyo ciertos posts?
Añade sus IDs al array 'post__not_in'.

¿El código afecta al rendimiento?
Puede añadir una consulta por carga. Con un plugin de caché, el impacto es mínimo.

¿Puedo personalizar el diseño?
Sí. Cambia el HTML de $template_li y $template_rel, y el CSS en style.css.

Posts relacionados sin plugins en WordPress: Guía completa con código

🧠 ¿Por qué hacerlo sin plugins?

📄 Código 1: Posts relacionados por categorías

🔍 ¿Cómo funciona este código?

📄 Código 2: Posts relacionados por etiquetas

1. La función `get_the_terms`

2. Los argumentos de `WP_QUERY`

🎨 Código 3: El CSS para que se vean bien

🔍 ¿Qué hace este CSS?

🛠️ Cómo implementarlo correctamente

Opción A: `functions.php` del tema hijo

Opción B: Plugin Code Snippets (recomendado)

⚠️ Consideraciones importantes

1. Haz backup antes de tocar `functions.php`

2. Rendimiento

3. Personalizar el número de posts

4. Personalizar el orden

5. Excluir posts específicos

6. Si no hay relacionados

🎯 Conclusión: contenido relacionado sin plugins

❓ Preguntas frecuentes

Comentarios

Publicar un comentario

Guardados

Posts relacionados sin plugins en WordPress: Guía completa con código

🧠 ¿Por qué hacerlo sin plugins?

📄 Código 1: Posts relacionados por categorías

🔍 ¿Cómo funciona este código?

📄 Código 2: Posts relacionados por etiquetas

1. La función get_the_terms

2. Los argumentos de WP_QUERY

🎨 Código 3: El CSS para que se vean bien

🔍 ¿Qué hace este CSS?

🛠️ Cómo implementarlo correctamente

Opción A: functions.php del tema hijo

Opción B: Plugin Code Snippets (recomendado)

⚠️ Consideraciones importantes

1. Haz backup antes de tocar functions.php

2. Rendimiento

3. Personalizar el número de posts

4. Personalizar el orden

5. Excluir posts específicos

6. Si no hay relacionados

🎯 Conclusión: contenido relacionado sin plugins

❓ Preguntas frecuentes

Comentarios

Publicar un comentario

Sigue leyendo

Guardados

1. La función `get_the_terms`

2. Los argumentos de `WP_QUERY`

Opción A: `functions.php` del tema hijo

1. Haz backup antes de tocar `functions.php`