自定义 wp_query CPT 上的简单排序下拉列表答案

【问题标题】：Simple Sort by dropdown on a custom wp_query CPT自定义 wp_query CPT 上的简单排序下拉列表
【发布时间】：2019-08-29 15:37:37
【问题描述】：

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

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

我有它，但它并不像我预期的那样工作。

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

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

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

第三，'Views' 似乎不起作用，不确定应该根据多少人查看该页面来过滤该值（这甚至可能吗？！）

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

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

【问题讨论】：

如果你想预先选择一个选项，那么你需要通过添加相应的属性来促进这一点。如果您不知道如何根据传递给脚本的参数在 PHP 中执行此操作，请进行一些研究（这只是一个新主题。）
在这种情况下，第二个问题很可能只通过操纵location.search 而不是完整的URL 来解决。
谢谢。我对该主题进行了多次搜索，虽然我发现了各种帖子 - 它们似乎都与我更“简单”的方法有关。我发现的所有内容都是按自定义字段排序的。也许我没有正确搜索。
预选用户选择的选项与专门过滤 WQ 查询无关。您需要检查哪些参数被传递给您的脚本，然后查看哪个选项与这些参数匹配。
我明白了。这不是我知道该怎么做的事情，因此我发布了这个问题，希望得到一个完整的答案。

标签： javascript php wordpress

【解决方案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>

【讨论】：