不忘初心
方得始终

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 ‘

‘;
}

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 );
})();
完成以上就能实现像这样直接输入地址直接调用,不必手动输入短代码,这样就比较方便点。

赞(0) 打赏
免责声明: 本站提供的资源,都来自网络,版权问题联系邮箱:[email protected]云上分享 » WordPress整合Ckplayer播放器简单教程!

评论 抢沙发

9 + 8 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏