✅ Implementando Entradas Relacionadas por Categoría en WordPress (Sin Plugins)

¿Te has preguntado alguna vez cómo elevar la retención de tus lectores y fomentar una mayor interacción en tu sitio de WordPress?

Una estrategia efectiva para lograrlo es la incorporación de entradas relacionadas al final de tus artículos. Estas entradas no solo brindan contenido adicional que puede resultar fascinante para tus lectores, sino que también desempeñan un papel clave en mantenerlos comprometidos en tu sitio durante períodos más prolongados.

En este artículo, exploraremos una solución sin la necesidad de recurrir a plugins: un código PHP y CSS que puedes integrar directamente en el tema de tu WordPress. Al prescindir de plugins, no solo optimizarás el rendimiento de tu sitio, sino que también ganarás un mayor control sobre la personalización y la estética de las entradas relacionadas. Descubre cómo implementar esta funcionalidad de manera eficaz y eficiente, mejorando así la experiencia de usuario en tu sitio web.

El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS.

function mostrar_entradas_relacionadas_al_final($content) {
    // Verificar si estamos en una entrada individual
    if (is_single()) {
        // Obtener categorías de la entrada actual
        $categorias = get_the_category();

        if ($categorias) {
            // Obtener IDs de categorías
            $categoria_ids = array();
            foreach ($categorias as $categoria) {
                $categoria_ids[] = $categoria->term_id;
            }

            // Configurar consulta para obtener entradas relacionadas con imagen destacada
            $args = array(
                'category__in'     => $categoria_ids,
                'post__not_in'     => array(get_the_ID()),
                'posts_per_page'   => 3,
                'orderby'          => 'rand',
                'meta_query'       => array(
                    array(
                        'key'     => '_thumbnail_id',
                        'compare' => 'EXISTS',
                    ),
                ),
            );

            $entradas_relacionadas = new WP_Query($args);

            // Construir HTML para las entradas relacionadas con estilo CSS avanzado
            if ($entradas_relacionadas->have_posts()) {
                $content .= '<p><b>También podría interesarte ...</b></p>';
                $content .= '<div class="entradas-relacionadas">';
                while ($entradas_relacionadas->have_posts()) {
                    $entradas_relacionadas->the_post();
                    $content .= '<div class="entrada-relacionada">';
                    $content .= '<a href="' . get_permalink() . '" title="' . get_the_title() . '">';
                    $content .= get_the_post_thumbnail(get_the_ID(), 'thumbnail', array('style' => 'border-radius: 50%; overflow: hidden;'));
                    $content .= '</a>';
                    $content .= '<div class="contenido-relacionado">';
                    $content .= '<h3 style="font-size:12px;"><a href="' . get_permalink() . '" title="' . get_the_title() . '">' . get_the_title() . '</a></h3>';
                    $content .= '<p style="font-size:10px;">' . wp_trim_words(get_the_content(), 20) . '</p>';
                    $content .= '<p style="font-size:10px;">Categorías: ';
                    $categorias_entrada_relacionada = get_the_category();
                    foreach ($categorias_entrada_relacionada as $categoria_entrada) {
                        $content .= '<a href="' . get_category_link($categoria_entrada->term_id) . '">' . $categoria_entrada->name . '</a>, ';
                    }
                    $content = rtrim($content, ', ');  // Eliminar la última coma y espacio
                    $content .= '</p>';
                    $content .= '</div>';
                    $content .= '</div>';
                }
                $content .= '</div>';
            }

            // Restaurar datos originales de la consulta principal
            wp_reset_postdata();
        }
    }

    return $content;
}

add_filter('the_content', 'mostrar_entradas_relacionadas_al_final');

// Agregar CSS en línea al archivo de estilo del tema
function agregar_css_personalizado() {
    echo '<style>
        /* Estilo para escritorio */
        @media (min-width: 768px) {
            .entradas-relacionadas {
                display: flex;
                justify-content: space-between;
                margin: 20px 0;
                padding:50px;
                background-color:#f4f4f4;
            }

            .entrada-relacionada {
                width: 30%;
                margin-bottom: 20px;
            }
        }

        /* Estilo para móvil */
        @media (max-width: 767px) {
            .entradas-relacionadas {
                display: flex;
                flex-direction: column;
                background-color:#f4f4f4;
                padding:20px;
            }

            .entrada-relacionada {
                width: 100%;
                margin-bottom: 20px;
            }
        }
    </style>';
}

add_action('wp_head', 'agregar_css_personalizado');

Lenguaje del código: PHP (php)

Entendiendo en Código

El código PHP proporcionado es una función que se integra en WordPress a través de su sistema de ganchos y filtros. La función mostrar_entradas_relacionadas_al_final se ejecuta cada vez que se carga una página individual de entrada (is_single()). Su función principal es buscar y mostrar otras entradas relacionadas en función de las categorías de la entrada actual.

1. Obtención de Categorías:
   • Se obtienen las categorías de la entrada actual utilizando la función get_the_category().
   • Las IDs de estas categorías se almacenan en un array llamado $categoria_ids.
2. Configuración de la Consulta:
   • Se configura una consulta utilizando WP_Query para recuperar hasta 3 entradas relacionadas.
   • La consulta se enfoca en entradas que pertenecen a las mismas categorías, pero no incluye la entrada actual.
   • Se ordena de forma aleatoria para proporcionar variedad en la presentación.
   • Se utiliza una meta_query para asegurarse de que las entradas tengan una imagen destacada.
3. Construcción del HTML:
   • Si hay entradas relacionadas, se construye un bloque HTML con información relevante.
   • Se utiliza un diseño CSS avanzado para presentar las entradas relacionadas de manera atractiva.
4. Restauración de la Consulta Principal:
   • Se restauran los datos originales de la consulta principal con wp_reset_postdata().

El Propósito del Código CSS:

El código CSS proporcionado se agrega dinámicamente al encabezado de la página utilizando el gancho wp_head. Su objetivo es aplicar estilos específicos a las entradas relacionadas para garantizar una presentación atractiva y receptiva.

1. Estilos para Escritorio y Móvil:
   • Se aplican estilos diferentes según el tamaño de la pantalla, utilizando consultas de medios.
   • En escritorio, las entradas relacionadas se muestran en una fila con un diseño de tres columnas.
   • En dispositivos móviles, las entradas se presentan en una columna para mejorar la legibilidad.
2. Estilos Específicos para Entradas Relacionadas:
   • Se definen estilos específicos para el contenedor de las entradas relacionadas y para cada entrada individual.

Implementación y Personalización:

Para integrar este código en tu tema de WordPress, simplemente agrégalo al archivo functions.php. Puedes ajustar el número de entradas relacionadas, modificar estilos CSS o agregar/eliminar elementos HTML según tus necesidades.

Al proporcionar a tus lectores contenido adicional que sea relevante para sus intereses, puedes mejorar la experiencia de usuario en tu sitio WordPress y fomentar una mayor exploración de tu contenido. ¡Inténtalo y observa cómo la interacción de tus lectores se dispara!

Nos vemos en el siguiente tutorial.

Un saludo.