如何在前端按帖子类型筛选搜索结果


How to Filter Search Results by Post Type on Frontend?

更新:我可能已经更好地解释了这个问题,所以我在这里重写了它如何在前端将搜索结果拆分为帖子类型选项卡?

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

我希望用户能够按Post Type筛选这些结果。

例如,假设我有4个Post Types

我可以在结果上面有一组单选按钮来帮助过滤吗

  • 所有结果(默认情况下)
  • 按帖子类型1筛选
  • 按帖子类型2筛选
  • 按帖子类型3筛选
  • 按帖子类型4筛选

这样,用户就可以很容易地找到他们想要的确切内容,而不是一直提供所有帖子类型的内容,仅此而已!

注意:我认为最好的方式是单选按钮,但我想字段也可能是下拉框。

谢谢你的帮助!

如果你想实时过滤结果,你需要研究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。但是,如果这对你的UI来说是必要的,那么这应该会帮助你开始。

请记住,为了使用此方法,jQuery需要按照主题进行安装或排队。