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

🤖 由 星火认知大模型 生成的文章摘要
此内容根据文章生成,并经过人工审核,仅用于文章内容的解释与总结
B2主题顶部导航搜索框改折叠显示

效果展示

首先将下面代码替换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>';
}

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

/*顶部导航搜索框改折叠*/
.top-search-button{
float: left;
}
.top-search-select {
margin-top: 5px;
}
.social-top .top-search {
margin-right: 16px;
}
.search-button-action {
background: none;
border: 0;
position: absolute;
right: -5px;
top: auto;
color: inherit;
}
.social-top .top-search {
margin-right: 16px;
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (max-width: 768px){
#searchBtn{
display: none;
}
}
#search-button-on{
margin-right: 30px;
background: none;
border: 0;
position: absolute;
right: -5px;
top: auto;
color: inherit;
}
#searchBtn .b2font{
font-size: 22px;
}
/*修复登陆录后间距过大和移动端位移*/
.social-top .header-user {
width: auto;
margin: 0 auto;
}
@media screen and (max-width: 768px){
.social-top .header-user{
width: 120px;
margin: 0;
}
}
@media screen and (max-width: 768px){
.mobile-hidden{
display: none;
}
}

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

var searchBtn = document.getElementById('searchBtn');
searchBtn.addEventListener('click', function() {
var searchBox = document.getElementById('searchBox');
if (searchBox.style.display === 'block') {
searchBox.style.display = 'none';
searchBtn.querySelector("i").classList.remove("b2-close-line");
searchBtn.querySelector("i").classList.add("b2-search-line");
} else {
searchBox.style.display = 'block';
searchBtn.querySelector("i").classList.remove("b2-search-line");
searchBtn.querySelector("i").classList.add("b2-close-line");
}
});
文章作者:阿库
文章链接:https://akau.cn/8017.html
温馨提示:本文最后更新于2024-05-12 ,如有错误或者已经失效,请留言告知。
版权声明:本站所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议,转载请注明来自:阿库笔记

给TA打赏
共{{data.count}}人
人已打赏
源码分享

WPOPT-功能众多的免费WordPress优化插件

2024-4-28 23:51:31

源码分享

推荐一款WordPress AI智能摘要插件

2024-5-12 18:19:44

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新私信 私信列表
搜索