将 Google 搜索引擎嵌入 Inove

Oct 9, 2009

以下内容恢复自 Wordpress 时期的数据库备份，内容已经严重过期，仅留作纪念。

此方法针对 Inove 模板，非此模板的童鞋请注意修正，请原谅我在代码段某些不重要的地方空行。为了让 IE 的阅读性更好，虽然我很讨厌 IE，推荐用 Chrome ..

步骤：

首先当然是申请一个 Google 自定义搜索引擎，得到搜索框代码

<form action=" http://www.evlos.org/gsearch " id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="你的Google自定义搜索引擎Key" />
    <input type="hidden" name="cof" value="FORID:9" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="31" />
    <input type="submit" name="sa" value="搜索" />
  </div>
</form>
<script type="text/javascript"
src="http://www.google.com/cse/brand?form=cse-search-box&lang=zh-Hans">
</script>

以及结果代码

<div id="cse-search-results"></div>
<script type="text/javascript">
  var googleSearchIframeName = "cse-search-results";
  var googleSearchFormName = "cse-search-box";
  var googleSearchFrameWidth = 600;
  var googleSearchDomain = "www.google.com";
  var googleSearchPath = "/cse";
</script>
<script type="text/javascript"
src="http://www.google.com/afsonline/show_afs_search.js"></script>

然后需要创建一个给页面用的搜索结果模板，当然要在页面顶部用以下代码载入 Wordpress 的头部

<?php get_header(); ?>

然后在页面底部用以下代码载入 Wordpress 的底部

<?php get_footer(); ?>

也别忘了加上下面代码在顶部表示模板名称

<?php
/*
Template Name: gsearch
*/
?>

所以代码就变成这样，我们保存成 gsearch.php 并上传到 Inove 模板目录。

代码里的 googleSearchPath 表示搜索结果的页面地址，googleSearchFrameWidth 表示宽度，Inove 用 606 刚刚好，这是花了我半天测试出来的，完美主义就是连像素也要精确到个位。

<?php
/*
Template Name: gsearch
*/
?>
<?php get_header(); ?>
<div id="cse-search-results"></div>
<script type="text/javascript">
  var googleSearchIframeName = "cse-search-results";
  var googleSearchFormName = "cse-search-box";
  var googleSearchFrameWidth = 606;
  var googleSearchDomain = "www.google.com";
  var googleSearchPath = "/gsearch";
</script>
<script type="text/javascript"
src="http://www.google.com/afsonline/show_afs_search.js"></script>
<?php get_footer(); ?>

现在使用这个搜索结果创建一个页面，模板使用 gsearch。创建时请记下此页的 ID，即地址栏中的 post 参数。在模板目录 inove/templates/header.php 中，找到以下代码：

wp_list_pages('title_li=0&sort_column=menu_order');

将其修改为：

wp_list_pages('title_li=0&sort_column=menu_order&exclude=511');

这样可以使用 exclude 参数隐藏搜索结果页面在 Inove 模板导航栏中的显示。

另外，刚刚测试了 Inove Google 搜索框的字符空间长度，发现是 22 个字符（使用微软雅黑字体时可能会有些出入），因此统一使用 20 个字符作为标准。

在模板目录 inove/templates/header.php 中的搜索框代码是：

<form action="http://www.google.com/cse" method="get">
    <div class="content">
        <input type="text" class="textfield" name="q" size="24" />
        <input type="submit" class="button" name="sa" value=" />
        <input type="hidden" name="cx"
value="<?php echo $options['google_cse_cx']; ?>" />
        <input type="hidden" name="ie" value="UTF-8" />
    </div>
</form>

我们需要做一些修改，把 action 里面我的页面地址换成你的页面地址，size 用刚才测的 20 就好。

<form action="http://www.evlos.org/gsearch" id="cse-search-box">
  <div class="content">
    <input type="text" class="textfield" id="searchtxt" name="q" size="20" />
    <input type="submit" class="button"  id="searchbtn" name="sa" value=" />
    <input type="hidden" name="cx"
value="<?php echo $options['google_cse_cx']; ?>" />
    <input type="hidden" name="cof" value="FORID:9" />
    <input type="hidden" name="ie" value="UTF-8" />
  </div>
</form>

在 iNove 的主题选项中，把使用 Google 自定义引擎勾起来，填上你的 Google 自定义搜索引擎 key。

结尾

呼，累死了，写了这么长，看我这么累的份上，要是对你有用就留言支持下吧。

[back]