Google很强大, 百度推出了自定义搜索引擎, 但不实用.网站或WordPress可以添加Google自定义搜索引擎, 实现高效快速搜索.

之前在WordPress使用Google Custom Search插件添加Google自定义搜索文中使用插件实现过Google自定义搜索引擎, 但是使用这个插件实现的搜索总是加载很慢, 有时索性根本就不出来, 让我情何以堪, 还是自己动手, 这样要修改优化起来也容易.

目录

• 1 Google自定义搜索引擎作用
• 2 添加Google自定义搜索引擎
  • 2.1 第一步: 创建自定义搜索
  • 2.2 第二步: 设置自定义搜索
  • 2.3 第三步: 制作Google小工具
  • 2.4 第四步: 制作搜索结果显示页面
    • 2.4.1 1.? 定义模板页面
    • 2.4.2 2. 建立自定义搜索页面
• 3 Google自定义搜索引擎效果
• 4 WordPress添加Google自定义搜索引擎优化
• 5 参考文章

Google自定义搜索引擎作用

其实WordPress自带了搜索模块, 可以在外观 –> 小工具 中添加 “搜索” 模块, 但为什么不采用这个小工具, 原因有二:

• 速度太慢. 因为要查询数据库, 而且不是一个简查的查询就可以搞定的, 使用自带的搜索, 在我的博客, 因主机配置较低, 搜索起来速度实在是慢
• 浪费资源. 搜索的时候查询数据库, 这要占用相当多的资源, 有可能就影响到其它用户的使用

而如果使用Google自定义搜索引擎就没有这些问题了. 因此才要使用它.

添加Google自定义搜索引擎

在本文中主要讲两种实现方式, 有这两种实现方式就可以满足大部分需求了.

因为大多数的步骤是相同的, 我会将两种方式不同的地方分别表述出来.

第一步: 创建自定义搜索

打开 Google 自定义搜索 , 然后点击 “创建自定义搜索引擎” , 如果需要登录, 就登录吧. 然后进入创建页面, 如下图所示:

 

创建Google自定义搜索引擎设置图

注意以下几个地方:

• 要搜索的网站设置成 “domain.name/*”, 如我的博客是” www.jsxubar.info/*? “.
• 选择”标准版” , 这个才是免费的, 像我们这种一般网站使用标准版就够了, 最大的差别就在于是否包含广告.

各项信息填写好之后点击下一步就可以了.

第二步: 设置自定义搜索

先看图吧, 这里是设置外观. 如下图所示:

 

设置Google自定义搜索引擎外观

这里主要设置布局的自定义样式.

布局的选择:

• 第一种实现方式: 由Google托管, 暂且叫它Google托管方式. 这种实现方式在搜索之后会新打开了个窗口, 然后这个窗口的外观界面都与Google的搜索相同, 这种实现方式也就这点不好, 查看搜索结果时感觉离开了WordPress博客. 其它的与第二种实现方式”2页”并无不同.
• 第二种实现方式: “2页” , 这种方式也是新开一个窗口, 因此不会影响当前打开窗口的内容. 打开之后的页面由你自己定义.我重点讲这一种.

假设我们选择第二种实现方式”2页” , 在选择这种布局之后, 自定义样式选择默认即可.

点击:” 保存并获取代码 “, 会出现如下界面, 如下图所示:

 

2页实现方式设置

可以看到这里需要指定显示搜索结果的网址, 就选择博客的域名后加上search, 如我的是http://www.jsxubar.info/search就可以了.

最下面有两个框中都有代码, 其中:

• 第一个框中定义的是显示搜索框的设置, 包括脚本和样式
• 第二个框中定义的搜索结果页面的设置,? 包括脚本和样式

到这里Google网站这边的操作就完了, 到WordPress中进行操作了.

第三步: 制作Google小工具

一般我们都会将搜索放在边栏最顶部, 这样方便用户搜索.

在外观 –> 小工具中添加一个 文本 小工具, 添后将第一个框中的代码放进去.

第四步: 制作搜索结果显示页面

1.? 定义模板页面

在主题目录下复制page.php为template_google-custom-search-page.php, 名称自定义, 只要方便记忆和以后维护即可. 并修改template_google-custom-search-page.php文件:

• 在文件顶部的注释部分添加:
  * @subpackage Templates * Template Name: Google-Custom-Search
• 将” suffusion_the_content(); ” (suffusion主题) 或” the_content();:” (一般主题) 替换为第二框中的内容, 可以做适度的修改, 如:
  <div id=”cse” style=”width: 100%;”>Loading</div>
  修改为:
  <div id=”cse” style=”width: 100%;”>正在加载中,请稍等!</div>
  让搜索结果没有出来之前显示”正在加载中,请稍等! ”信息.

2. 建立自定义搜索页面

在建立了一个页面模板之后, 我们可以建立一个”搜索”的页面, 修改页面固定链接, 填入”search”, 页面模板选择上面建立的”Google-Custom-Search”. 然后发布这个页面.

至此, 所有的工作就完成了.

Google自定义搜索引擎效果

搜索窗口和搜索结果显示效果如下:

 

Google自定义搜索引擎效果图

WordPress添加Google自定义搜索引擎优化

我们可以看到在搜索框中和搜索页面中都包含Javascript脚本, 这些脚本可以进行合并, 不用内联到页面中, 每次都去下载.

合并Javascript的方法请参考: JS&CSS Script Optimizer插件合并Javascript.

参考文章

http://www.freehao123.com/google-cse

• 这篇文章详细介绍了网站如何添加Google搜索引擎, 不过有些罗嗦, 废话有些多.

 

转载自 静思学吧 by jsxubar-80cbe849