给WordPress5.0以上版本的Begin主题添加分类搜索功能

前因

前几天就发现搜索功能用不了，网上查了一个，升级到WordPress5.0以上的时候就会发现自带的搜索就会不见了。

具体原因可能是WordPress代码改变了。

解决办法是吧主题根目录的searchform.php修改下就能正常使用。

增加分类搜索功能

这是原来的代码

<div class="searchbar">
        <form method="get" id="searchform" action="<?php echo esc_url( home_url() ); ?>/">
                <span class="search-input">
                        <input type="text" value="<?php the_search_query(); ?>" name="s" id="s" placeholder="<?php _e( '输入搜索内容'
, 'begin' ); ?>" required />
                        <button type="submit" id="searchsubmit"><i class="be be-search"></i></button>
                </span>
                <?php if (zm_get_option('search_cat')) { ?>
                <span class="search-cat">
                        <?php args = array(
                                'show_option_all' => '全部分类',
                                'hide_empty'      => 0,
                                'name'            => 'cat',
                                'show_count'      => 0,
                                'taxonomy'        => 'category',
                                'hierarchical'    => 1,
                                'depth'           => -1,
                                'exclude'         => zm_get_option('not_search_cat'),
                        ); ?>
                        <?php wp_dropdown_categories(args ); ?>
                </span>
                <?php } ?>
        </form>
</div>

原来的代码全部删掉，改成我写的。

<div class="off-search wow fadeInRight animated" ></div>
<div class="off-search-a"></div>
<div class="search-wrap">
      <div class="searchbar">
                <form method="get" id="searchform" action="<?php echo esc_url( home_url() ); ?>/">
                        <span class="search-input">
                                <input type="text"  value="<?php the_search_query(); ?>" name="s" id="s" placeholder="<?php _e( '输入
搜索内容', 'begin' ); ?>" required />
                                <button type="submit" id="searchsubmit"><i class="be be-search"></i></button>
                        </span>
                                <!--<?php wp_dropdown_categories("show_option_all=所有分类&hide_empty=0&show_count=0&hierarchical=1&d
epth=1&name=cat"); ?>--!>
                                <?php wp_dropdown_categories("show_option_all=所有分类&hide_empty=0&show_count=0&exclude=1&depth=1&na
me=cat"); ?>
                        <?php if (zm_get_option('search_option') == 'search_cat') { ?>
                        <?php search_cat_args( ); ?>
                        <?php } ?>
                </form>
        </div>
</div>

至于为什么写多那么多div和class，因为我增加了不少样式。

修改样式

好了搜索框出来了，但是样式也太难看了

咋办，自己写？写就写，在这里要感谢橙子小姐姐的帮忙，给了一些css的参考我才能想出来。

你可以拷贝到后台，外观,定制风格，自定义样式的框框里，直接追加到最后，原来的代码要保留。

/*搜索框样式*/
#search-main{
position: fixed;
   padding:0;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    background: rgba(0,0,0,0.8);
    height: 100%;
    width: 100%;
    text-align: center;
    display: none;
    z-index: 99999;
}
.search-input input {
    width:80%;
}
/*搜索框距离频幕上端*/
.off-search-a {
    height: 15%;
}
/*搜索表单 */
form#searchform{
    position: relative;
}
/* 下拉菜单  */
select#cat {
    border: none;
    margin: 18px;
    margin: 0;
    width: 120px;
    position: absolute;
    right: 20%;
    border-left: 1px solid #cacaca;
    font-size: 15px;
    letter-spacing: 1px;
    height: 100%;
}
/*搜索框叉叉按钮*/
.off-search {
    position: absolute;
    top: 30px;
    right: 30px;
}

.off-search:after {
    font-family: be;
    font-size: 14px !important;
    color: #fff;
    cursor: pointer;
    padding: 8px;
    border-radius: 20px;
    border: 1px solid #fff;
}

.off-search:hover:after{
 background:#fff;
 color:#000;
}
/*搜索按钮 */
button#searchsubmit:hover {
    background: #866464;
}

最后的效果

添加动态效果

添加把关闭按钮加到搜索页了，需要点击的时候触发淡出的效果。

找到主题根目录， 编辑js/script.js，大约88行，改成我这样

文字版本代码如下

// 搜索
(".nav-search").click(function() {
        // (this).toggleClass ("off-search");
        ("#search-main").fadeToggle(300);
});(".off-search").click(function() {
        $("#search-main").fadeToggle(300);
});

fadeToggle 是jQuery的淡入淡出效果，

fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换。
如果元素是淡出显示的，fadeToggle() 会使用淡入效果显示它们。
如果元素是淡入显示的，fadeToggle() 会使用淡出效果显示它们。

注意，修改了js需要清理下浏览器cookie

引用