zibll子比主题首页大搜索框美化源码和教程（史上最详细）

045915
图片[1]-zibll子比主题首页大搜索框美化源码和教程（史上最详细） - 尼古拉网赚-尼古拉网赚

教程

在zibi主题的根目录下创建文件func.php文件，如果你用的是宝塔面板的话，那么就是在如下路径创建：

/www/wwwroot/你的域名.com/wp-content/themes/zibll

然后添加如下代码即可

<?php

add_action('wp_head', 'zibll_Add_ons_newindex');
function zibll_Add_ons_newindex() {
if(is_home()){
?>

<!--新首页开始-->
<div id="page-wrapper">
<div class="home-banner por">
<section class="section" style="height: calc(100vh - 220px);max-height: 600px;">
<div class="video-wrapper">
<video autoplay="" playsinline="" loop="" muted="" src="https://nglwz.com/wp-content/themes/zibll/video/sea.mp4">
</video>
</div>
<div class="video-overlay">
</div>
</section>
<div class="wrapper poa" style="top: 20%;">
<div class="home-banner-content Onecad_clearfix">
<div class="slogan-text por fl">
<p><?php echo get_bloginfo('name'); ?><i class="iblock poa corner" style="background:url(//nglwz.com/wp-content/themes/zibll/img/svg/6.svg) no-repeat;"></i></p>
<p class="promote-sub-title line-one">已发布<span style="display: inline-block;overflow: hidden;line-height: 34px;vertical-align: -9px;">
<em id="goal-works" value="5351266" style="font-style: normal;">
<ps style="color: #26d6c8;"><?php $count_posts = wp_count_posts(); echo $published_posts =$count_posts->publish;?></ps>
</em>
</span>篇文章内容</p>
</div>
</div>
<div class="home-banner-search por searchv2-top-m">
<div class="primary-menus" style=" position: unset;transform: translate(1px, 1px);">
<div class="cont">
<div class="left-cont">
<form class="search" id="search_4" action="/?s=" method="get" target="_blank">
<input type="text" name="s" class="s" placeholder="输入关键词 按回车搜索">
<button type="submit" name="" class="btn">
站内搜索
</button>
</form>
<div class="tag"><a href="/?s=源码" target="_blank">源码</a><a href="/?s=模板 " target="_blank">模板</a><a href="/?s=插件" target="_blank">插件</a><a href="/?s=项目" target="_blank">项目</a></div>

</div>
</div>
</div>
</div>
</div>
<!-- 头部快速链接导航 -->

</div>
</div>
<div id="home-row-qukuai" class=" home_row home_row_1 module-qukuai " style="background-color:;">
<div class="wrapper">
<div class="home-row-left content-area ">
<div class="sort jitheme_radius" style="margin-top:-80px ;">
<ul class="sort-config">
<li>
<div class="sort-config-item">
<img class="sort-config-icon" src="//nglwz.com/wp-content/themes/zibll/img/svg/1.svg" >
<a href="https://nglwz.com/shequ" target="_blank"><p class="sort-config-title">社区

</p> </a>
<span class="sort-config-desc">尼古拉社区</span>
</div></li> <li>
<div class="sort-config-item">
<img class="sort-config-icon" src="//nglwz.com/wp-content/themes/zibll/img/svg/2.svg" >
<a href="https://mulu.yhm123456pay.cn/share?app=12345678901" target="_blank"><p class="sort-config-title">资源

</p> </a>
<span class="sort-config-desc">资源目录查看</span>
</div></li> <li>
<div class="sort-config-item">
<img class="sort-config-icon" src="//nglwz.com/wp-content/themes/zibll/img/svg/3.svg" >
<a href="https://nglwz.com/user/" target="_blank"><p class="sort-config-title">会员

</p> </a>
<span class="sort-config-desc">用户会员中心</span>
</div></li> <li>
<div class="sort-config-item">
<img class="sort-config-icon" src="//nglwz.com/wp-content/themes/zibll/img/svg/4.svg" >
<a href="https://nglwz.com/forum/109.html/" target="_blank"><p class="sort-config-title">求助

</p> </a>
<span class="sort-config-desc">求助问答留言</span>
</div></li> <li>
<div class="sort-config-item">
<img class="sort-config-icon" src="//nglwz.com/wp-content/themes/zibll/img/svg/5.svg" >
<a href="https://nglwz.com/76.html/" target="_blank"><p class="sort-config-title">关于我们

</p> </a>
<span class="sort-config-desc">关于我们网站</span>
</div></li> </ul>
</div>
</div>
</div>
</div>

<style scoped>
#page-wrapper {
padding-bottom:16px;
margin-top:-16px;
}

.left-cont a, .sort-config span,.wrapper p,.sort jitheme_radius ul,.sort jitheme_radius li {
border: 0;
font-family: inherit;
/*font-size: 100%;*/
font-style: inherit;
font-weight: inherit;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
word-wrap: break-word;
box-sizing: border-box;
}

.por {
position: relative;
}
.home-banner {
position: relative;
/* z-index: 1; */
background-position: 0 100%;
animation: gradient 12s ease-in-out infinite;
}
.home-banner .section {
position: relative;
width: 100%;
overflow: hidden;
/* max-height: 600px; */
/* height: calc(100vh - 220px); */
}
.home-banner .section .video-wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
z-index: 0;
}
.home-banner .section .video-wrapper video {
visibility: visible;
pointer-events: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
height: 100%;
width: 100%;
object-fit: cover;
}
canvas, img, video {
max-width: 100%;
height: auto;
box-sizing: border-box;
}
audio, canvas, iframe, img, svg, video {
vertical-align: middle;
}
.home-banner .section .video-overlay {
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
background: rgba(45,47,54,.15);
}
.poa {
color: #fff;
}
.slogan-text.por.fl {
/* margin-left: 200px; */
text-align: center;
width: 100%;
margin-bottom: 50px;
}
.fl {
float: left;
}
.por {
position: relative;
}
.home-banner-content .slogan-text p:nth-of-type(1) {
font-weight: 600;
font-size: 28px;
line-height: 46px;
letter-spacing: 6px;
text-shadow: 0 2px 4px rgb(0 0 0 / 25%);
margin-bottom: 20px;
}
.home-banner .corner {
width: 28px;
height: 21px;
position: absolute;
border-radius: 4px;
margin: 0px;
/* left: 340px; */
/* top: 10px; */
}
.home-banner-content .slogan-text p {
font-size: 18px;
line-height: 24px;
letter-spacing: 2px;
font-weight: 600;
text-shadow: 0 2px 4px rgb(0 0 0 / 25%);
}
.Onecad_clearfix:after {
content: '';
clear: both;
display: block;
height: 0;
visibility: hidden;
font-size: 0;
line-height: 0;
}
.home_row {
position: relative;
margin-bottom: 24px /* border-bottom:1px dashed rgba(255, 255, 255, 0.3); */;
}
.home_row > div {
display: flex;
margin: 0 auto;
max-width: 100%;
position: relative;
margin-top: 16px;
}
.wrapper {
/*width: 1300px;*/
width: 1170px;
}
.poa {
position: absolute;
width: calc(100% - 200px);
margin: 0 100px;
}
.home-row-left.content-area {
max-width: 100%;
}
.b2-content .content-area, .post-style-2 .content-area, .archive .content-area {
margin: 0 auto;
}
.content-area {
width: 100%;
max-width: 100%;
}
.sort, .jitheme_slide_jb, .jitheme_radius {
border-radius: 10px;
}

.sort {
position: relative;
z-index: 3;
padding: 26px;
background: rgba(255,255,255,0.1);
/* border: 1px solid #797c80; */
/* -webkit-box-shadow: 0 40px 75px 0 rgb(57 60 67 / 8%); */
/* box-shadow: 0 40px 75px 0 rgb(57 60 67 / 8%); */
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.sort-config {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.jitheme-pages-vip ol, ul, li {
list-style: none;
}
.sort-config>li {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
overflow: hidden;
height: 100%;
}
.sort-config-item {
display: block;
height: 100%;
}
.sort-config-item img {
float: left;
width: 62px;
height: 62px;
margin-right: 12px;
}
a, a:active, a:visited {
text-decoration: none;
transition: all .2s;
}
.sort-config-title {
line-height: 34px;
font-size: 18px;
font-weight: 600;
color: var(--main-color);
-webkit-transition: .3s;
transition: .3s;
}
.sort-config-desc {
float: left;
line-height: 22px;
font-size: 14px;
color: #8e8e8e;
}
.hidden {
display: none !important;
}
.home-banner-search {
width: 50%;
/* margin-left: 209px; */
height: auto;
margin: auto;
}
.left-cont {
border: 5px solid rgb(255 255 255 / 18%);
border-radius: 30px;
}
.home-banner-search form>input {
width: 100%;
height: 50px;
background: #fff;
border: none;
padding: 18px 22px;
font-size: 14px;
color: #333;
border-radius: 30px;
}
.home-banner-search input, textarea {
border-radius: 0px;
}
button, input[class="s"] {
-webkit-appearance: none;
outline: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;
border: 1px solid #ccc;
box-sizing: border-box;
}
.primary-menus .left-cont button {
height: 50px;
box-sizing: border-box;
min-width: 100px;
/* margin-left: 0px; */
cursor: pointer;
color: #fff;
font-size: 15px;
line-height: 40px;
position: absolute;
right: 5px;
top: 5px;
border-radius: 1px 30px 30px 1px;
padding: 0 15px;
transform: translateY(0px);
}
.button, button {
background: #fc3c2d;
border: 1px solid #fc3c2d;
border-radius: 0px;
}
.home-banner-search .tag {
position: absolute;
right: 100px;
top: 0;
padding: 15px 10px;
display: none;
}
.home-banner-search .tag a {
display: inline;
padding: 0px 8px;
border-radius: 10px;
background: #EFEFEF;
float: left;
margin: 5px;
height: 20px;
line-height: 20px;
color: #A0A0A0;
font-size: 12px;
}
.home-banner-search .tag a:hover {
background: #fc3c2d;
color: #fff;
}

@media (max-width:776px) {#page-wrapper {display: none;}
#home-row-qukuai {display: none;}
}

@media (min-width: 1440px){
.home-banner-search .tag{display:block}
}
</style>
<?php
}
}

一、视频修改

13行代码

https://zsg-1251454718.cos.ap-beijing.myqcloud.com/%E8%AE%

B0%E5%BD%95%E7%AC%94%E8%AE%B0.mp4

这里修改你存放首页视频文件的地址，cos/oss储存可以后台查看。

放在服务器上，在宝塔面板后台文件直接上传即可，例如上传到 /www/wwwroot/你的域名.com/wp-content/themes/zibll/video目录下

那么存放视频的路径地址就修改为：

https://你的域名.com/wp-content/themes/

zibll/video/视频文件名.mp4

二、图标所在路径和图标指向地址修改

修改图标，图标下载地址：https://www.iconfont.cn/，看见喜欢的自己下载即可，共需要6个图标

图片[2]-zibll子比主题首页大搜索框美化源码和教程（史上最详细） - 尼古拉网赚-尼古拉网赚

22行代码 //nglwz.com/wp-content/themes/zibll/img/svg/hot.svg

图片[3]-zibll子比主题首页大搜索框美化源码和教程（史上最详细） - 尼古拉网赚-尼古拉网赚

58行代码 路径修改 //nglwz.com/wp-content/themes/zibll/img/svg/1.svg

59行代码 指向地址修改 https://nglwz.com/shequ

65行代码 路径修改 //nglwz.com/wp-content/themes/zibll/img/svg/2.svg

66行代码 指向地址修改 https://mulu.yhm123456pay.cn/share?app=12345678901

72行代码 路径修改 //nglwz.com/wp-content/themes/zibll/img/svg/3.svg

73行代码 指向地址修改 https://nglwz.com/user/

79行代码 //nglwz.com/wp-content/themes/zibll/img/svg/4.svg

80行代码 指向地址修改 https://nglwz.com/forum/109.html/

86行代码 //nglwz.com/wp-content/themes/zibll/img/svg/5.svg

87行代码 指向地址修改 https://nglwz.com/76.html/

三、剩下的文字信息，自己按需修改即可

11行代码可修改高度

不足的地方就是此代码只能PC端显示有效，手机端无效

© 版权声明
分享是一种美德，转载请标明出处。
文章版权声明 1 本网站名称：尼古拉网赚
2 本站永久网址：www.nglwz.com
3 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
4 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报。
5 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需，并且本站不提供任何技术支持！
6 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系51@nglwz.com
7 根据《计算机软件保护条例》第十七条，本站所有软件、程序请仅用于学习研究用途 ，切勿用于商业用途或非法用途。
8 本站仅为转载分享，不提供任何上传下载服务，所有内容均来自互联网第三方分享站点所提供的公开引用内容。更多查阅《免责声明》
THE END
网站主题插件
# wordpress# 主题美化
喜欢就支持一下吧
点赞15 分享
nglwz的头像-尼古拉网赚VIP会员
会员说明-尼古拉网赚
会员说明
会员说明
12个月前 237
2023普通人的翻身机会——抖音图文计划-尼古拉网赚
2023普通人的翻身机会——抖音图文计划
2023普通人的翻身机会——抖音图文计划
11个月前 218
下载说明-尼古拉网赚
下载说明
下载说明
12个月前 207
不到半个月你也可以成为PS大神-尼古拉网赚
不到半个月你也可以成为PS大神
不到半个月你也可以成为PS大神
11个月前 142
合法安全免费安装Office软件三条代码帮你搞定，保姆教程-尼古拉网赚
合法安全免费安装Office软件三条代码帮你搞定，保姆教程
合法安全免费安装Office软件三条代码帮你搞定，保姆教程
11个月前 133
搭建自己的专属图床——Chevereto+PicGo，保姆教程（基于宝塔面板部署）-尼古拉网赚
搭建自己的专属图床——Chevereto+PicGo，保姆教程（基于宝塔面板部署）
搭建自己的专属图床——Chevereto+PicGo，保姆教程（基于宝塔面板部...
12个月前 131
相关推荐
zibll子比主题首页大搜索框美化源码和教程（史上最详细）-尼古拉网赚
zibll子比主题首页大搜索框美化源码和教程（史上最详细）
zibll子比主题首页大搜索框美化源码和教程（史上最详细）
12个月前 459
搭建自己的专属图床——Chevereto+PicGo，保姆教程（基于宝塔面板部署）-尼古拉网赚
搭建自己的专属图床——Chevereto+PicGo，保姆教程（基于宝塔面板部署）
搭建自己的专属图床——Chevereto+PicGo，保姆教程（基于宝塔面板部署）
12个月前 131
wordpress底部美化：数据库查询次数+页面加载时间+内存使用大小-尼古拉网赚
wordpress底部美化：数据库查询次数+页面加载时间+内存使用大小
wordpress底部美化：数据库查询次数+页面加载时间+内存使用大小
12个月前 122
推荐10款最受欢迎的WordPress安全插件-尼古拉网赚
推荐10款最受欢迎的WordPress安全插件
推荐10款最受欢迎的WordPress安全插件
11个月前 107
子比主题文章评论添加常用语保姆教程-尼古拉网赚
子比主题文章评论添加常用语保姆教程
子比主题文章评论添加常用语保姆教程
9个月前 82
WordPress10款常用的美化主题插件和下载地址和各自评价-尼古拉网赚
WordPress10款常用的美化主题插件和下载地址和各自评价
WordPress10款常用的美化主题插件和下载地址和各自评价
11个月前 68
评论 抢沙发
头像
欢迎您留下宝贵的见解！
提交
头像

昵称

取消
昵称

请填写用户信息：

  • 昵称(必填)
  • 邮箱(必填)
表情
[aoman][baiyan][bishi][bizui][cahan][ciya][dabing][daku][deyi][doge][fadai][fanu][fendou][ganga][guzhang][haixiu][hanxiao][zuohengheng][zhuakuang][zhouma][zhemo][zhayanjian][zaijian][yun][youhengheng][yiwen][yinxian][xu][xieyanxiao][xiaoku][xiaojiujie][xia][wunai][wozuimei][weixiao][weiqu][tuosai][tu][touxiao][tiaopi][shui][se][saorao][qiudale][se][qinqin][qiaoda][piezui][penxue][nanguo][liulei][liuhan][lenghan][leiben][kun][kuaikule][ku][koubi][kelian][keai][jingya][jingxi][jingkong][jie][huaixiao][haqian][aini][OK][qiang][quantou][shengli][woshou][gouyin][baoquan][aixin][bangbangtang][xiaoyanger][xigua][hexie][pijiu][lanqiu][juhua][hecai][haobang][caidao][baojin][chi][dan][kulou][shuai][shouqiang][yangtuo][youling]
代码

请输入代码：

确认
图片

    暂无评论内容

搜索
开启精彩搜索

zibll子比主题首页大搜索框美化源码和教程（史上最详细）

会员说明

2023普通人的翻身机会——抖音图文计划

下载说明

不到半个月你也可以成为PS大神

合法安全免费安装Office软件三条代码帮你搞定，保姆教程

随笔视频号网站安全网盘素材男粉版权说明服务协议建站工具域名图文图床办公软件关于我们会员说明主题美化主题安全下载说明下载工具
百度一下
关键词不能为空