WordPress整合Ckplayer播放器详细教程

峰哥
峰哥
峰哥
579
文章
1
评论
2020年10月1日09:55:03
评论

峰哥这里用的Begin主题自带的MP4视频是有短代码直接调用的,不过感觉不是很好用,所以就整合下这个Ckplayer播放器。本来想直接在网上搜下直接拿来主义,结果网上关于WordPress整合Ckplayer播放器的教程是有很多,大多都是抄来抄去,文章也是好久以前的,基本没有什么用了,只能自己动手。

首先在看看效果吧:

后台:

WordPress整合Ckplayer播放器详细教程

前台:

上一集 下一集
正在播放

是不是觉得不错,想给自己的博客搞上吧,想就接着向下看。

爱游这里把Ckplayer播放器整合到WordPress然后创建一个短代码弹窗直接输入视频地址,这样使用起来就比较方便。

首先我们需要去下载一个Ckplayer播放器源码,去官网下载最新的就行了,然后放到主题的根目录里面。

这里需要修改主题文件functions.php,把下面的代码放在functions.php文件里面就行了

function vipiu_ckplayer_scripts() {
  wp_enqueue_script( 'ckplayer', get_bloginfo('template_url') . '/ckplayer/ckplayer.js', false, '', false);
}
add_action('wp_enqueue_scripts', 'vipiu_ckplayer_scripts');
 
add_shortcode("ckplayer","vipiu_ckplayer_shortcode");
function vipiu_ckplayer_shortcode( $atts, $content=null ){
    $nonce = wp_create_nonce(rand(10,1000));
    return '<div id="ckplayer-video-'.$nonce.'" class="ckplayer-video" style="margin-bottom:30px;"></div>
    <script type="text/javascript">
        var videoObject'.$nonce.' = {
            container:"#ckplayer-video-'.$nonce.'",
            variable:"player",
            autoplay:false,
            video:"'.$content.'"
        };
        var player=new ckplayer(videoObject'.$nonce.');
    </script>';
}
 
 
add_action( 'admin_init', 'vipiu_tinymce_button' );
function vipiu_tinymce_button() {
     if ( current_user_can( 'edit_posts' ) && current_user_can( 'edit_pages' ) ) {
          add_filter( 'mce_buttons', 'vipiu_register_tinymce_button' );
          add_filter( 'mce_external_plugins', 'vipiu_add_tinymce_button' );
     }
}
 
function vipiu_register_tinymce_button( $buttons ) {
     array_push( $buttons, "button_ckplayer");
     return $buttons;
}
 
function vipiu_add_tinymce_button( $plugin_array ) {
     $plugin_array['vipiu_button_script'] = get_bloginfo('template_directory') . "/js/editor.js";
     return $plugin_array;
}

然后再新建一个JS文件命名为editor.js,放在主题目录js文件夹里面,代码如下:

注意:把以下JS里面的这段代码里面的【】改成[]

ed.selection.setContent('【ckplayer】'+e.data.videoSrc+'【/ckplayer】');

(function() {
     tinymce.create('tinymce.plugins.vipiu', {
          init : function(ed, url) {
               /**
               * Inserts shortcode content
               */
               ed.addButton( 'button_ckplayer', {
                    text : '',
                    icon: 'wp-media-library',
                    title : '插入ckplayer视频',
                    onclick : function() {
                         ed.windowManager.open( {
                              title: '视频地址',
                              body: [{
                                   type: 'textbox',
                                   name: 'videoSrc',
                                   label: false,
                                   value: '',
                                   multiline: true,
                                   minWidth: 300,
                                   minHeight: 100
                              }],
                              onsubmit: function( e ) {
                                   ed.selection.setContent('【ckplayer】'+e.data.videoSrc+'【/ckplayer】');
                              }
                         });
                    }
               });
          },
          createControl : function(n, cm) {
               return null;
          },
     });
     /* Start the buttons */
     tinymce.PluginManager.add( 'vipiu_button_script', tinymce.plugins.vipiu );
})();

完成以上就能实现像峰哥这样直接输入地址直接调用,不必手动输入短代码,这样就比较方便点。

峰哥博客官方重要提醒:
部分教程和软件中可能含有投递者个人宣传广告/QQ/QQ群等联系方式,如涉及交易请谨慎对待!
峰哥
  • 【新】峰哥博客交流群 :666846719(进群禁广告) 飞车交流群:80338959(有截图机器人)
  • 我们非常重视版权问题,如有侵权请邮件与我们联系处理。敬请谅解!
WordPress主题 酱茄模块主题 整站源码

WordPress主题 酱茄模块主题

使用说明: 方法1:下载的压缩包先解压 → 重新压缩jqfree为zip → wp后台 → 外观/主题/添加 → 上传安装并启用; 方法2:当然也可以FTP上传到/wp-content/themes目...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: