WordPress: 简单修改七牛云图床插件支持Gutenburg(古腾堡)

Categories Wordpress建站
WordPress: 简单修改七牛云图床插件支持Gutenburg(古腾堡)

前言

博客空间有限,一直使用七牛云图床开心洋葱的图床插件做图片上传。之前按照《升級到WORDPRESS 4.9.8》介绍更新古腾堡编辑器后,发现插件失效。本文介绍简单修改,让Gutenberg后台仍可使用插件做图片上传。

注:本文修改简单,并非实现Gutenberg Block,若您想了解如何修改,可以移步How to build a Gutenberg block plugin 学习了解。

呈现效果

修改方法

1.修改qiniu-cloudtuchuang.php代码如下,注意代码加亮部分:

//上传窗口
add_action('do_meta_boxes', 'qiniu_cloudtuchuang_script');
function qiniu_cloudtuchuang_script(){
    wp_enqueue_script( 'qiniu-jquery', plugins_url('js/qiniujq.min.js', __FILE__));
    //wp_enqueue_script( 'plupload-all',plugins_url('js/plupload/js/plupload.full.min.js', __FILE__) );
	wp_enqueue_script( 'plupload-all');
    wp_enqueue_script( 'qiniu', plugins_url('js/qiniu.js', __FILE__));
    wp_enqueue_script( 'qiniu-main', plugins_url('js/main.js', __FILE__ ),array( 'jquery' ));
    wp_enqueue_script( 'qiniu-ui', plugins_url('js/ui.js', __FILE__));
}    
 
add_action('do_meta_boxes', 'qiniu_cloudtuchuang_post_box');
function qiniu_cloudtuchuang_post_box(){
    $options = get_option('qiniu_options');
    if($options['accesskey'] && $options['secretkey']) add_meta_box('qiniu_cloudtuchuang_div', __('七牛云图床'), 'qiniu_cloudtuchuang_post_html', 'post', 'side');
}

add_action('do_meta_boxes', 'qiniu_cloudtuchuang_style');

function qiniu_cloudtuchuang_style(){
	wp_enqueue_style('qiniu_cloudtuchuang_style', plugins_url('css/qiniu_cloudtuchuang.css', __FILE__));
}

function qiniu_cloudtuchuang_post_html(){
	$options = get_option('qiniu_options');
    $host = $options['host'];
    $bucket = $options['bucket'];
    $prefix = $options['prefix'];
    $accesskey = $options['accesskey'];
    $secretkey = $options['secretkey'];
    $imgurl = $options['imgurl'];
    echo "<script>";
    if (!empty($prefix)) {
        echo 'var savekey = true; var prefix = \''.$prefix.'\';';
    }else echo 'var savekey = false;var prefix = \'\';';
    if (!empty($imgurl)) {
        echo 'var imgurl = true;';
    }else echo 'var imgurl = false;';
    echo 'var host =\''.  $host . '\';';
	//$nonce = wp_create_nonce('cloudtuchuang');
    //echo 'var uptokenurl=\''. plugins_url('token.php', __FILE__) . '?_ajax_nonce='. $nonce .'&secretKey='. $secretkey . '&accessKey=' . $accesskey . '&bucket=' . $bucket . '&prefix=' . $prefix .'\'</script>';
	echo 'var uptokenurl=\''. plugins_url('token.php', __FILE__) . '?secretKey='. $secretkey . '&accessKey=' . $accesskey . '&bucket=' . $bucket . '&prefix=' . $prefix .'\'</script>';
    //echo '<div id="qiniu_cloudtuchuang_post"><div id="pickfiles" href="#" ><span id="spantxt">拖拽上传图片</span></div></div>';
    echo '<div id="qiniu_cloudtuchuang_post_btn"><a id="qiniu-insert-media-button" class="button insert-qiniuyun " title="添加图片" data-editor="content" href="javascript:;">^_^ <span id="spandesc">添加图片</span></a></div>';
     echo 'File(Image) URL:<input type="text" id="qiniu_image_addr" readonly />';;
}

2. 修改js/main.js,找到“console.log(img);”,增加如下第二行代码:

console.log(img);
$('#qiniu_image_addr').val(qiniuurl);

3. 执行以上修改后保存退出即完成。

总结

以上修改相对还是比较简单,Enjoy it!


版权声明:本站文章除非特别声明,均为L&H原创。允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。

本文链接:WordPress: 简单修改七牛云图床插件支持Gutenburg(古腾堡) @ L&H site


4 thoughts on “WordPress: 简单修改七牛云图床插件支持Gutenburg(古腾堡)

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据