文章
文章用户商铺文档快讯圈子网址导航

wp_B2主题美化之首页动态视频搜索模块

今天跟大家分享的WordPress美化教程为：wp_B2主题美化之首页动态视频搜索模块。转载自网络，感谢原作者分享。其他WordPress主题也可以参考代码，修改一下就能用！

wp_B2主题美化之首页动态视频搜索模块
 

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>

 

给TA打赏
共{{data.count}}人
人已打赏
b2
Linux教程技术教程

在Debian 12系统上检查已安装防火墙工具的实用指南

2024-12-26 18:02:03

B2美化教程技术教程

WordPress美化文章缩略图鼠标悬浮放大特效css

2024-11-27 18:34:07

48 条回复 A文章作者 M管理员
  1. Warmheart暖心

    这个教程真是绝了！首页瞬间高大上了！🎉👏

  2. 尽鹤

    牛逼！这个美化教程太详细了，感谢分享！

  3. Midnight

    这个教程真详细，跟着做肯定没问题！👍✨

  4. 桃扇骨

    首页动态视频搜索模块设计得太酷了！视觉效果绝佳！🔥

  5. 欠迩的太多

    教程很详细，效果超赞！真是太有才了！👏

  6. 子衿

    动态视频搜索模块太酷了，真的学到了！👍✨

  7. Tears°

    这个教程太详细了，帮大忙了！ 👐👍

  8. 括叶作舟

    教程好详细，照着做一定能成功！感谢分享！

  9. hildishness

    教程很实用！美化效果不错，提升站点颜值！666！

  10. 遇见更好的⾃我

    很实用的美化教程！动图背景效果绝美，太棒了！👏

  11. 晚风撩人

    很详细的美化教程，功能丰富666

  12. 括叶作舟

    不错不错

  13. 困成憨包😴

    很实用的教程

  14. q.w.q

    太强了

  15. 休止

    太详细了666

  17. 桃扇骨

    教程很详细哦

  18. 半生.

    教程太牛了试试

  19. 南瘾浪

    酷炫功能来了试试

  21. 橘子海🍊

    实用教程 赞

  22. 浅黛っ

    很实用的教程

  25. 微信用户30

    太强了

  26. 尽鹤

    太强了

  27. 子衿

    太强了

  28. gfdsd

    太强了

  29. 暮倦

    真不错的教程

  32. 美丽玉兔

    太强了

  33. 南卉

    好棒的教程，受益匪浅 谢谢分享

  34. Tears°

    好棒的教程 无比受益

  35. hildishness

    真不错，学习到了新东西

  36. 心岛初晴°

    非常详细的教程，受益匪浅666

  37. 亚比~囧囧囧

    太棒了，受益匪浅！666

  38. 别说违心话.

    强大的教程，感谢分享！

  39. 修身静心!

    好实用的教程点赞支持

  40. 小熊炸毛了🐻

    很不错的教程 让人眼前一亮

  41. 香薰恋乆

    牛逼的教程啊 受益匪浅

  42. 〖夜神鈅〗

    这个教程很给力，期待尝试一下！

  43. 浊酒

    非常实用的教程 赞赞赞

  44. 与之二三事

    真不错，效果很棒666

  45. 沉香如屑

    太酷了，值得收藏！

  46. Warmheart暖心

    这个教程太实用了，尝试一下吧666

  47. Midnight

    很不错的教程 赞赞赞

  48. happy～

    太精彩了，受益良多！

  49. 微信用户

    太棒了，赶紧试试这个功能

  50. 全是爱%

    不错不错，实用又详细666

❯

解锁会员权限

开通会员

解锁海量优质VIP资源

立刻开通
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索

  • 扫码打开当前页

返回顶部
新
年
乐
快