WordPress增加自动解析youtube视频功能

文章目录 「隐藏」
  1. 一、找解析地址
  2. 二、增加短代码

前面讲过怎么样张wordpress增加优酷视频解析教程,自己感觉了一下还挺实用的,今天为大家介绍如果给你的博客增加youtube视频解析功能,同时增加短代码,当然,首先你要能打开youtube视频,如果你的博客是面向外国人的,可以这样做,原理其实和增加优酷视频一样的。

一、找解析地址

这个网上的大佬们也有提供,首先我们找到一个youtube的视频地址:(可以百度找一个)

https://www.youtube.com/watch?v=WrY6n0gDuAc

同样的,我们需要只是上面红色部分,因为是要增加短代码,解析地址为:https://www.youtube.com/embed/+上面红色部分

二、增加短代码

我们需要把短代码增加到函数文件中,所有主题的函数文件都是functions.php,但是有一些主题这个文件里的代码非常少,会解析到另外的地址,只要看一下代码就可以,我们在这里面增加以下代码:

function youtube($atts,$content=null,$code=""){ $return = '<div class="video-container"><iframe height="498" width="100%" src="https://www.youtube.com/embed/'; $return .= $content; $return .= '" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>'; return $return; } add_shortcode('youtube','youtube'); function more_button_a(){ if(!current_user_can('edit_posts')&&!current_user_can('edit_pages')) return; if(get_user_option('rich_editing')=='true'){ add_filter('mce_external_plugins','add_plugin'); add_filter('mce_buttons','register_button'); } } add_action('init','more_button_a'); function register_button($buttons){ array_push($buttons," ","youku"); array_push($buttons," ","youtube"); return $buttons; } function add_plugin($plugin_array){ $plugin_array['youku'] = get_bloginfo('template_url').'/buttons/more.js'; $plugin_array['youtube'] = get_bloginfo('template_url').'/buttons/more.js'; return $plugin_array; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 function youtube ( $ atts , $ content = null , $ code = "" ) {      $ return = '<div class="video-container"><iframe height="498" width="100%" src="https://www.youtube.com/embed/' ;      $ return . = $ content ;      $ return . = '" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>' ;      return $ return ; } add_shortcode ( 'youtube' , 'youtube' ) ; function more_button_a ( ) {    if ( ! current_user_can ( 'edit_posts' ) && ! current_user_can ( 'edit_pages' ) ) return ;    if ( get_user_option ( 'rich_editing' ) == 'true' ) {      add_filter ( 'mce_external_plugins' , 'add_plugin' ) ;      add_filter ( 'mce_buttons' , 'register_button' ) ;    } } add_action ( 'init' , 'more_button_a' ) ;   function register_button ( $ buttons ) {      array_push ( $ buttons , " " , "youku" ) ;      array_push ( $ buttons , " " , "youtube" ) ;      return $ buttons ; } function add_plugin ( $ plugin_array ) {      $ plugin_array [ 'youku' ] = get_bloginfo ( 'template_url' ) . '/buttons/more.js' ;      $ plugin_array [ 'youtube' ] = get_bloginfo ( 'template_url' ) . '/buttons/more.js' ;      return $ plugin_array ;    }

因为之前我增加了优酷,所以下面的调用图片的地方直接增加就可以了,同时video-container可以在CSS设置样式,同样的,需要去more.js里增加调用按钮图片,打开JS文件,增加:

tinymce.create('tinymce.plugins.youtube', { init : function(ed, url) { ed.addButton('youtube', { title : 'YouTube', image : url+'/images/youtube.png', onclick : function() { ed.selection.setContent('[youtube]' + ed.selection.getContent() + '[/youtube]'); } }); }, createControl : function(n, cm) { return null; }, }); tinymce.PluginManager.add('youtube', tinymce.plugins.youtube);

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15      tinymce . create ( 'tinymce.plugins.youtube' , {          init : function ( ed , url ) {              ed . addButton ( 'youtube' , {                  title : 'YouTube' ,                  image : url + '/images/youtube.png' ,                  onclick : function ( ) {                      ed . selection . setContent ( '[youtube]' + ed . selection . getContent ( ) + '[/youtube]' ) ;                  }              } ) ;          } ,          createControl : function ( n , cm ) {              return null ;          } ,      } ) ;      tinymce . PluginManager . add ( 'youtube' , tinymce . plugins . youtube ) ;

找一个你想要的图标文件,放入buttons文件夹里,后台写文章的面板里就会出有这个图标了。短代码格式如下:

[youtube]9Yam5B_iasY[/youtube]
我是访问不了youtube的,不过让朋友试了一下,可以正常显示视频。

《WordPress增加自动解析youtube视频功能》留言数:0

    发表留言