将google map集成到你的blogroll中

或许你已经注意到了,本站的BlogRoll已经将google map集成近来了.这个东西主要是乱想今天向我提到这个问题的时候我决定做这样一个hacks的,或许你也会对此感兴趣,既然这样,我下面就将我的实现方式和需要的插件一起发布出来,这算不算无私的奉献呢?呵呵

如果你对原理不感兴趣,请直接跳到安装步骤

实现这个之前首先说说原理:googla map api中我们可以直接引用,并且可以通过控制里面的一些变量来实现我们需要的显示方式.至于地图上面的图标则可以直接在指定xml中读取.因此我们要实现的第一步就是通过编写插件将blogroll中的内容根据需要生成xml文件.下面是我的插件代码(后面将会给出下载地址)下面的代码我会一并给出解释:

< ?php
/*
Plugin Name: cos-custom
Plugin URI: http://www.storyday.com
Description: use ajax to show comments
Version: 1.0
Author: jiangdong
date:2007-04-20
Author URI:http://www.storyday.com
*/
if( !function_exists("utf_substr")){
	function utf_substr($str,$len){
		if( strlen( $str ) <= $len )
			return $str;
		for($i=0;$i<$len;$i++)
		{
			$temp_str=substr($str,0,1);
			if(ord($temp_str) > 127){
				$i++;
			if($i< $len)    {
				$new_str[]=substr($str,0,3);
				$str=substr($str,3);
				}
			}
		else {
			$new_str[]=substr($str,0,1);
			$str=substr($str,1);
			}
		}

		$new_str = join($new_str);
		$new_str = $new_str."...";
		return $new_str;
	}
}
//下面是获取最新评论的函数,我的以前的ajax需要,google map是不需要的
if( !function_exists("cos_get_latest_comments")){
	function cos_get_latest_comments($no_comments = 5, $before = '
 ', $after = '', $show_pass_post = false,$trim_num=20) {

	global $wpdb, $tablecomments, $tableposts;
	$request = "SELECT ID, comment_ID, comment_content, comment_author FROM $tableposts, $tablecomments WHERE $tableposts.ID=$tablecomments.comment_post_ID AND (post_status = 'publish' OR post_status = 'static')";

	if(!$show_pass_post) { $request .= "AND post_password ='' "; }

    $request .= "AND comment_approved = '1' ORDER BY $tablecomments.comment_date DESC LIMIT $no_comments";
    $comments = $wpdb->get_results($request);
    $output = '';
    foreach ($comments as $comment) {
       $comment_author = stripslashes($comment->comment_author);
       $comment_content = strip_tags($comment->comment_content);
       $comment_content = stripslashes($comment_content);
       $comment_excerpt = utf_substr($comment_content,$trim_num);
       $permalink = get_permalink($comment->ID)."#comment-".$comment->comment_ID;
       $output .= $before . '' . $comment_excerpt . '' . $after;
       }
	   $output = "< ?xml  version='1.0' encoding='utf-8'?>
".$output."

";
	   header( 'Content-type: text/xml;charset=utf-8' );
       echo $output;
	}
}
//show blogroll
//这里就是关键的地方,通过查询数据库将当前的blogroll生成xml
if( !function_exists("cos_show_blogroll")){
	function cos_show_blogroll(){
		global $wp_query, $wpdb;
		$sql = "SELECT * FROM ".$wpdb->links;
		$links =  $wpdb->get_results($sql);
		header("Content-Type: text/xml; charset=UTF-8");
		echo "";
		foreach ($links as $link) {
			$lat = "";
			$lung = "";
			$link_sub = explode("|",$link->link_notes);//get the latitude and longitude
			$lat = $link_sub[0];
			$lung = $link_sub[1];
			$link_description = "link_url."\" target=\"".$link->link_target."\">".$link->link_name."";
			if( $lat != "" ){
			echo  "\t< ![CDATA[".$link_description;
			echo "
";
			echo " URL:  ".$link->link_url."";
			echo "Desc: ".$link->link_description."";
			echo "Area: ".$link_sub[2]."";
			echo "]]>\n";
			}
		}

		echo "";
		die();
	}
}
//show latest comments by index.php?action=storyday.showCommentsList
if( !function_exists("add_cos_cutom")){
	function add_cos_cutom(){
		if(  'storyday.showCommentsList' == $_GET['action']   ){
			cos_get_latest_comments($no_comments = 5, $before = '
 ', $after = '

', $show_pass_post = false,30);
			die();
		}
		if(  'storyday.showBlogRoll' == $_GET['action']   ){
			cos_show_blogroll();
		}
	}
}
add_action('init', 'add_cos_cutom');

add_action(’init’, ‘add_cos_cutom’); //这个是在所有的wp输出前开始执行,所以在这个触发器中,我执行完毕之后马上就把程序die掉,这样就可以只输出我需要的东西,如果你熟悉wp插件编写,再加上你有没有这样做个,或许这个实现方式对你会有帮助,我当时是在模板里面完成这个功能的,大家可以看我的这个文章基于ajax的comments终于完成 ,实现方式多么落后.
所以如果请求/index.php?action=storyday.showBlogRoll的时候就会输出blogroll的xml.(php中是这句’storyday.showBlogRoll’ == $_GET['action'] 来实现的),不要删除 storyday.showBlogRoll,这是防止和其它插件冲突,这有点类似< >里面的java package防止冲突的命名方式
上面的插件已经成功的完成了blogroll的xml输出.
下面我们开始创建页面,创建页面之前,首先要为此页面制作一个模板 links.php放置到你当前的模板文件根目录下.

< ?php
/*
Template Name: Links
*/
?>
< ?php get_header(); ?>

    


跳到：
		    世界地图 |
			中国地图 |
			特区:
			香港 |
			澳门 |
			台湾 | 

			西南区:
			重庆市 |
			四川 |
			贵州 |
			云南 |
			西藏自治区 |
			华中区:
			河南 |
			湖南 |
			湖北 |
			华北区:
			北京市 |
			天津市 |
			河北 |
			山西 |
			内蒙古自治区 |  
			东北区:
			辽宁 |
			吉林 |
			黑龙江 |
			华东区:
			上海市 |
			江苏 |
			浙江 |
			安徽 |
			山东 |
			福建 |
			江西 |
			华南区:
			广东 |
			广西 |
			海南 | 

			西北区:
			陕西 |
			甘肃 |
			青海 |
			宁夏回族自治区 |
			新疆维吾尔自治区 | 

< ?php get_links('-1', '
', '  ', ' ', FALSE, 'id', FALSE, FALSE, -1, FALSE); ?>



< ?php get_footer(); ?>

注意,上面js代码中的key=ABQIAAAAneVEiA6KoxcW0hNZTakAXhREHaY3_G2VV7PDyHHbfjJiiO4sfxSuNKmwaTqp1cAK1u2GI8JTf4WG4w
这个key你需要自己去申请的,你可以去这里申请.
废话少说,下面说安装步骤:

1. 首先下载这个文件cos_custom.zip放置到插件目录下,到后台激活该插件.
2. 然后下载这个文件:links.zip,修改里面”key=ABQIAAAAneVEiA6KoxcW0″的部分,改成你自己在google的申请的api key,然后将其放置到你的当前模板文件夹下,如果该文件存在,重命名即可
3. 创建一个页面link,创建的时候使用刚才上传的模板,如图,在你的下拉菜单中选择”CosbetaLinks”
4. 然后在创建blogroll的时候,在高级的选择按照如图的要求添加好对方的经纬度即可

如果你在使用过程中有什么问题,欢迎留言,另外,兄弟们一定要劳动成果,转载请注明出处.