【WordPress教程】WordPress对接Hello免费图床

  • 文章介绍
  • 介绍

    Hello图床是一款支持多图上传,粘贴上传,URL上传,图片压缩,图片鉴黄等多种实用功能,提供高速稳定的图片上传和外链服务与全球CDN加速服务

    实现

    仅支持标准编辑器(含Ri主题系列),默认古腾堡编辑器无法支持。

    请修改账号及密码后在主题目录下functions.php文件中添加如下代码:

    //添加图床上传按钮
    add_action('media_buttons', 'add_my_media_button');
    function add_my_media_button() {
        $currentUser = wp_get_current_user();
            if(!empty($currentUser->roles) && in_array('administrator', $currentUser->roles)){
                $DOMAIN="www.helloimg.com";
            }
            else
                return 0; 
        echo '
                <input id="up_to_chevereto" type="file" accept="image/*" multiple="multiple"/>
                <label for="up_to_chevereto" id="up_img_label"><i class="fa fa-picture-o" aria-hidden="true"></i> 上传图片到Hello图床</label>
              ';
    ?>
    <style type="text/css">
    #up_to_chevereto {
      display: none;
    }
    #up_img_label {
      color: #fff;
      background-color: #16a085;
      border-radius: 5px;
      display: inline-block;
      padding: 5.2px;
    }
    </style>
    <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">
    $('#up_to_chevereto').change(function() {
      window.wpActiveEditor = null;
      for (var i = 0; i < this.files.length; i++) {
        var f=this.files[i];
        //hello图床账户
        var userd= '你的邮箱';
        //密码
        var passworda= '你的密码';
        var formData=new FormData();
        formData.append('login-subject',userd)
        formData.append('password',passworda)
        formData.append('source',f);
        $.ajax({
            async:true,
            crossDomain:true,
            url:'https://<?php echo $DOMAIN; ?>/newapi/2/upload/?format=json',
            type : 'POST',
            processData : false,
            contentType : false,
            data:formData,
            beforeSend: function (xhr) {
                $('#up_img_label').html('<i class="fa fa-spinner rotating" aria-hidden="true"></i> Uploading...');
            },
            success:function(res){
                wp.media.editor.insert('<a href='+res.image.url+'><img src='+res.image.url+' alt='+res.image.title+'></img></a>');
                $("#up_img_label").html('<i class="fa fa-check" aria-hidden="true"></i> 上传成功,继续上传');
            },
            error: function (){
                $("#up_img_label").html('<i class="fa fa-times" aria-hidden="true"></i> 上传失败,重新上传');
            }
        });
      }
    });
    </script>
    <?php
    }
    

    按钮演示效果:

    【WordPress教程】WordPress对接Hello免费图床

     

    免责声明 1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
    2. 分享目的仅供大家学习和交流,请不要用于商业用途!
    3. 如果你也有好源码或者教程,可以到审核区发布,分享有金币奖励和额外收入!
    4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
    5. 如有链接无法下载、失效或广告,请联系管理员处理!
    6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
    7. 如遇到加密压缩包,默认解压密码为"riyuanma.com",如遇到无法解压的请联系管理员!
    日源码是一个优秀的分享资源站,本站资源均为各位友友分享而来,特殊原创会标明如有侵犯版权等可联系admin@exmail.riyuanma.com删除
    开通Rich 享更多特权,建议使用 QQ 登录