WordPress: Crear Menú de Productos Relacionados con Loop Personalizado

¿Cómo crear un loop personalizado en WordPress para productos relacionados?

Cuando trabajamos en WordPress, una de las funcionalidades avanzadas que podemos implementar es un loop personalizado para mostrar productos relacionados. Esto nos permite optimizar la experiencia del usuario al ofrecerle productos adicionales que pueden ser de su interés. Vamos a repasar cómo lograrlo paso a paso.

Iniciamos por crear un loop en WordPress mediante el constructor WP_Query. Este constructor nos facilita acceder a nuestros productos en el sitio. A continuación, definimos los atributos necesarios para configurar el loop.

$args = array(
    'post_type' => 'producto', // Definimos que queremos seleccionar productos.
    'posts_per_page' => 6, // Indicamos cuántos productos queremos mostrar.
    'orderby' => 'title', // Ordenamos por el título del producto.
    'order' => 'DESC' // Ordenamiento en orden descendente.
);

$productos = new WP_Query($args);

¿Cómo verificar y gestionar los resultados del loop?

Ahora que tenemos definido nuestro loop, el siguiente paso es verificar si nuestro objeto contiene productos. Nos valdremos de un condicional y técnicas para tratar los métodos del objeto.

if ($productos->have_posts()) {
    echo '<div class="row">';
    
    // Iteramos sobre los productos.
    while ($productos->have_posts()) {
        $productos->the_post();
        
        // Iniciamos la interfaz de cada producto.
        echo '<div class="col-md-2 my-3">';
        the_post_thumbnail('thumbnail'); // Mostramos la imagen del producto.
        
        // Título con enlace al producto.
        echo '<h4><a href="' . get_permalink() . '">' . get_the_title() . '</a></h4>';
        
        echo '</div>';
    }
    
    echo '</div>';
} else {
    echo 'No se encontraron productos relacionados.';
}
wp_reset_postdata(); // Reiniciamos los datos del post.

¿Qué se debe considerar para la integración de CSS y diseño?

Al momento de diseñar la interfaz, debemos recordar que cada elemento gráfico debe estar correctamente alineado y estilizado. En este ejemplo, usamos clases de Bootstrap para un diseño responsive.

• Creamos una fila (row) para contener todos los productos.
• Distribuimos cada producto en 2 columnas (col-md-2) para que al usar Bootstrap, se reparta en el espacio.
• Utilizamos clases de margen (my-3) para un espaciado uniforme.
• Aseguramos que los títulos estén centrados usando text-center.

Adicionalmente, es crucial verificar y cerrar bien todas las etiquetas HTML, así como mantener el código limpio, mejorando para cada ajuste.

Este enfoque no solo mejora la experiencia visual sino también la navegación entre productos, creando un flujo intuitivo para el usuario. En futuras clases se verá cómo personalizar y potenciar aún más esta funcionalidad con taxonomías personalizadas, un área apasionante del desarrollo en WordPress. ¡Sigue atento para conocer más!