Cómo crear listados dinámicos en WordPress con WP_Query

Seguimos con la saga de WordPress Avanzado, y hemos llegado al punto de crear listados dinámicos con WP_Query, ya que lo último fue crear campos personalizados y entendiste realmente cuál es el propósito de usarlos.

Cuando usamos WP_Query definimos como mostrar una listra filtrada de ciertos contenidos, ya que la clase permite hacer peticiones avanzadas a la base de datos de WordPress desde el código. En este caso, vamos a mostrar los Manuales cuyo campo personalizado _nivel_manual esté marcado como avanzado

El Poder de WP_Query en WordPress

Aunque hemos sido breves durante esta saga de artículos, quiero dejar en claro algo. WP_Query es una clase de WordPress que se utiliza internamente para interactuar con la base de datos y obtener información sobre entradas, páginas, tipos de contenido personalizado como Custom Post Types, archivos adjuntos, etc. basándose en criterios específicos.

Es decir, se puede filtrar y ordenar el contenido, y este es donde reside su gran poder. Pues, puedes pasarle un amplio conjunto de parámetros para especificar exactamente que contenido quieres observar y en qué orden. Es muy útil por ejemplo en entradas relacionadas ya que puedes obtener entradas relacionadas al final de un artículo individual, basándose en categorías, etiquetas u otros criterios.

Introducción

Como sabemos realmente lo que haremos con los manuales, existen varias opciones a poder realizar el trabajo con WP_Query

• En una página personalizada (por ejemplo, page-manuales-avanzados.php)
• En una sección del front-page.php o home.php
• Como parte de un shortcode para usarlo dentro del editor visual
• En este tutorial lo haremos en una plantilla nueva: page-manuales-avanzados.php, que puedes asociar a una página de WordPress llamada “Manuales Avanzados”.

Paso 1: Vamos a crear la plantilla page-manuales-avanzados.php

Dentro de nuestro child theme o tema hijo, vamos a crear la siguiente plantilla.

<?php
/*
 * Template Name: Manuales Avanzados
 */
get_header();
?>

<main class="wp-block-group">
    <div class="wp-block-group">
        <h1>Manuales Avanzados</h1>

        <?php
        // Consulta personalizada
        $args = array(
            'post_type' => 'manuales',
            'posts_per_page' => -1,
            'meta_query' => array(
                array(
                    'key' => '_nivel_manual',
                    'value' => 'avanzado',
                    'compare' => '='
                )
            )
        );

        $query = new WP_Query( $args );

        if ( $query->have_posts() ) :
            echo '<ul>';
            while ( $query->have_posts() ) : $query->the_post(); ?>
                <li>
                    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                    <p><strong>Tiempo:</strong> <?php echo get_post_meta( get_the_ID(), '_tiempo_lectura', true ); ?></p>
                </li>
            <?php endwhile;
            echo '</ul>';
        else :
            echo '<p>No hay manuales avanzados publicados aún.</p>';
        endif;

        // Reset
        wp_reset_postdata();
        ?>
    </div>
</main>

<?php get_footer(); ?>

Deberá verse así nuestro template creado.

Paso 2: Asignar la plantilla desde el panel de WordPress

Ahora, vamos a realizar una serie de pasos:

• Ve a Páginas > Añadir nueva
• Titúlala: Manuales Avanzados
• En la columna derecha, busca la opción “Plantilla” y selecciona Manuales Avanzados
• Dale a Publicar

No olvides seleccionar la opción de "plantilla" y publicar:

Ahora veamos el resultado en "ver página", verás solo los manuales marcados como avanzado en su campo personalizado.

Tips y Mejoras en nuestro listado dinámico

Puedes usar clases de Tailwind, bloques de WordPress, o incluso hacer una cuadrícula con HTML y get_the_post_thumbnail() para mostrar una imagen destacada por cada manual. Por ejemplo:

<?php if ( has_post_thumbnail() ) : ?>
    <div class="manual-thumb"><?php the_post_thumbnail( 'medium' ); ?></div>
<?php endif; ?>

y acompañarlo con un diseño más atractivo para que no sea solo texto plano.

¿Y si quiero filtrar por otros campos?

En dado caso que quisieras agregar otro filtro por campos personalizados, puede modificar el arreglo meta_query

// Solo manuales que tengan un video asociado
'meta_query' => array(
    array(
        'key' => '_video_url',
        'compare' => 'EXISTS'
    )
)

O puedes combinar condiciones:

'meta_query' => array(
    'relation' => 'AND',
    array(
        'key' => '_nivel_manual',
        'value' => 'avanzado',
        'compare' => '='
    ),
    array(
        'key' => '_video_url',
        'compare' => 'EXISTS'
    )
)

¿Puedo convertirlo a un ShortCode?

A menudo veo esto en grupos o foros de WordPress, y siento que muchas veces necesitan saber como agregar un shortcode, y creo que es buen momento para realizarlo a través de esta saga de tutoriales, entonces ¿qué haremos?.

Dentro de nuestro functions.php, al final vamos agregar el siguiente código.

function labcj_listado_manual_avanzado() {
    ob_start();
    $args = array(
        'post_type' => 'manuales',
        'posts_per_page' => -1,
        'meta_query' => array(
            array(
                'key' => '_nivel_manual',
                'value' => 'avanzado',
                'compare' => '='
            )
        )
    );
    $query = new WP_Query( $args );

    if ( $query->have_posts() ) {
        echo '<ul>';
        while ( $query->have_posts() ) {
            $query->the_post();
            echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
        }
        echo '</ul>';
    } else {
        echo '<p>No hay manuales avanzados.</p>';
    }
    wp_reset_postdata();
    return ob_get_clean();
}
add_shortcode( 'manuales_avanzados', 'labcj_listado_manual_avanzado' );

Y luego en cualquier entrada o páginas puedes usar el shortcode:

[manuales_avanzados]

Veamos un ejemplo de como usar el shortcode en una entrada o post cualquiera, en mi caso vamos a editar la única entrada que tenemos que es la Hello World!

Observa que ya puse el shortcode, ahora hay que hacer click en "Actualizar"

Observa como nuestra entrada actualizada, ya tiene los manuales avanzados.

Conclusiones

Este post fue algo extenso a diferencia de los anteriores, porque no solo vimos como usar WP_Query, sino también ver como podemos publicarlo a través de una plantilla, y finalmente a través de un shortcode, que son dos formas o maneras que más dudas tiene la comunidad de desarrollo en WordPress. Espero que hayas aprendido mucho, un gusto y un abrazo. 🤓🚀