7B2主题 – 顶部导航搜索框改折叠显示

7b2主题将原来电脑端页面顶部的搜索框改为搜索的按钮，并且增加折叠弹出的功能，部分站长应该需要这个功能，能更好的简化主题模版，当然也可能增加网友点击的复杂度，这个根据个人网站匹配进行美化，如果需要的话请收藏自行测试。

使用教程：

1.首先将下面代码替换xcbtmw.com/wp-content/themes/b2/Modules/Templates/Header.php

第196行开始至大约210行 public static function sub_menu 之前（不知道什么原因子主题不起作用）

    <form method="get" action="'.B2_HOME_URI.'" class="mobile-search-input b2-radius" id="searchBox" style="display:none;">
    <div class="top-search-button">
    <a class="top-search-select" '.(count($_post_type) > 1 ? '@click.stop.prevent="show = !show"' : '').' href="javascript:void(0)"><span v-show="data != ''" v-text="data[type]">'.reset($_post_type).'</span>'.b2_get_icon('b2-arrow-down-s-line').'</a>
    '.$search.'
    </div>
    <input class="search-input b2-radius" type="text" name="s" autocomplete="off" placeholder="'.__('搜索','b2').'">
    <input type="hidden" name="type" :value="type">
    <button id="search-button-on" class="search-button-action">'.b2_get_icon('b2-search-line').'</button>
    </form>
    <button id="searchBtn" class="search-button-action">'.b2_get_icon('b2-search-line').'</button>
    </div>';
    }

2.CSS样式代码

然后是CSS，可以添加到子主题的 /wp-content/themes/b2child/style.css 文件

3.最后是js，复制到子主题的 wp-content/themes/b2child/child.js

隐藏内容，输入密码后查看

微信扫描二维码或搜索【狐狸工具盒】小程序，输入【3912】获取密码验证后才能查看！！！

提交