0

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

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

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

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

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

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

这样，用户可以轻松找到他们正在寻找的确切内容，而不是一直提供所有 POST TYPES 的内容，就是这样！

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

谢谢你的帮助！

4

1 回答 1

0

如果您想动态过滤结果，您将需要研究 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 或将其加入队列。

于 2012-07-11T15:54:47.410 回答