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博客。
