沙丘的技术分享

WordPress集成Google自定义搜索

Google自定义搜索WordPress自带的搜索功能其实比Google自定义搜索更加智能，尤其是文章内链比较多的博客。但是使用Google自定义搜索可以减少WordPress数据库的查询，对于共享主机来说好处也是明显的。当然，Google自定义搜索的内容也受制于Google对WordPress的收录情况。

1.建立Google自定义搜索

进入https://www.google.com/cse/，创建自定义搜索：

  • 输入自定义的名称和需要搜索的网站；
  • 选择Google自定义搜索的外观；
  • 获得Custom Search Element 代码，类似这样：

<div id=”cse” style=”width: 100%;”>Loading</div>
<script src=”http://www.google.com/jsapi” type=”text/javascript”></script>
<script type=”text/javascript”>
google.load(‘search’, ‘1’, {language : ‘zh-CN’});
google.setOnLoadCallback(function() {var customSearchControl = new google.search.CustomSearchControl(‘123456789:asdfgh’);
customSearchControl.setResultSetSize
(google.search.Search.FILTERED_CSE_RESULTSET);
customSearchControl.draw(‘cse’);}, true);
</script>
<link rel=”stylesheet” href=”http://www.google.com/cse/style/look/default.css” type=”text/css” />

2.创建Google自定义搜索结果页面

将上面获得的代码加入新建页面模板中：

<?php
/*
Template Name: google cse
*/
?>
<?php get_header(); ?>
<div id=”cse” style=”width: 100%;”>Loading</div>
<script src=”https://www.google.com/jsapi” type=”text/javascript”></script>
<script type=”text/javascript”>
google.load(‘search’, ‘1’, {language : ‘zh-CN’});
google.setOnLoadCallback(function() {var customSearchControl = new google.search.CustomSearchControl(‘123456789:asdfgh’);  customSearchControl.setResultSetSize
(google.search.Search.FILTERED_CSE_RESULTSET);
customSearchControl.draw(‘cse’);
var match = location.search.match(/q=([^&]*)(&|$)/);
if(match && match[1]){var search = decodeURIComponent(match[1]);
customSearchControl.execute(search);}});
</script>
<link rel=”stylesheet” href=”https://www.google.com/cse/style/look/default.css” type=”text/css” />
<?php get_footer(); ?>

注意其中增加了

var match = location.search.match(/q=([^&]*)(&|$)/);
if(match && match[1]){var search = decodeURIComponent(match[1]);
customSearchControl.execute(search);}});

这段代码就是自动获取主题搜索框的搜索字串，其中http手动换成了https。
建好后上传google cse.php到主题文件夹内。

然后新建Pages页面，模板就选用google cse。命名为search。其他名字也可以，但是这个名字需要和下面的代码对应。
这个页面就是以后Google搜索的结果显示页面了。

3.用Google自定义搜索替换Wordpress自带搜索

找到主题中的searchform.php，其中有如下代码：

<form method=”get” action=”<?php echo $_SERVER[‘PHP_SELF’]; ?>”>
<div>
<input type=”text” value=”Search term…” name=”s” onblur=”if(this.value==”)this.value=’Search term…’;” onfocus=”if(this.value==’Search term…’)this.value=”;” />
</div>
</form>

将action="<?php echo $_SERVER['PHP_SELF']; ?>更改为action="/search"。这里的“search”对应的就是前面的search页面。
因为国内用户一般是中文搜索，所以还需要更改name="s" 为name="q" 。

主题原有的search.php现在可以删除了，其他关于Google自定义搜索的优化和设置，以及搜索结果页面的美化等等就完全是自定义了。
由于主题不同，不同的主题下的文件应该是不同的，找到对应的代码即可。
这种集成方法其实就是Google自定义搜索的搜索元素托管选项。既不需要更改主题原有的搜索表格外观，也不需要把搜索结果托管到Google的服务器上。

在主题导航栏中隐藏Google自定义搜索的Page页面参考《WordPress隐藏Pages页面的2种方法》

沙丘

,