A-A+

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

2018年12月03日 wordpress, 教程已关闭评论阅读次

Vultr：月付$2.5起，注册送$100，按小时计费VPS，随时删除，随时更换IP

前面讲过怎么样张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;
  }

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);

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的，不过让朋友试了一下，可以正常显示视频。

国外VPS

vps测评_便宜vps_国外vps_vps优惠大全_柒柒测评

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

一、找解析地址

二、增加短代码