web-dev-qa-db-ja.com

ドロップダウンで選択したカテゴリに基づいて投稿を取得する - 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>

今ここから先はわかりませんが、ドロップダウンから選択したカテゴリに基づいて機能させる方法はわかりません。誰かが私が物事をさらに進めるのを助けることができますか、またはおそらく私に始める方法を導くことができますか？

phpfunctionscategoriesajax
1
The WP Novice

コードを少し調整することで、コードを機能させることができます。まず、カテゴリを含むフォームを作成する必要があります。次に、同じページにフォームを送信してクエリに適用します。

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

初期ロードはWP_Query内のすべてのカテゴリを含みますが、ユーザがカテゴリを選択してフォームを送信すると、ページがリロードされ、WP_Queryが更新されます。フォームにactionを追加しないでください。そうすれば、現在のページに送信されます。

送信ボタンをクリックせずにページをリロードしたい場合は、このJSスニペットを追加してボタンを削除できます。

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;

詳細は wp_dropdown_categories() codexページを参照してください。

1
Jack Johansson