3米免费资源部落

其实北极寒流实用软件博客一直是WordPress自带搜索和Google自定义搜索共存的，不过Google自定义搜索的结果是由Google托管的，每次搜索就会打开一个新页面来显示结果，很是不爽啊，在网上GG到一个方法可以直接在自己博客上显示搜索结果。原文说的主要是针对iNove主题的Google自定义搜索美化，下面文章也主要是以iNove主题介绍，其实在其他WordPress主题一样是可以行的通的，效果见北极寒流极客主题的搜索结果。
下面说说方法：
1、要用Google自定义搜索功能那首先得登录到 Google 自定义搜索，创建你的自定义搜索。其他的都没什么说的，就注意几个地方
控制面板的外观选项：选择 iframe （提供的自定义内容有限，且需要为您网站上的搜索结果提供单独网页。）点击保存后来到获取代码这里指定您要在自己网站上显示搜索结果的网址：如北极寒流的是：http://blog.seomaven.org/cse 前面的自然是你的域名了，后面的那个CSE可以自己先定义，后面要用到，先记住吧！
2、创建一个搜索结果模板。把下面代码保存为cse.php，上传至你的主题的文件夹下。（cse意为custom search engine，你可以换成其他）

<?php
/*
Template Name: cse
*/
?>
<?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 =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>
<?php get_footer(); ?>

var googleSearchFrameWidth =600为搜索结果页面的宽度，如果是用在如我现在iNove主题，那默认的宽度是605。其他主题的话你尝试着修改看看多少才适合你的页面。其实上面中用到的主要代码就是Google自定义搜索中定义的搜索结果代码。

3、在WordPress中创建一个页面，比如我的，地址为http://blog.seomaven.org/cse 这个地址要与你在Google自定义搜索中定义的是一样的哦，标题为Search Result，模板选择刚刚创建的cse。

然后在导航栏隐藏这个页面，如：在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=41');

其中exclude=41意思是在导航栏隐藏这个cse页面，41是这个页面的ID，在/wp-admin/edit-pages.php页面，鼠标悬浮在页面的标题上，在下面状态栏就可以看到post=41。

4、定义搜索框。仍然是templates/header.php，找到下面代码:这些代码在不同的主题位置可能不同，同时代码也可能会不同，例如我的北极寒流极客主题，搜索代码是在sidebar.php中。不过方法类似，反正就是找到你原来WordPress自带搜索代码那里

<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>

把上面那段代码改成下面的

<form action="<?php bloginfo('wpurl') ?>/cse" id="cse-search-box">
<div class="content">
<input type="hidden" name="cx" value="<?php echo $options['google_cse_cx']; ?>" />
<input type="hidden" name="cof" value="FORID:11" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" class="textfield" id="searchtxt" name="q" size="24" />
<input type="submit" class="button" id="searchbtn" name="sa" value="" />
</div>
</form>

其中第一行的< ?php bloginfo('wpurl') ?>/cse是刚刚你创建的搜索结果页面的地址。这部分代码是Google自定义搜索中定义的搜索框代码。

5、在iNove的主题选项中，勾选使用Google自定义引擎，填上你的CX值。

这样，所有的工作都做完了。你可以随时在WordPress默认搜索和Google自定义搜索之间进行切换。并且不需要再另外用css定义搜索框了，已经沿用原来的搜索框样式了。

资料来源：美化iNove的Google自定义搜索