美化iNove的Google自定义搜索

2009/09/01 Add 73 comments |

iNove主题在后台的“主题选项”中设置了一个定制Google自定义搜索的功能,以优化WordPress的搜索结果。我一直没有启用这个功能,直到看到A-shun同学折腾后的搜索页面,恍然大悟,原来我也是想要搜索结果在当前主题内展示,而不是跳转到Google的页面。我也做出了一些改变,把搜索结果页面整合到了主题中,具体的效果,可以到NeoEaseLet'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


Posted by whisperer | in Skills, wordpress | 5,197 views | Tags: , , , | Twit it !
  1. 10. 2nd, 2009 at 17:00 | #1

    @whisperer
    都不想搞的,但是你们都在搞,欺负人啊 :cry:

  2. 10. 2nd, 2009 at 22:21 | #2

    @光影
    应该有的 没有头像天理不容啊 :mrgreen:

  3. 10. 5th, 2009 at 16:42 | #3

    您牛改的主题可以发到我的邮箱里吗?我超喜欢
    maxlongint@gmail.com

  4. 10. 5th, 2009 at 22:38 | #4

    @cyclone77
    我用了很多插件 别人不适用 :sad:

  5. 10. 10th, 2009 at 15:56 | #5

    今天又回到这个文章。原来在本地设置没有问题的。今天搬到新的服务器,更新后却搜不到东西了。不知道问题出在哪里?博主可否指教一二?

  6. 10. 10th, 2009 at 22:54 | #6

    @John
    你在Google中直接用你的自定义搜索是正常的么?

    我刚到你那看了下,发现你没开启自定义搜索,所以也无法判断产生错误的原因。

  7. 10. 11th, 2009 at 05:14 | #7

    成功啦,谢谢

  8. 10. 17th, 2009 at 12:06 | #8

    代码里面有真对的IE的,能添加针对其它浏览器的么?

  9. 10. 17th, 2009 at 12:07 | #9

    代码怎么显示不了?

    如何添加针对FF等其他浏览器的啊?

  10. 10. 17th, 2009 at 12:21 | #10

    @虎皮鲨

    本来就是所有浏览器可以用啊。
    你是什么意思?

  11. 10. 17th, 2009 at 13:35 | #11

    已经OK了哈哈,谢谢提供

  12. 10. 26th, 2009 at 14:39 | #12

    不错的教程

  13. 11. 6th, 2009 at 18:17 | #13

    我的怎么是从新窗口打开?google托管的方式。

  14. 11. 19th, 2009 at 10:51 | #14

    非常感谢分享。

  15. 01. 2nd, 2010 at 10:50 | #15

    支持一下! :arrow:

  16. 01. 8th, 2010 at 02:59 | #16

    又学到了

  17. 01. 28th, 2010 at 17:29 | #17

    @whisperer
    我的也是这个情况,搜索完后地址没有指到设置的那个页面,是不是还有哪儿需要修改?您说的这个方式/?page_id=9好像不可以哦

Comment pages
  1. 09. 19th, 2009 at 14:55 | #1
  2. 09. 21st, 2009 at 20:46 | #2
  3. 09. 24th, 2009 at 14:10 | #3
  4. 10. 2nd, 2009 at 13:04 | #4
  5. 11. 19th, 2009 at 21:53 | #5
  6. 12. 14th, 2009 at 01:56 | #6