评论可见
前往评论
在很多网站上看到这种搜索效果，感觉不错就从网上找了下教程，今天分享跟大家，感谢原作者的分享，其他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也可以
隐藏内容
发表评论