猫灿先生博客,简约即美
标签归类 » 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,速度和效果也是不错的。

喵星看图正式上线

2012 年 05 月 29 日 下午 11:39

最近Pinterest模式的网站特别流行,这种类型的站点最大的特点就是直观地将海量信息呈现在用户面前,尤其是作为图片站,灵活智能的布局充分利用了屏幕空间,营造很吸引人的视觉效果。用户只需要滚动鼠标就可以查阅大量信息,网站内容是动态加载的,不需要点击下一页等待整个页面的载入,符合现在网民们的快速浏览习惯,这种设计已经开始在国内各大网站看到复制的影子,比如迅雷方舟

喵星看图基于Wordpress平台和iphoto主题进行设计,现在主要用于我的个人网络收藏。网站的右上角有登录按钮,验证后可以进入快速发布界面,不论在哪个网站看到有趣的图片,只需要右击鼠标复制图片地址,输入到快速发布界面中即可,这样图片其实是以外链的形式发表的,不占用服务器空间,问题是可能存在外链失效的情况,解决方法就是尽量采集大网站信息,比如新浪微博。这个主题中一个重要的技术就是采用TimThumb对采集的图像进行resize以生成缩略图,另外挺想实现人人相册里点击图片即可实现翻页的功能,还在研究之中,现在解决方法是文章内页右上角有左右翻页的导航,不过也不是Ajax实现的。

现在喵星看图链接已经放在了总站首页,想来就是收集平时在网上看到的有趣的图片,顺便和大家分享,另一方面经常更新内容也有助于搜索优化,不论如何都是希望Maocan.com做得更好~~看文章说了半天,不妨前去看看啦^^

Update (4 Mar, 2013):

喵星看图现在已经整合进Photo Gallery,成为其中一个相册合集。

通过Vimeo分享个人视频博客

2012 年 05 月 14 日 下午 1:32

今天用iOS的Wordpress应用想看看其功能是否强大到可以独立发表博客,发现这个app支持视频即时录制上传,就是说可以随手拍摄视频以博文的形式发表,这是移动设备的优势。仔细看了一下code,视频是以HTML5新标准中的<video>标签嵌入,不是当前通用的<object>,这样其实就只有强大的Chrome浏览器才能支持播放,其他不支持HTML5的一概不能看,说明这功能略前卫,现在还不能实际应用。就顺便很感兴趣一个问题,如果独立博客想要托管个人视频,该如何实现呢?放在网站服务器上固然可控性最强,但是时间长了很占体积,因此不”sustainable”。那就只好借助视频托管服务商了,首先想到了Youtube也进行了测试,视频嵌入界面美观大方,在新加坡感觉网速也很快,近乎无懈可击,然而在天朝依旧不能访问,还是要另换方案。优酷土豆一类的虽说也不错,但是国外访问速度普遍较慢,视频质量一般,没有预定视频转载大小,自定义视频长宽时存在显示问题。最后想到以前在别的网站看到的采用Vimeo进行托管,一个成立于2004年的老牌服务商,basic账户无总存储限制,只是每周上传流量限于500M,嵌入code用<iframe>标签比较灵活,最重要的是Vimeo在iOS里有个不错的app方便上传,再通过Safari访问视频获取嵌入code,符合最开始的要求,即不通过PC即可独立发表博客。另外说明一点,视频要求是原创的,这也是为保证社区内容质量。上面发一个测试视频,我的书桌^^

Update:其实国内又不能访问Vimeo了…政策是复杂的,不讨论

Office Word 可以直接更新博客

2011 年 12 月 20 日 下午 10:14

昨晚看电脑爱好者,Office 2007 和2010 里的Word可以直接更新Wordpress博客。方法其实挺简单的,点击”新建”-“博客文章”,登记博客地址和登录信息,强大的Word就成为了博客更新引擎,这个体验顿时提高很多啊,感觉实在是很给力,推荐给在用Wordpress创作的博主。除了各种自定义的文章内容格式,还支持文章归类,但是还不能插入标签,这已经足够使用了,期待以后的改进。

Photo Gallery正式上线了…

2011 年 01 月 30 日 下午 11:21

我的个人相册收藏站点Photo Gallery今天正式上线了,这里作为精选照片展示平台,目前包括美术设计生活收藏三个分类,主要以看图为主,辅以简约的文字介绍。整个站点在设计时重点关注图片观赏的体验,主要是面向Chrome用户,暂不提供IE6支持(IE6用户进入内页网页布局会出现浮动问题,特别推荐使用极速的Chrome浏览器),如有好的改进建议欢迎给我留言,访问Photo Gallery请点击进入art.maocan.com

全文阅读 »

页数:1/2  «上一页 1 2 下一页»
-->
Bamboo Talk! is Mr. Maocan's private blog. Hope you enjoy your every visit here!