Question

更新：我可能会更好地解释这个问题，所以我在这里重新写了一遍 How can I Split Search Results into Post Types Tabs on Frontend?

我有一个Wordpress网站，我有4个帖子类型。当我进行搜索时，所有4种帖子类型都会显示在结果中。

我希望用户能够按帖子类型过滤这些结果。

例如，假设我有4个帖子类型

我可以在结果上方设置一组单选按钮以帮助过滤

所有结果（默认情况下）
按帖子类型1过滤
按帖子类型2过滤
按帖子类型3过滤
按帖子类型4过滤

这样，用户可以轻松找到他们正在寻找的确切内容，而不是始终提供所有邮政类型的内容，就是这样！

注意：我认为最好的方法是单选按钮，但我想这个字段也可能是下拉。

感谢您的帮助！

Answer 1

如果您想动态过滤结果，您将要查看AJAX解决方案（如果您正在处理可能数千个结果）或使用Javascript / jQuery切换可见性结果基于他们的后期类型。一个简单的解决方案就是这样使用jQuery。

在您的search.php模板中：

<form action="" method="POST">
    <input class="radioToggle" type="radio" name="post_type" value="type1" />Filter 1<br/>
    <input class="radioToggle" type="radio" name="post_type" value="type2" />Filter 2<br/>
    <input class="radioToggle" type="radio" name="post_type" value="type3" />Filter 3<br/>
</form>
<div class="result type1">
    result of type 1....
</div>
<div class="result type2">
    result of type 2....
</div>
<div class="result type2">
    result of type 2....
</div>
<div class="result type3">
    result of type 3....
</div>
<div class="result type3">
    result of type 3....
</div>
<div class="result type3">
    result of type 3....
</div>
<script type="text/javascript">
    jQuery(document).ready(function($))
    {
        $(".radioToggle").click(function()
        {
            $(".result."+$(this).attr("value")).css("display", "block");
            $(".result:not(."+$(this).attr("value")+")").css("display", "none");
        });
    });
</script>

这是未经测试的，我个人会完全避免这样做。我个人认为应该事先使用PHP过滤搜索结果，而不是之后使用Javascript。但是，如果这对您的用户界面来说是必要的，那么这应该有助于您入门。

请记住，为了使用此方法，需要在主题中安装或加入jQuery。

如何按前端的帖子类型过滤搜索结果？

1 个答案: