前几天(差不多10天了吧,这文囧的可以……)写了《快速插入优酷视频改为 iframe 方式兼容移动设备》后,很多朋友评论说一律使用 Iframe 方式插入搜索引擎无法收录视频,对于偶尔插入分享视频的朋友来说无所谓,但如果是视频分享网站就不好了,毕竟你的内容核心是视频,而搜索引擎无法收录视频那还是很影响网站权重的。
那么就再 YY 一下(网上应该有很多类似教程了),我共享一下帮一个朋友做主题时写的这功能的代码吧,我用以前收藏的移动端判断函数来实现根据使用环境决定使用 embed 还是 iframe。
懒得具体说明了,直接上代码吧,里面有注释:另外这次的代码我特意修改做了兼容,支持任何语言的 WordPress
代码实现 PC 端 embed 方式移动端 iframe 方式快速插入优酷视频功能
1. 在 functions.php 插入以下代码(有些代码[如判断是否mobile]收录自搜索,源自哪里已无从考证——好吧,我忘了,如果你是原创作者请联系我)
【注:凡是加入主题的 functions.php 里面的代码都要放在 <php ?> 里面】
//判断是否移动设备 Modify by zwwooooo | zww.me function zfunc_is_mobile() { $user_agent = $_SERVER['HTTP_USER_AGENT']; $mobile_agents = Array("240x320","acer","acoon","acs-","abacho","ahong","airness","alcatel","amoi","android","anywhereyougo.com","applewebkit/525","applewebkit/532","asus","audio","au-mic","avantogo","becker","benq","bilbo","bird","blackberry","blazer","bleu","cdm-","compal","coolpad","danger","dbtel","dopod","elaine","eric","etouch","fly ","fly_","fly-","go.web","goodaccess","gradiente","grundig","haier","hedy","hitachi","htc","huawei","hutchison","inno","ipad","ipaq","ipod","jbrowser","kddi","kgt","kwc","lenovo","lg ","lg2","lg3","lg4","lg5","lg7","lg8","lg9","lg-","lge-","lge9","longcos","maemo","mercator","meridian","micromax","midp","mini","mitsu","mmm","mmp","mobi","mot-","moto","nec-","netfront","newgen","nexian","nf-browser","nintendo","nitro","nokia","nook","novarra","obigo","palm","panasonic","pantech","philips","phone","pg-","playstation","pocket","pt-","qc-","qtek","rover","sagem","sama","samu","sanyo","samsung","sch-","scooter","sec-","sendo","sgh-","sharp","siemens","sie-","softbank","sony","spice","sprint","spv","symbian","tablet","talkabout","tcl-","teleca","telit","tianyu","tim-","toshiba","tsm","up.browser","utec","utstar","verykool","virgin","vk-","voda","voxtel","vx","wap","wellco","wig browser","wii","windows ce","wireless","xda","xde","zte"); $is_mobile = false; foreach ($mobile_agents as $device) { if (stristr($user_agent, $device)) { $is_mobile = true; break; } } return $is_mobile; } //// 如果 WordPress 不是中文版,增加优酷视频自动插入 Modify by zwwooooo | zww.me if (get_bloginfo('language') != 'zh-CN') { function wp_embed_handler_youku( $matches, $attr, $url, $rawattr ) { // If the user supplied a fixed width AND height, use it if ( !empty($rawattr['width']) && !empty($rawattr['height']) ) { $width = (int) $rawattr['width']; $height = (int) $rawattr['height']; } else { list( $width, $height ) = wp_expand_dimensions( 480, 400, $attr['width'], $attr['height'] ); } $embed = sprintf( '<embed src="http://player.youku.com/player.php/sid/%1$s/v.swf" allowFullScreen="true" quality="high" width="'. esc_attr($width) .'" height="'. esc_attr($height) .'" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>', esc_attr( $matches['video_id'] ) ); return apply_filters( 'embed_youku', $embed, $matches, $attr, $url, $rawattr ); } wp_embed_register_handler( 'youku', '#https?://v\.youku\.com/v_show/id_(?<video_id>[a-z0-9_=\-]+)#i', 'wp_embed_handler_youku' ); } //// 对移动端的视频使用 iframe 方式插入 by zwwooooo | zww.me if( zfunc_is_mobile() ){ //// 如果 WordPress 是中文版,移除原来的 youku 视频代码自动插入 if (get_bloginfo('language')==='zh-CN') wp_embed_unregister_handler( 'youku' ); //// 增加 iframe 方式的视频调用 function wp_iframe_handler_youku( $matches, $attr, $url, $rawattr ) { // If the user supplied a fixed width AND height, use it if ( !empty($rawattr['width']) && !empty($rawattr['height']) ) { $width = (int) $rawattr['width']; $height = (int) $rawattr['height']; } else { list( $width, $height ) = wp_expand_dimensions( 480, 400, $attr['width'], $attr['height'] ); } $iframe = '<iframe width='. esc_attr($width) .' height='. esc_attr($height) .' src="http://player.youku.com/embed/'. esc_attr($matches[1]) .'" frameborder=0 allowfullscreen></iframe>'; return apply_filters( 'iframe_youku', $iframe, $matches, $attr, $url, $ramattr ); } wp_embed_register_handler( 'youku_iframe', '#http://v.youku.com/v_show/id_(.*?).html#i', 'wp_iframe_handler_youku' ); }
2. 用法:直接把优酷视频地址粘贴到文章内容里面,注意要独占一行
-------------
继续玩手机去~最近刷机刷狂了~
哦,我喜欢上那些带 HALO 的 ROM 了……
-------------
2013.7.22 更新:在评论中,大发提醒 WordPress 已经内置了移动设备判断函数 wp_is_mobile(),这是 WordPress 3.4 增加的,我没注意,所以代码可以精简成:
//// 如果 WordPress 不是中文版,增加优酷视频自动插入 Modify by zwwooooo | zww.me if (get_bloginfo('language') != 'zh-CN') { function wp_embed_handler_youku( $matches, $attr, $url, $rawattr ) { // If the user supplied a fixed width AND height, use it if ( !empty($rawattr['width']) && !empty($rawattr['height']) ) { $width = (int) $rawattr['width']; $height = (int) $rawattr['height']; } else { list( $width, $height ) = wp_expand_dimensions( 480, 400, $attr['width'], $attr['height'] ); } $embed = sprintf( '<embed src="http://player.youku.com/player.php/sid/%1$s/v.swf" allowFullScreen="true" quality="high" width="'. esc_attr($width) .'" height="'. esc_attr($height) .'" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>', esc_attr( $matches['video_id'] ) ); return apply_filters( 'embed_youku', $embed, $matches, $attr, $url, $rawattr ); } wp_embed_register_handler( 'youku', '#https?://v\.youku\.com/v_show/id_(?<video_id>[a-z0-9_=\-]+)#i', 'wp_embed_handler_youku' ); } //// 对移动端的视频使用 iframe 方式插入 by zwwooooo | zww.me if( wp_is_mobile() ){ //// 如果 WordPress 是中文版,移除原来的 youku 视频代码自动插入 if (get_bloginfo('language')==='zh-CN') wp_embed_unregister_handler( 'youku' ); //// 增加 iframe 方式的视频调用 function wp_iframe_handler_youku( $matches, $attr, $url, $rawattr ) { // If the user supplied a fixed width AND height, use it if ( !empty($rawattr['width']) && !empty($rawattr['height']) ) { $width = (int) $rawattr['width']; $height = (int) $rawattr['height']; } else { list( $width, $height ) = wp_expand_dimensions( 480, 400, $attr['width'], $attr['height'] ); } $iframe = '<iframe width='. esc_attr($width) .' height='. esc_attr($height) .' src="http://player.youku.com/embed/'. esc_attr($matches[1]) .'" frameborder=0 allowfullscreen></iframe>'; return apply_filters( 'iframe_youku', $iframe, $matches, $attr, $url, $ramattr ); } wp_embed_register_handler( 'youku_iframe', '#http://v.youku.com/v_show/id_(.*?).html#i', 'wp_iframe_handler_youku' ); }
OK,WordPress 真是无孔不入啊,牛x到很多人都不用了转用其他偏门或者小型的博客系统——这神马逻辑?
zww
赏
oooo
or
- 本文标题:PC端embed方式移动端iframe方式快速插入优酷视频
- 本文链接:https://zww.me/wordpress-easy-insert-youku-embed-iframe.z-turn
- 发布时间:2013年07月21日 14:03
- 版权声明:除非注明,文章均为 zwwooooo 原创,转载请以链接形式标明本文地址!
这功能不错~~ 前两天还在想手机上的视频怎么搞
不错~学习咯
来站个作为
@小周博客
占个座位
恩,写得不错。
wp有个函数是wp_is_mobile
@大发 wp函数无孔不入啊
@大发
原来 Since: 3.4,难怪我不知道 - -
@W3Cshare
对啊,太牛x了。
@zwwooooo
这都怎么被发现的。。。
@大发
大发真厉害,第一次看见这个,太好了
好东西啊,绝对是好东西~~
非常好的东西,对于手机端来说绝对有用,前几天故意插入了个视频,现在可以使用这个代码感受一下了!
@折子戏
这个对于经常插入视频的朋友来说是很方便
学习了,这些代码很有用
前两天在一个sns框架上插入iframge的优酷视频, 一直js报错, 无奈用回了flash
@牧风
Y2B的iframe方式貌似也会报js错误
让Flash早点进坟墓是我们的责任。。。
@DickWu
支持.
@DickWu
好像不是我们的责任,如果每个视频网站都不用flash,那些才有作用
我是原创者(屁啦~~
@axiu
……其实代码 WP codex 有 - -
谁说不收录的。。。。。YouTube 默认的引用就是 iframe 方式啊
@Showfom
所谓的SEO这个我可不懂,随便折腾,爱咋用就咋用,我只提供代码
@zwwooooo
赞一个。有真实价值的内容不用什么SEO的。
有点意思
我的做法是,粘帖iframe代码,将该代码转换成embed,而在移动端就不转换了。并且去除优酷广告只在embed格式下有用
@集趣
差不多吧
看了文章和评论,以上的都是代码高手啊!~~
请教怎么能控制视频窗口大小呢?分别在PC和手机上?
@ShunYea
css控制embed或者iframe
老大 太厉害了 可以把56站的分享下吗,我弄了几天都不行
@木木
你搜一下吧,有人弄了,我就懒得搞,最近也忙。
@zwwooooo
找了没有找到 希望你搞个出来 我会关注的,先谢了!
@木木
最近没时间折腾,你去56看看他们的分享代码, 然后依葫芦画瓢改下就行了
@zwwooooo
折腾了 土豆的可以用 不知道56那里有问题 搞不好
中秋了
这个代码怎样可以去广告,求教
@周周
这,去广告就不是调用问题了……
这里换了没有用