wp_B2主题美化之首页动态视频搜索模块
今天老白博客跟大家分享的WordPress美化教程为：wp_B2主题美化之首页动态视频搜索模块。转载自网络，感谢原作者分享。其他WordPress主题也可以参考代码，修改一下就能用！
B2主题美化首页动态视频搜索模块
以下教程转载自https://west2.cn/6187.html，感谢站长分享
1.添加搜索模块
将以下代码放至主题模块中（主题设置-模块管理-自定义代码），自己改动一下里面的视频网址和url主页的路径
<!--动态搜索背景html代码开始-->
<style>
.poa {
color: #f4f4f4;
}
p.home-banner-linkss.line-one1 {
width: 80%;
font-size: 14px;
height:
20px;
line-height: 20px;
color: #f4f4f4;
text-shadow: 0 2px 4px rgb(0 0 0 / 27%);
margin-top: 40px;
text-align: center;
}
</style>
<div id="page-wrapper">
<div class="home-banner por">
<section class="section">
<div class="video-wrapper">
<video autoplay playsinline="" loop muted="" src="https://static.699pic.com/video/video-banner-v2.2.mp4">
</video>
</div>
<div class="video-overlay">
</div>
</section>
<div class="wrapper poa" style="top: 0;left: 50%;margin-left: -600px;">
<div class="home-banner-content Onecad_clearfix">
<div class="slogan-text por fl">
<p>优质海量资源欢迎下载</p>
<a href="" target="_blank">
<i class="iblock poa corner" style="background:url(/js/hot.svg) no-repeat;"></i>
</a>
<p class="promote-sub-title line-one">
开通VIP免费下载全站内容 </p>
</div>
</div>
<div class="home-banner-search por searchv2-top-m">
<div class="primary-menus" style=" width: 92%; position: unset;transform: translate(1px, 1px);">
<div class="search-types-cycles poa">
<ul class="selects">
<li data-target="search_1">
百度
</li>
<li data-target="search_2">
Bing
</li>
<li data-target="search_3">
站内
</li>
<li data-target="search_4" class="current">
站内搜索
</li>
<li data-target="search_5">
头条
</li>
<li data-target="search_6">
知乎
</li>
<li data-target="search_7">
360
</li>
</ul>
</div>
<div class="cont">
<div class="left-cont">
<form class="search hidden" id="search_1" action="https://www.baidu.com/s?wd=" method="get" target="_blank">
<input type="text" name="wd" class="search_baidu" placeholder="输入关键词 按回车搜索">
<button type="submit" name="" class="btn search_baidu">
百度搜索
</button>
</form>
<form class="search hidden" id="search_2" action="https://cn.bing.com/search?q=" method="get" target="_blank">
<input type="text" name="q" class="search_bing" placeholder="输入关键词 按回车搜索">
<button type="submit" name="" class="btn search_bing">
Bing搜索
</button>
</form>
<form class="search hidden" id="search_3" action="https://west2.cn/?s=" method="get" target="_blank">
<input type="text" name="q" class="" placeholder="输入关键词 按回车搜索">
<button type="submit" name="" class="btn ">
站内搜索
</button>
</form>
<form class="search" id="search_4" action="https://west2.cn/?s=" method="get" target="_blank">
<input type="text" name="s" class="s" placeholder="输入关键词 按回车搜索">
<button type="submit" name="" class="btn">
站内搜索
</button>
</form>
<form class="search hidden" id="search_5" action="https://so.toutiao.com/search?dvpf=pc&source=input&keyword=" method="get" target="_blank">
<input type="text" name="query" class="search_toutiao" placeholder="输入关键词 按回车搜索">
<button type="submit" name="" class="btn search_toutiao">
头条搜索
</button>
</form>
<form class="search hidden" id="search_6" action="https://www.zhihu.com/search?q=" method="get" target="_blank">
<input type="text" name="q" class="search_zhihu" placeholder="输入关键词 按回车搜索">
<button type="submit" name="" class="btn search_zhihu">
知乎搜索
</button>
</form>
<form class="search hidden" id="search_7" action="https://www.so.com/s?q=" method="get" target="_blank">
<input type="text" name="q" class="search_360" placeholder="输入关键词 按回车搜索">
<button type="submit" name="" class="btn search_360">
360搜索
</button>
</form>
<a class="hot-top text-notify" href="/tags" target="_blank" tips="标签" direction="bottom">
<img src="/js/rank.svg" class="icon-rank" height="15">
</a>
</div>
</div>
</div>
<p class="home-banner-links line-one">热搜词：<a href="https://west2.cn/2503.html" target="_blank">内容1</a><a href="https://west2.cn/?s=%E4%BC%A0%E5%A5%87" target="_blank">内容2</a><a href="https://west2.cn/" target="_blank">内容3</a><a href="https://west2.cn/?s=%E8%88%AA%E6%B5%B7%E7%8E%8B" target="_blank">内容4</a><a href="https://west2.cn/?s=%E7%81%AB%E5%BD%B1" target="_blank">内容5</a></p>
</div>
</div>
</div>
</div>
<script>
/*首页动态大图搜索开始*/
(function($) {
var m = $('.primary-menus');
if (m.length < 1) return;
var ul = m.find('.selects');
if (ul.length < 1) return;
var lis = ul.children('li');
if (lis.length < 1) return;
var s = m.find('.search');
var sVal = s.find('.s').val();
lis.on('click', function() {
var d = $(this).attr('data-target');
if (d) {
lis.removeClass('current');
$(this).addClass('current');
s.addClass('hidden');
s.filter('#' + d).removeClass('hidden');
//s.filter('#'+d).find('.s').val('');
s.filter('#' + d).find('.s').trigger('focusin');
}
});
s.find('.s').on('focusin', function() {
if ($(this).val() == sVal) {
$(this).val('');
}
})
s.find('.s').on('focusout', function() {
var v = $(this).val();
if (orz.isEmpty(v)) {
v = sVal;
}
s.find('.s').val(v);
})
})(jQuery);
/*首页动态大图搜索结束*/
</script>
<!-- 动态背景搜索html代码结束 -->
2.CSS美化搜索模块
将下列CSS代码放入WP额外CSS中（WP后台-外观-自定义-额外css），子主题的css也可以
/*首页动态背景搜索样式代码开始*/
.search_360{
color:#fff;
background-color:#28bc5b;
}
.search_baidu{
color:#fff;
background-color:#4E6EF2;
}
.search_bing{
color:#fff;
background-color:#ffc20e;
}
.search_toutiao{
color:#fff;
background-color:#f04142;
}
.search_zhihu{
color:#fff;
background-color:#06f;
}
#page-wrapper {
padding-bottom:16px;
margin-top:-85px
}
.home-banner {
height:550px;
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:550px;
height:100vh
}
.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
}
.home-banner .section .video-overlay {
height:100%;
width:100%;
top:0;
left:0;
position:absolute;
background:rgba(45,47,54,.15)
}
.home-banner .corner {
width: 28px;
height: 21px;
border-radius: 4px;
left: 340px;
top: 10px;
}
.home-banner .home-menus {
margin-left:70px
}
.home-banner .home-menus .cus-dropbox-trigger a,.home-banner .home-menus>a {
color:#fff;
font-size:14px;
margin-right:20px;
line-height:60px
}
.home-banner .home-menus .cus-dropbox-trigger a:hover,.home-banner .home-menus>a:hover {
color:var(--b2color);
}
.home-banner>.layout-center {
height:100%
}
.home-banner-content {
padding-top: 130px;
margin-left: 182px;
margin-bottom: 30px;
}
.home-banner-content .slogan-text p {
font-size:18px;
line-height:24px;
letter-spacing:2px;
font-weight: 600;
text-shadow: 0 2px 4px rgba(0,0,0,.25);
}
.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 rgba(0,0,0,.25);
margin-bottom:20px
}
.home-banner-search {
width:800px;
margin-left:209px;
height:auto
}
.home-banner-search .tag {
position: absolute;
right: 100px;
top: 0;
padding: 15px 10px;
}
.home-banner-search .tag a:hover {
background: var(--b2color);
color: #fff;
}
.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 form {*/
/* margin-bottom:10px;*/
/*}*/
.home-banner-search form>input {
width:100%;
height: 50px;
background:#fff;
border:none;
padding:18px 22px;
font-size:14px;
color:#333;
}
.home-banner-search form>input::placeholder {
color:#979797
}
.home-banner-search .hot-top {
position:absolute;
top:13px;
right:115px;
color: #000;
font-size:13px
}
.home-banner-search .hot-top i {
margin-right:4px
}
.home-banner-search .hot-words-container,.home-banner-search .rec-words-container {
width:100%;
top:56px
}
.home-banner-links {
width: 80%;
font-size: 14px;
height: 40px;
line-height: 40px;
text-shadow: 0 2px 4px rgba(0,0,0,.27);
}
.home-banner-links a {
margin-right:19px;
color:inherit
}
.home-banner-links a:hover {
color:var(--b2color);
}
.home-banner .search-types-cycles {
width:106px;
height:290px;
background:linear-gradient(180deg,rgba(0,0,0,0) 0,rgb(255 96 0 / 17%) 51.04%,rgba(0,0,0,0) 100%);
left:625px;
top:-95px;
text-align:center;
z-index:-1
}
.home-banner .search-types-cycles .search-types-btn {
width:100%;
height:20px;
line-height:20px;
cursor:pointer;
user-select:none;
left:0;
bottom:-20px;
z-index:1
}
.home-banner .search-types-cycles .search-types-btn i {
color:#fff;
font-size:12px
}
.home-banner .search-types-cycles .search-types-btn:nth-of-type(1) {
bottom:auto;
top:-20px
}
.home-banner .search-types-cycles .search-types-btn:nth-of-type(1) i {
transform:rotate(180deg)
}
.home-banner .search-types-cycles .search-types-btn:hover i {
color:var(--b2color);
}
.home-banner .search-types-cycles ul {
width:100%;
height:100%;
padding-top:5px
}
.home-banner .search-types-cycles ul:after,.home-banner .search-types-cycles ul:before {
content:'';
width:1px;
height:100%;
display:block;
position:absolute;
left:0;
top:0;
background:linear-gradient(0,transparent 0,var(--b2color) 50%,transparent 100%)
}
.home-banner .search-types-cycles ul:after {
left:auto;
right:0
}
.home-banner .search-types-cycles ul li {
height:30px !important;
line-height:30px !important;
font-size:16px;
text-align:center;
cursor:pointer;
user-select:none
}
.home-banner .search-types-cycles ul li:hover {
color:var(--b2color);
}
.home-banner .search-types-cycles ul li:nth-of-type(4) {
height:60px!important;
line-height:60px!important;
}
.home-banner .search-types-cycles ul li a {
color:rgba(255,255,255,.6);
transition:none
}
.home-banner .search-types-cycles ul li a:hover {
color:var(--b2color);
}
.home-banner .search-types-cycles button:hover {
background:#46dacf !important;
opacity:1;
transition:opacity .2s
}
.home-banner .search-types-cycles button i {
font-size:18px;
color:#fff;
margin-right:6px
}
.home-banner .search-types-cycles button span {
font-size:16px;
color:#fff
}
.top-navs {
width:100%;
/* height:70px; */
bottom: 0px;
padding-top: 16px;
left:0;
/* padding:12px 0; */
/* z-index:1; */
backdrop-filter: blur(10px);
}
.top-navs .top-navs-l {
width: calc(100% - 180px);
display:flex;
justify-content:center;
align-items:center;
margin:0 auto;
border-right:1px solid rgb(255 255 255 / 10%)
}
.top-navs .top-navs-l-item {
width:20%;
margin:0 18px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center
}
.top-navs .top-navs-l-item .top-navs-l-title a {
font-weight:600;
font-size:18px;
line-height:25px;
height:25px;
margin-bottom:12px;
color:#fff;
text-shadow:1px 1px 1px #000
}
.top-navs .top-navs-l-item .top-navs-l-title .wz {
font-weight:600;
font-size:18px;
line-height:25px;
height:25px;
margin-bottom:12px;
color:#fff;
text-shadow:1px 1px 1px #000
}
.top-navs .top-navs-l-item .top-navs-l-title a i {
font-size:34px;
margin-right:8px;
vertical-align:-4px
}
.top-navs .top-navs-l-item .top-navs-l-title a img {
float:left;
width:34px;
height:34px;
margin-right:8px;
vertical-align:-4px;
margin-top: -5px;
}
.top-navs .top-navs-l-item .top-navs-l-title a:hover {
color:var(--b2color);
}
.top-navs .top-navs-l-item .top-navs-l-links {
font-size:14px;
line-height:20px;
display:flex;
justify-content:space-around;
margin:0 -10px
}
.top-navs .top-navs-l-item .top-navs-l-links a {
color:#fff;
margin:0 10px;
text-shadow:1px 1px 1px #000
}
.top-navs .top-navs-l-item .top-navs-l-links a:hover {
color:var(--b2color);
}
.top-navs .top-navs-m {
width:176px;
height:61px;
border-right:1px solid rgba(255,255,255,.25);
padding:0 24px;
display:none;
flex-wrap:wrap;
justify-content:space-around;
align-items:center
}
.top-navs .top-navs-m a,.top-navs .top-navs-m p,.top-navs .top-navs-m>div {
width:50%;
text-align:center;
color:#fff;
font-size:14px;
line-height:20px;
cursor:pointer;
user-select:none;
text-shadow:1px 1px 1px #000
}
.top-navs .top-navs-m a:hover,.top-navs .top-navs-m p:hover,.top-navs .top-navs-m>div:hover {
color:var(--b2color);
}
.top-navs .top-navs-m div p,.top-navs .top-navs-m>a {
margin-bottom: 25px;
}
.top-navs .top-navs-m div p {
width:100%;
margin-bottom:0;
margin-top:-20px
}
.top-navs .top-navs-m .top-navs-m-box {
top:-16px;
left:-72px;
width:157px;
height:66px;
background:#444;
border-radius:8px;
padding:8px 14px 0;
display:none;
margin-top:-70px
}
.top-navs .top-navs-m .top-navs-m-box a {
margin-bottom:9px
}
.top-navs .top-navs-m .top-navs-m-box a:hover {
color:var(--b2color);
}
.top-navs .top-navs-r {
width:176px
}
.top-navs .top-navs-r a {
width:50%;
padding-left:30px;
text-align:center;
}
.top-navs .top-navs-r a i {
font-size:36px;
margin-bottom:10px
}
.top-navs .top-navs-r img {
height: 40px;
width: 40px;
margin-top: -3px;
}
.top-navs .top-navs-r a p {
font-size:14px;
line-height:40px;
color:#fff;
text-shadow:1px 1px 1px #000
}
.top-navs .top-navs-r a p:hover {
color:var(--b2color);
}
.por {
position:relative
}
.poa {
position:absolute
}
.pof {
position:fixed
}
.Onecad_clearfix:after {
content:'';
clear:both;
display:block;
height:0;
visibility:hidden;
font-size:0;
line-height:0
}
.fl {
float:left
}
.fr {
float:right
}
.ovh {
overflow:hidden
}
.block {
display:block
}
.icon-rank {
width:auto;
display:inline-block;
border:none;
overflow:hidden;
vertical-align:-3px
}
img.icon-rank {
width:20px;
height:20px;
margin-right:0px
}
a.hot-top.text-notify:hover {
color:var(--b2color);
}
p.top-navs-l-title {
margin-bottom:8px
}
.top-navs-l-title i{
width:1em;
height:1em;
float: left;
}
.left-cont{
border: 5px solid rgb(255 255 255 / 18%);
}
.home-banner-search>form>button {
box-sizing:border-box;
min-width:100px;
transform:translateY(0px);
font-size:15px;
border-top-right-radius:3px;
border-bottom-right-radius:3px;
position:absolute;
right:1px;
top:0;
z-index:1;
border:1px solid #23d1c3;
padding:0 15px;
width:147px;
height:56px;
background:linear-gradient(90deg,#35eee3 0,#21cec0 100%);
border-radius:0 8px 8px px 0;
right:0;
text-align:center;
padding-left:25px;
margin-right:-7px;
border-bottom-left-radius:1px;
border-top-left-radius:1px
}
.home-banner-search .search.hidden {
display:none
}
.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;
padding:0 15px;
width:106px;
transform:translateY(0px);
}
.slogan-text.por.fl {
margin-left: 200px;
text-align: center;
margin-bottom: 20px;
}
@media screen and (max-width:768px) {
#page-wrapper {
display:none
}
}
/*首页动态背景搜索样式代码结束*/
3.引入jquery
在主题设置-常规设置-头部html加入以下代码（header.php文件的</head>标签之前也可以）。这个B2主题好像自带，大家如果上面设置了不生效，那就引用一下，生效就不管了。
<script type='text/javascript' src='https:/你的网址/js/jquery.min.js'></script>
4.放置附件
文件下载：https://qtrj.lanzoul.com/iiMzl1450kzg
更多B2主题美化教程请点击文末标签阅读！
