iNove主题在后台的“主题选项”中设置了一个定制Google自定义搜索的功能,以优化WordPress的搜索结果。我一直没有启用这个功能,直到看到A-shun同学折腾后的搜索页面,恍然大悟,原来我也是想要搜索结果在当前主题内展示,而不是跳转到Google的页面。我也做出了一些改变,把搜索结果页面整合到了主题中,具体的效果,可以到NeoEase和Let's whisper随便搜索些东西来比较一下。 [比较这里吧:前 | 后]
其中参考了我爱水煮鱼的教程,如果你不是用iNove,可以直接看那篇教程。以下我就针对iNove,开始:
1、登陆到Google自定义搜索,创建你的自定义搜索。(此处略去x百字)
2、创建一个搜索结果模板。把下面代码保存为cse.php,上传至iNove主题的文件夹。(cse意为custom search engine,你可以换成其他)
/*
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,找到下面一行:
改成,
其中exclude=41意思是在导航栏隐藏这个cse页面,41是这个页面的ID,在/wp-admin/edit-pages.php页面,鼠标悬浮在页面的标题上,在下面状态栏就可以看到post=41。
4、定义搜索框。仍然是templates/header.php,找到下面代码:
<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>
改成,
<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 。
代码更新了,但情况还是那样。。。
刚才测试了一下又好了,可能是浏览器缓存的问题没有及时更新过了,谢谢提供解决方法。。。
@Alex
的确是没有问题了 不用客气 😉
折腾成功,感谢博主的方法~ 😣
@浪漫谎言
恭喜,成功了就好,不必客气 😳
非常不错的教程,转载了..
IE6显示仍旧不正常,会不会是和css不同步呢?
请修改代码
将hidden放在后面
@光影
你确定这样改能正常显示的话我就更新下~
呃 奇怪,为什么我的在IE6下一直正常呢。
谢谢了 😄
@whisperer
兄弟不用奇怪哈,因为iNove用的菜单不一样,兄弟是修改过的。
你可以看看我的或者bigyang的,用firebug看一下哈,嘿嘿
@光影
那好 我这就更新,反正不会有什么坏处 😀 谢谢~~
动作好快啊,效率
Permalink
@光影
嘿~
你有头像了 不错 😀
@whisperer
都不想搞的,但是你们都在搞,欺负人啊 😥
@光影
应该有的 没有头像天理不容啊 😢
您牛改的主题可以发到我的邮箱里吗?我超喜欢
maxlongint@gmail.com
@cyclone77
我用了很多插件 别人不适用 😦
今天又回到这个文章。原来在本地设置没有问题的。今天搬到新的服务器,更新后却搜不到东西了。不知道问题出在哪里?博主可否指教一二?
@John
你在Google中直接用你的自定义搜索是正常的么?
我刚到你那看了下,发现你没开启自定义搜索,所以也无法判断产生错误的原因。