zibll子比主题首页大图搜索框

北海的鱼

食用教程

首先在主题目录下创建func.php文件,有的人可能已经有此文件了。
在func.php添加如下代码即可

<?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://zsg-1251454718.cos.ap-beijing.myqcloud.com/%E8%AE%B0%E5%BD%95%E7%AC%94%E8%AE%B0.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(//s1si.com/wp-content/themes/zibll/img/hot.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="//www.ytshopcn.com/img/提示.svg" >
<a href="https://s1si.com/forums" target="_blank"><p class="sort-config-title">社区

</p> </a>
<span class="sort-config-desc">S14社区论坛</span>
</div></li> <li>
<div class="sort-config-item">
<img class="sort-config-icon" src="//www.ytshopcn.com/img/文章.svg" >
<a href="https://s1si.com/forum/146.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="//www.ytshopcn.com/img/图片.svg" >
<a href="https://s1si.com/forum/263.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="//www.ytshopcn.com/img/安全.svg" >
<a href="https://s1si.com/user/vip" 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="//www.ytshopcn.com/img/注意.svg" >
<a href="https://s1si.com/user/" 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
}
}


此搜索框只能在pc端查看
只能用视频文件替代背景
视频背景高度在代码11行修改
视频链接地址在代码13行修改
其他的自己研究研究吧,教程结束。

打赏
评论区
头像