javascript - 通过自定义 wp_query CPT 上的下拉菜单进行简单排序

Question

我有一个基本的存档提要。

我正在尝试添加一个简单的按表单排序的下拉列表，它允许我按日期、标题和受欢迎程度对结果进行排序...

我已经有了它，但它并没有像我预期的那样工作。

我有一个下拉菜单，“onchange”获取选项的值，并将其添加到 URL 中。通过将值设置为 ?orderby=date&order=DESC 它可以工作...

但是，它会重新加载页面(这很好)并且不会保存所选选项的值...因此下拉字段不会显示所选的值...

如果我选择不同的值，它也不会删除该值。因此，如果选择，它将在 orderby=date&order=DESC 的末尾附加 ?orderby=date&order=ASC 。并且会继续这样做，这会导致问题。

第三，“观看次数”似乎不起作用，不确定根据浏览该页面的人数进行过滤的值应该是什么(这可能吗？!)

if ( have_posts() ) : 
    echo '<div class="posts-query">';?>
        <div id="sortby"> SORT BY: &nbsp;
        <select class="dropdown-class" name="sort-posts" id="sortbox" onchange="document.location.href=location.href+this.options[this.selectedIndex].value;">
        <option disabled>Sort by</option>
        <option value="?orderby=date&order=DESC">Newest</option>
        <option value="?orderby=date&order=ASC">Oldest</option>
        <option value="?orderby=title&order=ASC">A-Z Asc</option>
        <option value="?orderby=title&order=DESC">A-Z Desc</option>
        <option value="?orderby=views&order=ASC">Views Asc</option>
            <option value="?orderby=views&order=DESC">Views Asc</option>
    </select>
</div>


<?php while ( have_posts() ) : the_post(); ?>   
            <div class="query-post">
                <div class="posts-image">
                    <?php the_post_thumbnail("thumbnail");?>
                </div>
                <div class="post-categories">
                    <?php $postType = get_post_type_object(get_post_type());
                    if ($postType) {
                    echo esc_html($postType->labels->singular_name);
                    } ?>
                </div>

                <div class="posts-title">
                    <a href="<?php the_permalink(); ?>">
                        <h3> 
                            <?php the_title() ?>
                        </h3>
                    </a>
                </div>
            </div>
<?php endwhile; endif; ?>

有没有一种方法可以简单地按日期、标题和 View 对 WP_Query 进行排序，并且不仅可以将选项下拉列表中的所选结果保存为“已选择”，而且如果选择了新查询，还可以删除上一个查询从下拉列表中？

Answer 1

对于那些可能感兴趣的人，我使用以下代码解决了这个问题:

<div id="sortby"> SORT BY: &nbsp;
        <select class="dropdown-class" name="sort-posts" id="sortbox" onchange="document.location.search=this.options[this.selectedIndex].value;">
        <option disabled>Sort by</option>
        <option <?php if( isset($_GET["orderby"]) && trim($_GET["orderby"]) == 'date' && isset($_GET["order"]) && trim($_GET["order"]) == 'DESC' ){ echo 'selected'; } ?> value="?orderby=date&order=DESC">Newest</option>
        <option <?php if( isset($_GET["orderby"]) && trim($_GET["orderby"]) == 'date' && isset($_GET["order"]) && trim($_GET["order"]) == 'ASC' ){ echo 'selected'; } ?>  value="?orderby=date&order=ASC">Oldest</option>
        <option <?php if( isset($_GET["orderby"]) && trim($_GET["orderby"]) == 'title' && isset($_GET["order"]) && trim($_GET["order"]) == 'ASC' ){ echo 'selected'; } ?> value="?orderby=date&order=DESC" value="?orderby=title&order=ASC">A-Z Asc</option>
        <option <?php if( isset($_GET["orderby"]) && trim($_GET["orderby"]) == 'title' && isset($_GET["order"]) && trim($_GET["order"]) == 'DESC' ){ echo 'selected'; } ?>  value="?orderby=title&order=DESC">A-Z Desc</option>
        <option <?php if( isset($_GET["orderby"]) && trim($_GET["orderby"]) == 'views' && isset($_GET["order"]) && trim($_GET["order"]) == 'ASC' ){ echo 'selected'; } ?> value="?orderby=views&order=ASC">Views Asc</option>
        <option <?php if( isset($_GET["orderby"]) && trim($_GET["orderby"]) == 'views' && isset($_GET["order"]) && trim($_GET["order"]) == 'DESC' ){ echo 'selected'; } ?> value="?orderby=views&order=DESC">Views Desc</option>

        </select>
        </div>