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

Question

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

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

我希望用户能够通过发布类型过滤这些结果。

例如，可以说我有4×文章类型

我能有上述结果的一组单选按钮，以帮助过滤

• 所有结果（默认）
• 筛选依据交的类型1
• 过滤器的交类型2
• 过滤器的交类型3
• 过滤器的交类型4

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

注：我认为最好的方法是单选按钮，但我猜这个领域也可能是一个下拉菜单。

感谢您的帮助！

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将需要安装或通过您的主题排队。