首页
项目投稿
寄售资源卖！
问答悬赏爆！
提交工单
在线聊天室24h
优站导航汇集
前言：
本文教程仅适用于wordpress程序B2主题。
效果图：
教程：
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.hk/?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.hk/?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.hk/2503.html" target="_blank">内容1</a><a href="https://west2.hk/?s=%E4%BC%A0%E5%A5%87" target="_blank">内容2</a><a href="https://west2.hk/" target="_blank">内容3</a><a href="https://west2.hk/?s=%E8%88%AA%E6%B5%B7%E7%8E%8B" target="_blank">内容4</a><a href="https://west2.hk/?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代码放入WP额外CSS中（WP后台-外观-自定义-额外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.在主题设置-常规设置-头部html加入以下代码。
<script type='text/javascript' src='https:/你的网址/js/jquery.min.js'></script>
4.下载下方附件，放置在网站根目录下 大功告成。
温馨提示：本站提供的一切软件、教程和内容信息都来自网络收集整理，仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负，版权争议与本站无关。用户必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
联系邮箱：lgg.sinyi@qq.com
