B2主题美化 首页添加动态视频搜索模块

Jaysun

1.jpg

在很多网站上看到这种搜索效果,感觉不错就从网上找了下教程,今天分享跟大家,感谢原作者的分享,其他wordpress主题也可以参考代码,修改一下就能用!

使用教程

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也可以

隐藏内容
评论可见
前往评论


您需要 登录账户 后才能发表评论

发表评论

快捷回复: 表情:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog
评论列表 (有 13 条评论,611人围观)
网友昵称:V88888888
V88888888 V 普通用户 Google Chrome 124.0.0.0 Windows 10 x64 13楼
05-17 来自云南 回复
文章不错,写的很好!
网友昵称:a261331881
a261331881 V 普通用户 Google Chrome 123.0.0.0 Windows 10 x64 12楼
04-23 来自江苏 回复
文章不错,写的很好!
网友昵称:yunfan888
yunfan888 V 普通用户 Google Chrome 114.0.5735.289 Windows 10 x64 11楼
04-03 来自山东 回复
文章不错,写的很好!
网友昵称:yunfan888
yunfan888 V 普通用户 Google Chrome 114.0.5735.289 Windows 10 x64 10楼
03-24 来自山东 回复
文章不错,写的很好!
网友昵称:mhf123
mhf123 V 普通用户 Firefox 123.0 Windows 10 x64 9楼
03-14 来自浙江 回复
文章不错,写的很好!文章不错,写的很好!
网友昵称:飞翔机器人
飞翔机器人 V 普通用户 Google Chrome 120.0.0.0 Mac OS X 10.15.7 8楼
03-02 来自江苏 回复
学习一下
网友昵称:5840274@qq.com
5840274@qq.com V 普通用户 Google Chrome 114.0.5735.289 Windows 10 x64 7楼
02-19 来自黑龙江 回复
文章不错,写的很好!
网友昵称:daerzei
daerzei V 普通用户 Google Chrome 120.0.0.0 Windows 10 x64 6楼
01-14 来自广东 回复
怎么评论变成垃圾
网友昵称:daerzei
daerzei V 普通用户 Google Chrome 120.0.0.0 Windows 10 x64 地板
01-14 来自广东 回复
文章不错,写的很好!
网友昵称:xiaoguo
xiaoguo V 普通用户 Google Chrome 95.0.4638.69 Windows 10 x64 凉席
01-13 来自广东 回复
[Fabulous]文章不错,写的很好!

目录[+]

取消
微信二维码
微信二维码
支付宝二维码