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!

猜你喜歡

WordPress–免修改scandir添加模板页面 今天打算给博客增加个友链内页,发现新增页面时没有选择模板的栏位。 搜索了下,说是需要修改php.ini的scandir属性,将其从disable项目里去掉。但博客因为是虚拟主机,后台提供的修改栏位很少,无法更改。 追了下增加页面的源码,发现可以到数据库的post_meta表中增加项目来完成。 ...
WordPress使用Markdown编辑器 Markdown     Markdown是一种轻量级的文本格式化语言,通过简单的标记语法,它可以使普通文本内容具有丰富的格式。最初设计主要被用于程序设计的Readme编写,或者用于一些在线技术讨论论坛的信息发送。它很方便被用来和HTML格式语言进行转换。 很多在线博客都支持Markdown语言。例...
WordPress如何关联熊掌号 WordPress关联熊掌号 前言 做站还是希望能得到大家的关注,百度作为国内最大的搜索引擎,给站长提供了熊掌号平台。绑定网站后,百度搜索会倾向于优先展现熊掌号的内容,可以为网站引入一定搜索流量。 通过摸索,得到建立熊掌号的流程如下: 建立熊掌号 Wordpre...
升級到WordPress 4.9.8 Wordpress後台最近一直在推送Gutenberg(古騰堡)編輯器。本想直接打開試試,發現Wordpress必須升級到新版才可。 做完備份,便做了升級,第一時間試用了古騰堡,發現與原生編輯器完全不同。但是各有利弊。 好處如下: 界面更大氣好看 如下圖: 所有文章標題、段落、圖...
WordPress-写插件增加小工具(Widget)的方法... 写这篇文章的目的,是因为在使用WP-MulticolLinks插件时,发现只能增加一个小工具(Widget)到工具栏。如下图,这样没有办法按照类别增加多列友链小工具。 于是对该插件做了修改,可以支持在后台拖动多个多列友情链接小工具。 以下是在插件中增加代码实现多列的方法: 注册我们...

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

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


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

发表评论

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

2 + 2 =

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