webentwicklung-frage-antwort-db.com.de

post basierend auf der in Dropdown-Liste ausgewählten Kategorie abrufen - Die Ajax-Methode

<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>

Ab jetzt habe ich keine Ahnung, wie es funktioniert, wenn Kategorien aus der Dropdown-Liste ausgewählt werden. Kann mir jemand helfen, die Dinge weiter zu bringen oder mich vielleicht anleiten, wie ich anfangen soll?

1
The WP Novice

Sie können Ihren Code zum Laufen bringen, indem Sie ihn ein wenig optimieren. Zunächst müssen Sie ein Formular erstellen, das die Kategorien enthält. Senden Sie dann das Formular auf derselben Seite, um es auf die Abfrage anzuwenden.

<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>

Das anfängliche Laden umfasst nun alle Kategorien im WP_Query, aber sobald der Benutzer eine Kategorie auswählt und das Formular absendet, wird die Seite neu geladen und der WP_Query aktualisiert. Stellen Sie sicher, dass Sie Ihrem Formular keine action hinzufügen, damit es an die aktuelle Seite gesendet wird.

Wenn Sie die Seite neu laden möchten, ohne auf die Senden-Schaltfläche zu klicken, können Sie dieses JS-Snippet hinzufügen und die Schaltfläche entfernen:

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;

Weitere Informationen finden Sie auf der Seite wp_dropdown_categories() codex.

1
Jack Johansson