手札

一篇文章彻底搞懂wordpress搜索

首先上代码默认的wordpress搜索功能:

第一、默认的wordpress搜索代码

<?php get_search_form(); ?>

直接可以生成默认的html结构，比如下图

如果觉得不够漂亮，来吧下面这样的

<style>
    .search-field{
        line-height: 35px;
        height: 35px;
        padding: 0;
        margin: 0;
        border: 1px solid #0d66c2;
    }

    .search-submit{
        height: 35px;
        padding:0 15px;
        margin: 0;
        box-sizing: border-box;
        background-color: #0d66c2;
        border: 0;
        color: white;
    }
</style>

这只是默认的样式，我们来看第二种。

第二、自定义的html结构，这一步也很简单，根据上一步wordpress主题自带的获取搜索生成的结构，查看源代码修改即可:

<form role="search"  method="get" class="hx_serch" action="<?php bloginfo('url'); ?>">
    <input type="search" class="hx_input_search" value="" name="s" />
    <input type="submit" class="search-submit" value="搜索" />
</form>

这里两个注意点：

1、wordpress的搜索表单method一定要为get方式；

2、搜索输出框的name属性值一定要为s

第三、高级搜索筛选，支持选择分类筛选：

<?php
   $arg = array('search'=>get_search_query());
   $categories = get_categories($arg);
?>
<form role="search"  method="get" class="hx_serch" action="<?php bloginfo('url'); ?>">
    <select name="cat">
        <?php     
        if(!empty($categories)){
        foreach( $categories as $category ){
      ?>
        <option name="cat" value="<?php echo $category->name?>"><?php echo $category->name?></option>
        <?php   }} ?>
    </select>
    <input type="search" class="hx_input_search" value="" name="s" />
    <input type="submit" class="search-submit" value="搜索" />
</form>

效果如下图