wordpress设定百度站内搜索超简洁教程

2018年11月6日13:23:13wordpress设定百度站内搜索超简洁教程已关闭评论 1,309 次
摘要

由于wordpress自带站内搜索的低效率,很多人选择百度站内搜索来代替wordpress自带的搜索,节约资源有提高了效率。本人将详细讲述如何以最小的代码量完成百度站内搜索的设置。

由于wordpress自带站内搜索的低效率,很多人选择百度站内搜索来代替wordpress自带的搜索,节约资源有提高了效率。本人将详细讲述如何以最小的代码量完成百度站内搜索的设置。效果图如下:

wordpress设定百度站内搜索超简洁教程

1.新建一个空白htm页面,上传到wordpress根目录。实例代码如下:

<!DOCTYPE html>
<html lang="zh-CN">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-transform" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>站内搜索结果 第1页</title>
  <link rel="stylesheet" id="begin-style-css" href="//mr-z.me/wp-content/themes/Begin/style.css?ver=4.6" type="text/css" media="all" />
  <script type="text/javascript" src="//mr-z.me/wp-content/themes/Begin/js/jquery.min.js?ver=1.10.1"></script>
 </head>
 <body class="search search-results">
  <div id="page" class="hfeed site">
   <nav class="breadcrumb">找到 <span class="resultCount"> </span> 个与 <span class="searchKeyword"> </span> 相关的文章 </nav>
   <div id="content" class="site-content">
    <section id="primary" class="content-area">
     <main id="main" class="site-main" role="main">
      <ul class="search-page">
        搜索结果加载中。。。
      </ul>
      <ul class="page-nav">
      </ul>
     </main>
    </section>
   </div>
   <script type="text/javascript">
 function getQueryString(name) {
    var result = window.location.search.match(new RegExp("[\?\&]" + name + "=([^\&]+)", "i"));
    if (result == null || result.length < 1) {
        return "";
    }
    return result[1];
}
kw = decodeURIComponent(getQueryString('s'));
page = getQueryString('page');
pn = (getQueryString('pn') == '') ? 10 : getQueryString('pn');
document.title = kw + document.title;
var totalPages;
function displaySearchInfo(info){
     $('.resultCount').html(info['totalNum']);
     totalPages = Math.ceil(info['totalNum'] / pn); //总页数
     //生成分页管理
     for(var k = 1; k < totalPages +1; k++){
        $('.page-nav').append('<li class="page-num"><a href="#page'+k+'">'+ k +'</a></li>');
      }
      $('.page-num:first').addClass('current');
   $('.page-num').click(function(){
        page = $(this).find('a').html() ;
        $('.search-page').empty().html('搜索结果加载中。。。');
        $('.current').removeClass('current');
        $(this).addClass('current');
        document.title = document.title.replace(/第[1-9]\d*页/,'第'+page+'页');
        init (); 
        })
 }
 function display (result) {
 $('.search-page').empty();
   for (var k = 0; k < result.length; k++){
       $('.search-page').append('<li class="entry-title"><a rel="bookmark"></a><span class="search-inf"></span></li>');
       $('.entry-title:last').find('a').html(result[k]['title'].replace('| 我系张先森','')).attr({href:result[k]['linkUrl'], target:'_blank', title: result[k]['abstract'] });
       $('.search-inf:last').html(result[k]['dispTime']);
       $('.searchKeyword').html(kw);
   }
     if(typeof(totalPages) == 'undefined'){
       cse.getSearchInfo(kw, displaySearchInfo);
       }
 }
 function init() {
   cse = new BCse.Search("4624622582968206438"); //参数为您的 API引擎 ID,必需。
   cse.setPageNum(pn); //设定每页的条数,最多10
   cse.openTimeOrder(); //打开时间排序
   cse.getResult(kw, display,page); //kw搜索关键词,display回调函数,page为搜索结果的某一页
 }
 function loadScript () {
 var script = document.createElement("script");
 script.type = "text/javascript";
 script.charset = "utf-8";
 script.src = "http://zhannei.baidu.com/api/customsearch/apiaccept?sid=4624622582968206438&v=2.0&callback=init"; //sid为站内搜索id
 var s = document.getElementsByTagName('script')[0];
 s.parentNode.insertBefore(script, s);
 }
 loadScript();
</script>
  </div>
  <style>
.search-page{
        padding: 0 20px;
    }
.page-nav{
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-num{
    float: left;
    width: 30px;
    margin: 0 10px;
    font-size: 16px;
    cursor: pointer;
    background: white;
    border: 1px solid #ddd;
}
.page-num :hover{
    background: #3690cf;
    color: #fff;
    border: 1px solid #3690cf;
}
.current{
    background: #3690cf;
    color: #fff;
    border: 1px solid #3690cf;
}
.current a{
    color: #fff;
}
.page-num a{
    text-decoration: none;
    display: block;
    margin: auto;
    text-align: center;
}
</style> 
 </body>
</html>

样式及内容可根据自己网站需要修改。

2.在主题的functions.php文件中加入以下代码,修改搜索表单的action地址到第一步中新建的search.htm文件。

add_filter('get_search_form','customSearch');
function customSearch($searchForm){?>
  <script>
    jQuery(document).ready(function(){
      jQuery('.search-form').attr("action","<?php echo home_url('/search.htm');?>");
    });
  </script>
<?php 
  return $searchForm;
}

完成以上两步骤就完成了一个简单的百度站内搜索的页面,相对于其他方式有以下优点:

  • 代码简单,search.htm无任何服务端代码,不对服务器造成压力。
  • 代码修改量小,只需要在functions.php增加一个filter钩子。
  • 搜索结果页面高度自定义,可增加广告代码等
  • 不需要设置二级域名

但由于百度站内搜索不支持https,该方法只支持http协议的wordpress博客。https博客的设置方式在以后博文中分享。

如果需要禁用wordpress自带的站内搜索,可参考wordpress禁用站内搜索代码。

avatar