美化iNove的Google自定义搜索

74,580

iNove主题在后台的“主题选项”中设置了一个定制Google自定义搜索的功能，以优化WordPress的搜索结果。我一直没有启用这个功能，直到看到A-shun同学折腾后的搜索页面，恍然大悟，原来我也是想要搜索结果在当前主题内展示，而不是跳转到Google的页面。我也做出了一些改变，把搜索结果页面整合到了主题中，具体的效果，可以到NeoEase和Let's whisper随便搜索些东西来比较一下。 [比较这里吧：前 | 后]
其中参考了我爱水煮鱼的教程，如果你不是用iNove，可以直接看那篇教程。以下我就针对iNove，开始：
1、登陆到Google自定义搜索，创建你的自定义搜索。（此处略去x百字）
2、创建一个搜索结果模板。把下面代码保存为cse.php，上传至iNove主题的文件夹。（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 =605为搜索结果页面的宽度，iNove默认的宽度是605。
3、在WordPress中创建一个页面，比如我的，地址为http://www.whisperer.name/cse，标题为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，找到下面代码:

<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是刚刚你创建的搜索结果页面的地址。
5、在iNove的主题选项中，勾选使用Google自定义引擎，填上你的CX值。
这样，所有的工作都做完了。你可以随时在WordPress默认搜索和Google自定义搜索之间进行切换。并且不需要再另外用css定义搜索框了，已经沿用原来的搜索框样式了。
PS：这个是可以在后台切换两种搜索模式，应该可以在搜索框旁边定义一个按钮，让访客可以自行选择。刚入WP的时候在某个博客上看到过，谁知道怎么定义的话不妨共享出来。
2009/09/24  update: 在IE6下出现错位的同学，请更新一下第4步中的代码，感谢bigyang 。
 

108条评论


  2. 一直想实现这个功能，你这篇文章是写得最清楚的。轻松就搞定了。但我还是遇到了一个小问题。
    改成下面这段代码后，我在腾讯和ie浏览器上显示搜索条时就多出了一行，而且也输入关键字。但在firefox就没有问题。不知能否解答？
    <form action=" /cse" id="cse-search-box">

    <input type="hidden" name="cx" value="" />


  3. 而且也无法输入关键字。

  4. Mod

    @John
    你现在没用自定义搜索，我看不到你说的情况啊.


  5. 谢谢分享，我以前尝试过过修改但是没有成功。。。这下子能行了。。


  6. 用这个方法，在firefox下可以了，但是在opera和IE里面却不行，不知道为啥


  7. @whisperer 我试过了，不行啊，搜索页的链接是http://dreamtale.webcindario.com/?cx=015463465190892166626%3Az1zecu2hjz4&cof=FORID%3A11&ie=UTF-8&q=as&sa=

  8. Mod

    @dreamtale
    这个链接地址不对，应该是xxx.com/?page_id=9/?cx=...才可以啊。你确定第四步设置对了？

  10. Mod

    @船长
    你现在没有启用自定义搜索，所以我也看不到你说的问题。
    可以肯定的是，正常情况下，按照上面的方法是没有问题的，
    请确认你的设置是否正确，然后检查一下自己的js有没有错误，比如11# 的同学就是因为自己的js错误才出现问题的。


  11. @whisperer 你好。我是先在本地测试的。功能上都没有问题，也能使用。但ie下，这个搜索框的“搜索”两个字错位下一了一行。没找到css或其他地方的问题。是不是你的代码中多出了一行？

  12. Mod

    @John
    第4步你是直接复制的么？应该没有问题啊。
    你觉得代码多的话，第4步你自己修改下试试。给我张截图看看吧


  13. @whisperer 现在可以了。发现CSS里面的searchbox .textfield的width长度设置问题导致这行。有可能我原来改过这个width的长度。多谢了。上传后通知你看看。


  14. 当时我修改的时候能看到你的教程就好了
    我是自己摸索着折腾的
    也算弄个差不多了~




  18. 非常感谢，用你的方法做成了。


Comments are closed.