web-dev-qa-db-fra.com

get post en fonction de la catégorie choisie dans la liste déroulante - La méthode ajax

<div class="latest_video">
        <?php wp_dropdown_categories(); ?>
        <?php
        // the query
            $the_query = new WP_Query( array(
            'post_type' => 'post',
            'posts_per_page' => 10,
            'post_status' => 'publish',
            'category_name' => $_REQUEST['cat']
            )  );
        ?>
        <?php if ( $the_query->have_posts() ) : ?>
            <!-- the loop -->
            <ul class="flex">
            <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
                <li class="thebox">
                    <div class="theimg"><?php the_post_thumbnail( 'large') ?></div>
                    <div class="stext3">
                        <h4><?php $categories = get_the_category();
                        if ( ! empty( $categories ) ) {
                          echo '<a class="themecolor" href="' . esc_url( get_category_link( $categories[0]->term_id ) ) . '">'  . esc_html( $categories[0]->name ) . '</a>';
                        } ?></h4>
                        <h3><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
                    </div>
                </li>
            <?php endwhile; ?>
            </ul>
            <!-- end of the loop -->
            <!-- <?php wp_reset_postdata(); ?> -->
        <?php endif; ?>
    </div>

Maintenant, je suis désemparé. Comment le faire fonctionner en fonction des catégories sélectionnées dans la liste déroulante. Est-ce que quelqu'un peut m'aider à aller plus loin ou peut-être me guider par comment commencer?

phpfunctionscategoriesajax
1
The WP Novice

Vous pouvez obtenir votre code au travail en le peaufinant un peu. Tout d'abord, vous devez créer un formulaire qui inclut les catégories. Ensuite, soumettez le formulaire sur la même page pour l'appliquer à la requête.

<div class="latest_video">

    <!-- We add a form that submits the request the the same page -->
    <form method="get">
        <?php wp_dropdown_categories( 'show_count=1&hierarchical=1' ); ?>
        <input type="submit" name="submit" value="view" />
    </form>

    <?php
    // the query
        $the_query = new WP_Query( array(
        'post_type' => 'post',
        'posts_per_page' => 10,
        'post_status' => 'publish',
        'category_name' => $_GET['cat']
        )  );
    ?>
    <?php if ( $the_query->have_posts() ) : ?>
        <!-- the loop -->
        <ul class="flex">
        <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
            <li class="thebox">
                <div class="theimg"><?php the_post_thumbnail( 'large') ?></div>
                <div class="stext3">
                    <h4><?php $categories = get_the_category();
                    if ( ! empty( $categories ) ) {
                      echo '<a class="themecolor" href="' . esc_url( get_category_link( $categories[0]->term_id ) ) . '">'  . esc_html( $categories[0]->name ) . '</a>';
                    } ?></h4>
                    <h3><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
                </div>
            </li>
        <?php endwhile; ?>
        </ul>
        <!-- end of the loop -->
        <!-- <?php wp_reset_postdata(); ?> -->
    <?php endif; ?>
</div>

Désormais, le chargement initial inclura toutes les catégories du WP_Query, mais une fois que l'utilisateur aura choisi une catégorie et soumis le formulaire, la page sera rechargée et le WP_Query sera mis à jour. Assurez-vous de ne pas ajouter action à votre formulaire, il sera donc envoyé à la page actuelle.

Si vous souhaitez recharger la page sans cliquer sur le bouton d'envoi, vous pouvez ajouter cet extrait de code JS et supprimer le bouton:

var dropdown = document.getElementById("cat");
function onCatChange() {
    if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
        location.href = window.location.href + "?cat="+dropdown.options[dropdown.selectedIndex].value;
    }
}
dropdown.onchange = onCatChange;

Pour plus d'informations, reportez-vous à la page wp_dropdown_categories() codex.

1
Jack Johansson