wordpress完美整合Google自定义搜索（不替换搜索框）

博主：小鱼
发布时间：2012 年 09 月 15 日
153次浏览
9 条评论
1765字数
分类：网站相关

在自己的博客使用Google提供的自定义搜索功能，不仅可以减轻数据库读取和赚取利润，更能替代本身并不强大的自带搜索功能。整合Google自定义搜索有两种办法，一种是替代Wordpress自带的默认搜索框，一种是不替换，直接使用默认的搜索框。现在很多主题的界面UI非常美观，而且拥有精美搜索框的主题也不在少数，如果让你放弃原先精美的搜索框，而用 Google 那简单单一的搜索框是不是会有点不舍呢？今天就分享一下可以在不修改原搜索框的前提下使用Google 强大的自定义搜索功能。
<strong><span style="color: #9b00d3;">第一步：注册并获取 Google 自定义搜索代码</span></strong>
访问http://www.google.com/cse创建你的搜索引擎。创建完毕后进入“外观”面板，选择“全宽”的布局模式。保存后进入“获取代码”，获得你的 Google 自定义搜索代码：
<code lang="php">

<script>
  (function() {
    var cx = '你的自定义搜索ID';
    var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com.hk/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
  })();
</script></code>

<strong><span style="color: #9b00d3;">第二步：创建搜索结果页</span></strong>
为了让搜索结果在博客内部显示，我们需要在 WordPress 中创建一个新的页面，用来显示搜索的搜索结果。如果本身主题带有search.php，修改代码即可。如果没有，文件内容复制下面的即可。
<code lang="php">
&lt; ?php /* Template Name: 网站搜索模板 */ ?&gt;</code>
&lt; ?php get_header(); ?&gt;
<div id="main">
<div id="content">
<div class="container">

<script>
  (function() {
    var cx = '你的自定义搜索ID';
    var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com.hk/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
  })();
</script>

</div>

</div>

&lt; ?php get_footer(); ?&gt;
</div>
其中将“你的 Google 自定义搜索 ID”替换为 Google 给你的“搜索引擎的唯一 ID”，可以在控制面板的基本信息内获取。
保存后将 search.php 上传至你的主题根目录下。
最后在你博客的后台 – 页面中新建页面，在页面属性的模版中找到 网站搜索模版 并选择，写好标题发布即可。
<strong><span style="color: #9b00d3;">第三步：修改当前主题的搜索提交的表单</span></strong>
这里算是最关键的一步啦，就是当用户点击你博客上任意页面的站内搜索按钮的时候，将用户引导到你刚刚创建的搜索结果页上。这里我们需要在主题文件夹中找到搜索框所在的文件，每个主题都不同，有的在sidebar.php里，有的在searchform.php里，请仔细查找下就可找到。在文件中找到类似如下代码：
<code lang="php"></code>
<form id="searchform" action="/search" method="get"><input class="sousuo" name="q" type="text" value="" />
<input id="searchsubmit" class="searchBtn" type="submit" value="搜索吧" /></form>&nbsp;
action 的地址根据你自己创建的搜索页面的链接来修改，只要保证能访问到我们刚新建的页面就行；不管你原先主题搜索框的 name 等于什么，都将引号内的字母改成 q。
<strong><span style="color: #9b00d3;">最后：大功告成了！</span></strong>
赶紧在搜索框里面试试吧！

最后修改：2021 年 12 月 16 日 02 : 41 PM

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

9 条评论

夜蝠翔空
March 26th, 2014 at 09:36 am

。。。

回复
citizen 腕時計
September 5th, 2013 at 11:12 am

激安腕時計ランキング

回复
1. Giuseppe
  March 20th, 2014 at 12:14 am
  
  @citizen 腕時計
  
  Ԝhat's Happening і am new to this, ӏ stumbled upon this I have folund It absolutely helpful
  ɑnd it has helped me outt loads.I am hoping to contribute & asskst differdnt users like its helped me.
  Great job.
  Here is mmy blog :: help make yօur own individual rap surpasses (Giuseppe)
  
  回复
2. omegle webcam chat
  December 23rd, 2013 at 10:16 am
  
  @citizen 腕時計
  
  Wow! In the end I got a web site from where I be able to genuinely obtain valuable data regarding
  my study and knowledge.
  
  回复
3. chat to strangers
  November 24th, 2013 at 09:55 am
  
  @citizen 腕時計
  
  Do you mind if I quote a couple of your articles as long as I provide credit and sources back to your website?
  My website is in the very same niche as yours and my users would
  definitely benefit from a lot of the information you provide here.
  Please let me know if this ok with you. Appreciate it!
  
  回复
孙超博客
September 17th, 2012 at 03:16 pm

虽然我不是技术类型的博客，但是喜欢看这类的文章，正在学习之中！学习了哈·欢迎回访！

回复
1. 猴猴
  September 17th, 2012 at 03:36 pm
  
  @孙超博客
  
  @孙超博客
  我也不是技术型的，这个博客是生活博客哦~ :lol:
  有些技术是自己在收拾博客时找的方法，记录下来方便以后查找。
  欢迎多来逛逛啊
  
  回复
曹男弟册
September 16th, 2012 at 06:11 pm

博主的博客不错

回复
1. 猴猴
  September 16th, 2012 at 07:49 pm
  
  @曹男弟册
  
  @曹男弟册
  欢迎多来逛逛哦 :roll:
  
  回复