猫灿先生博客,简约即美
分档分类 » Wordpress

如何在WordPress快速转载优酷视频

2012 年 11 月 12 日 上午 12:21

 

因为准备将优酷作为我的视频主站,以后会将我发表在优酷的视频转载在我的网站里,于是先发这篇日志做准备。说到转发视频,很多人会想这有什么,优酷每个视频下方都提供一段嵌入HTML,直接复制粘贴就行了。确实如此,但是这有两个问题:一是不能完全自定义视频的高度宽度,企图修改提供的HTML参数可能引起视频显示不太正常;二是提供的code使用<embed>标签,不能通过标准验证,对于坚持W3C标准的站长来说未免有点不妥。综上,这篇日志就提供一个最简洁的方式在个人Wordpress网站转载优酷视频。

编辑主题functions.php文件,加入以下code:

function videoplayer($atts, $content=null){
return '&lt;object type=&quot;application/x-shockwave-flash&quot; data=&quot;'.$content.'&quot; width=&quot;640&quot; height=&quot;400&quot;&gt;&lt;/object&gt;';}
add_shortcode('video','videoplayer');

使用了标签后完全符合标准,而且只这一句简洁的语句就能实现视频转载。在functions.php加上这一段后,以后写文章可以用”video”这样的shortcode形式,$content替换为具体的视频URL(flash地址)。里的高度和宽度参数是可以按需更改的,而且如果不想使用shortcode功能,直接复制保存return里这段HTML就行,用的时候再调出来加上视频URL,解决了上面提到的自定义和标准化问题。

本文视频就是用上述方法添加,黄英的映山红,祝福十八大。顺便说一句,实际上Youtube从很多方面都要好太多,不过国内的网络视频市场依然是优酷土豆主导,希望Google的精华业务能尽快恢复。

Update: 今天看到优酷也已经开始支持<iframe>了…这当然是现在最好用的方式了…那更新一下code,注意$content格式为http://player.youku.com/embed/video_id

function videoplayer($atts, $content=null){
return '&lt;iframe width=&quot;640&quot; height=&quot;400&quot; src=&quot;'.$content.'&quot; frameborder=&quot;0&quot;&gt;&lt;/iframe&gt;';}
add_shortcode('video','videoplayer');

WordPress日志添加谷歌地图地理位置

2012 年 09 月 15 日 下午 1:09

WordPress在iOS和Android上都有网站管理应用,而且移动设备通过这个应用发布日志是可以记录发布的地理位置的。这就好像我们在发微博的时候可以签到,显示当前所在地点,其实这个功能也被Wordpress利用移动设备特点开发出来了。这篇日志就是探讨,使用移动设备发表的文章可以被网站识别,同时在谷歌地图上标记出所在地点,具体效果见日志最后一段。

当移动设备为日志标记上地理位置后,我们可以从网页版的撰写新文章页面看到“自定义栏目”增加了三项,分别是“geo_latitude”“geo_longitude”“geo_public”,其中前两个表示纬度和经度,需要我们用get_post_meta()函数提取出来,如果非空,将这两个参数传递到Google Map,实现位置显示。需要说明的是,Google Map已经支持iframe标签直接嵌入地图,不再像以前一样要申请key,然后写相当篇幅的javascript。最新版的Google Map API做了很多优化,这里我们关注的是如何向URL传递正确的参数,确保谷歌地图识别当前的地理位置,显示正确的图像。以上两个部分结合起来,就可以实现我们预期的效果,下面附有关code作为参考。

<?php
$latitude = get_post_meta($post->ID, 'geo_latitude', true);
$longitude = get_post_meta($post->ID, 'geo_longitude', true);
if ($latitude & $longitude) {
	echo "<p>这篇日志发布于移动设备  纬度:$latitude  经度:$longitude</p><iframe src='https://maps.google.com/maps?geocode=&amp;ie=UTF8&amp;ll=$latitude,$longitude&amp;t=m&amp;z=15&amp;output=embed' frameborder='0' marginwidth='0' marginheight='0' scrolling='no' width='650' height='220'></iframe>";
}
?>

由于Wordpress移动设备app使用还不是很大众,这个问题是以前的开发者没有想到的,在分析这个问题时用Google搜索了很多相关主题也没有找到类似解决办法。本文结合谷歌地图,就如何在Wordpress日志中添加地理位置信息提供了较完整的解决方案,而且方式简洁,避免了复杂的coding。移动设备是博客创作的得力助手,有好的idea可以及时记录,而不必打开电脑正式坐下来开始长篇大论,更加省时高效。以后用new ipad配合蓝牙键盘写作会更多,可以睡前写一点日记记录心情,便于更勤快地更新。另外还想提出一些建议供以后的开发者思考,现在获得了纬度经度信息,如何转化为具体的文字地址信息,更加个性化,贴近微博签到功能;如何在谷歌地图上添加位置锚点,标记出当前确切所在位置,和以前曾发过日志的位置。先想这些,以后如果能解决了再来探讨。

Update (30 Jan, 2013):
谷歌地图上添加位置锚点已经得到解决,方法就是将上面code里的”ll=”替换为”q=”,如果在经纬度数值后加一个括号说明文字(形式如”q=1.305079,103.773869(University Town)”),地图上将显示这个具体地址(University Town)。问题是,我们还不能从移动设备的Wordpress应用上获得这个具体地址,尽管这些地址可以从应用里看到。理论上这些地址字符串存储在“geo_address”里,但是和另外三个参数不同,这个只能通过手工添加,而不能从应用直接获得。但我们现在可以展示一下期望之中的效果图应该是这样:

如果今后Wordpress移动应用可以直接提供“geo_address”,那就可以实现了,上面的code也相应修改为:

<?php
$latitude = get_post_meta($post->ID, 'geo_latitude', true);
$longitude = get_post_meta($post->ID, 'geo_longitude', true);
$address = get_post_meta($post->ID, 'geo_address', true);
	if ($latitude & $longitude) {
echo "<p>这篇日志发布于移动设备  纬度:$latitude  经度:$longitude</p><iframe src='https://maps.google.com/maps?geocode=&amp;ie=UTF8&amp;q=$latitude,$longitude($address)&amp;t=m&amp;z=15&amp;output=embed' frameborder='0' marginwidth='0' marginheight='0' scrolling='no' width='650' height='220'></iframe>";
}
?>

当前还是建议大家将上面code里的”($address)”去掉使用,待以后这一功能完备再加上。

Update (17 Apr, 2014):
回到国内后发现,上面加载地图的方法存在速度限制,而且受到Google被屏蔽的影响,有时不能正常访问,因此改用Static Maps API V2标准开发,请参考Google官方文档。在此相应的code应更新为:

<?php
$latitude = get_post_meta($post->ID, 'geo_latitude', true);
$longitude = get_post_meta($post->ID, 'geo_longitude', true);
$address = get_post_meta($post->ID, 'geo_address', true);
if ($latitude & $longitude) {
echo "<p>这篇日志发布于移动设备  纬度:$latitude  经度:$longitude</p><img src='http://maps.googleapis.com/maps/api/staticmap?zoom=12&amp;size=600x160&amp;maptype=roadmap&amp;markers=color:green%7Clabel:%7C$latitude,$longitude&amp;sensor=false&amp;key=AIzaSyD2mcWFfx7P5fnQzdFoGZpHMVhMQ28gyhg' style='border:0;margin:0;width:100%;height:auto;' alt='map info' />";
}
?>

这样获得静态图形,确保了多浏览器的兼容性,加载速度也得到提升,国内网站亦可使用百度地图API,速度和效果也是不错的。

-->
Bamboo Talk! is Mr. Maocan's private blog. Hope you enjoy your every visit here!