《双陈记》情侣博客

位置:主页 > 折腾WP > Google自定义搜索安家情侣博客

Google自定义搜索安家情侣博客

昨天初次尝试Google大神提供的自定义搜索,相当给力,相信很多老的WordPress的老鸟都折腾过这个功能,推荐还没有尝试过Google自定义搜索的童鞋去折腾下。

Google自定义搜索的优点:
高速Ajax加载,减少主机负担,自定义CSS,无广告,自定义展示结果,高亮搜索关键词,Adsense集成,Analytics 集成

折腾方法:

1.用谷歌账号登陆http://www.google.com/cse/,创建一个属于《双陈记》情侣博客的自定义搜索,填写相关信息,选择标准版,搜索网站 填写如下格式:love730.com.

2.进入控制面板,在基本信息里有这个东东:搜索引擎的唯一 ID: 008815558751690225552:ocljjyf4eac,复制这个ID号待用。

3.建立一个名为cse的模板,放在主题根目录,如:

<?php
/*
Template Name: cse
*/
?>
<?php get_header(); ?>
<body>
<?php if (is_page())  {
$style_item = ‘page';
} elseif (is_single()) {
if ($post->post_author == ‘1’) {
$style_item = ‘boy';
}
elseif ($post->post_author == ‘2’) {
$style_item = ‘girl';
}
} else {
$style_item = ‘normal';
} ?><?php include(“menu.php”)?>
<div>
<div>
<div>
<h1><a href=”http://love730.com”>双陈记情侣博客|WordPress情侣博客</a></h1>
</div>
</div>
</div>
<div>
<div>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div id=”post-<?php the_ID(); ?>”>
<h2><?php the_title(); ?></h2>
<div id=”post_nav”><span><a href=”<?php bloginfo(‘url’) ?>/” >主页</a> ▷</span>
<span><?php the_title() ?></span></a></div>
<div>
<div id=”cse” >正在从Google 加载搜索结果……</div>
<script src=”http://www.google.com/jsapi” type=”text/javascript”></script>
<script type=”text/javascript”>
google.load(‘search’, ‘1’, {language : ‘zh-CN’});
google.setOnLoadCallback(function(){
var customSearchControl = new google.search.CustomSearchControl(‘008815558751690225552:ocljjyf4eac’);
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
customSearchControl.draw(‘cse’);
var match = location.search.match(/q=([^&]*)(&|$)/);
if(match && match[1]){
var search = decodeURIComponent(match[1]);
customSearchControl.execute(search);
}
});
</script>
</div>
</div>
<div></div>
<?php endwhile; else: ?>
<p><?php _e(‘Sorry, no posts matched your criteria.’); ?></p>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
</div><div id=”shangxia”><div id=”shang”></div><div id=”comt”></div><div id=”xia”></div></div>
<?php get_footer(); ?>
</body>
</html>

根据自己的主题有所变化var customSearchControl = new google.search.CustomSearchControl(‘008815558751690225552:ocljjyf4eac’);括号内填入你的自定义搜索ID号。

4.进入后台,建立一个页面love730.com/search,选择此模板cse,将这个页面隐藏.

5.替换WordPress自带的搜索,代码如下:

<form name=”form” id=”searchform” action=”http://love730.com/search” role=”search” method=”get”>
<input type=”text” value=”搜搜更给力…” name=”q” id=”search_input” onfocus=”this.value = this.value == this.defaultValue ? ” : this.value” onblur=”this.value = this.value == ” ? this.defaultValue : this.value” />
<input class=”searchBtn” type=”submit” id=”searchsubmit” value=”搜 索”  /></form>

6.到这里就已经实现了在WordPress集成Google自定义搜索,剩下的就是美化搜索样式,折腾css,把它更好的与自己的主题融合在一起。

PS:《双陈记》情侣博客的自定义搜索正在美化中…

最近Google大神又推出一个给力的自定义搜索,放在边栏,简单给力,可以尝试一下:

一段代码搞定,直接把下面的代码复制到侧边栏或者添加到一个Widget里面。其代码如下:

<!– Google Custom Search Element –>
<div id=”cse” style=”width:100%;”>Loading</div>
<script src=”http://www.google.com/jsapi” type=”text/javascript”></script>
<script type=”text/javascript”>
google.load(‘search’, ‘1’);
google.setOnLoadCallback(function(){
new google.search.CustomSearchControl().draw(‘cse’);
}, true);
</script>



无觅相关文章插件

love730.com
To:双陈记

 疑问 冷笑 悲伤 坏蛋 感叹 微笑 脸红 大笑 吃惊 惊讶 困惑 酷 大声笑 恼火 古怪

您还可以输入300个字插入图片