将Google搜索引擎嵌入Inove

Posted by 小邪 on 2009年10月9日 Leave a comment (0) Go to comments

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

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

1
2
3
4
5
6
7
8
9
10
11
12

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

> 以及结果代码

1
2
3
4
5
6
7
8
9
10

<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的头部

1

<?php get_header(); ?>

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

1

<?php get_footer(); ?>

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

1
2
3
4
5

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

> 所以代码就变成这样 我们保存成gsearch.php 并上传到Inove模板目录
> 代码里的googleSearchPath表示搜索结果的页面地址，googleSearchFrameWidth表示宽度
> Inove用606刚刚好 花了我半天测试出来的 完美主义就是连像素也要精确到个位

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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

1

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

> 修改一下 像下面一样 用exclude参数隐藏搜索结果页面在Inove模板导航栏的显示

1

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

> 刚测了下InoveGoogle搜索框的字符空间长度是22个字符 我用微软雅黑 可能有些出入 就统一用20
> 在模板目录inove/templates/header.php中的搜索框代码是

1
2
3
4
5
6
7
8
9

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

1
2
3
4
5
6
7
8
9
10

<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
> 呼 累死了 写了这么长 看我这么累的份上 要是对你有用就留言支持下吧

WP风格 [WP Theme], , ,
Leave a comment

0 Comments.

Leave a Reply

:evil: :razz: :wink: :rolleyes: :redface: :cry: :biggrin: :lol: :idea: :mrgreen: :mad: :exclaim: more »

[ Ctrl + Enter ]