/ 博客 / 2912阅

WordPress自定义文件上传路径并同步七牛实现目录式文件管理

先说下大背景,在1月份文《如何发布照片又快又好?》中提到:

大家都知道我的博客图片量巨大,目前已有2.8Gb图外链在163图床,性能较为稳定,容量可传10Gb,流量无限,价格也不贵198/年,但是上传极其不便,比如在外面看到有意思的事,手机拍了是没有app直接上传到图床并分享到博客的,需要回家用电脑传上去再拷贝外链地址分享,其实已经严重影响分享体验和吐槽心情。另外我一直担心哪天163瞧不上这不怎么赚钱的小业务以后关站可就惨了,没半年这上万的外链都迁徙不回来。 😓

如果升级自己的站点到大容量高流量也不是不可以,就怕:1、以后迁站不方便;2、站点负担不起水涨船高的流量成本和DDos威胁。

那么问题来了,万能的博客圈有没有简单省事、不影响既有wp工作流、适应未来掌上媒体发布方式、价格也适中的办法?太复杂需要配置服务器的就算了,没那么多时间……

因此多方寻求了贵圈的经验,大部分都推荐寻找稳定的图床,如七牛和又拍。感觉还是七牛比较靠谱,其优势在于强大的api、较快的速度、以及有七牛云存储插件可无缝同步,而且我四年前就玩过,比较熟悉。

当然也有一些问题,比如以前的163图床的图需要全部搬回来。这也就算了,还有问题在于:

  1. 站点图片太多。如果直接上传到七牛,外链太麻烦,与163等老式图床的外链一个路子,传上去再拷贝外链再一条条粘贴到博客,想想就隐隐蛋疼。另外手机发图很不友好。
  2. 如果直接上传到WordPress媒体库,通过七牛云存储插件同步,实现CDN,则站点的wp-content/uploads/目录下会积攒几个Gb按照年份-月份排布的乱七八糟的图片,难以接受,万一迁移或者备份也很不方便。也想过每次在同步后删掉uploads目录,但后续管理及继续上传非常糟糕和麻烦。
  3. fooleap在他博客回复中提到过:“……好图床的前提条件应该是目录式,原文件名,这样编辑管理起来比较方便,七牛可以满足这个需求……七牛网站上传,这个路径前缀就可以当作七牛的目录”。受此启发,想要最大限度利用这个优势,把图片同步到七牛时实现“sitename/%post_id%/image.jpg”的形式,而不是目前七牛云存储插件同步时搞成的“uploads/year/month/image.jpg”的形式。
  4. 网站没备案,无法启用七牛的自定义域名。备案咨询了接入商,服务器得从香港迁徙到广东,还要求自己预先备份,又是个大工程。

琢磨了一个月,终于想出较为简单的办法并成功实现“WordPress自定义文件上传路径并同步七牛实现目录式文件管理”。

方法如下:

  1. 建议升级站点(假设为http://site.com)容量,一般放个2Gb-4Gb就够了,价格不算贵。流量升级可以不管,够用就行。然后新开子域名(假设为http://media.site.com),可酌情建立一个文件夹uploads。
  2. 当然也可以再搞一个新站点专门用于存放文件,实现动静分离,方法类似,效果更好,本文不专门讨论。
  3. 在站点的“仪表盘”-“设置”-“媒体”里,把“默认上传路径(缺省为wp-content/uploads)”改成:“[新子域名的绝对路径]/uploads。把“文件的完整URL地址”改成“http://media.site.com/uploads”。去掉“以年-月目录形式组织上传内容”前面的勾选。保存更改。
  4. 下载并安装插件Custom Upload Dir,将“Build a path template:”(模板路径)设置为“/%post_id%”,“Settings for taxonomy hierarchies:”设为“Always get all parents”,“Enter some post IDs to test the path generated:”可随便选一篇文章把ID输入后测试一下效果。
  5. 去七牛云空间注册,并建立一个存储空间,假设为mysite。在“镜像存储”中,把“镜像源”设为http://media.site.com
  6. 下载并安装插件七牛云存储。正常设置(见教程)后,“本地设置”一栏,目录填“uploads”,本地域名填“http://media.site.com”。“缩略图设置”一栏,全部留空。“远程图片设置”一栏,全部留空(我不喜欢远程图片乱七八糟都被CDN到七牛)。水印可不填。
  7. 子域名设置.htaccess文件,用于防止非白名单盗链(其实防君子不防小人)。.htaccess设置方法网上都有,不展开了。
  8. 关于上传后会产生768px的图片垃圾,参见前文《彻底关闭上传后768px缩略图》。
  9. 关于上传自动生成水印,建议用插件DX-Watermark,相对好用,且可以自定义字体。当然七牛云存储插件和七牛云空间都有该功能,可根据个人喜好灵活选用。实在不想用插件,网上随便找一个图片批处理软件,比如Mac下的Photobulk、Windows下的ACDSee、iOS下的iWatermark,加水印都很便捷。

最终效果:

  • 文章照片上传地址为:http://media.site.com/uploads/%post_id%/image.jpg
  • 同步在七牛的照片文件名为:uploads/%post_id%/image.jpg

总结一下:

  • 实现了通过电脑和手机直接拉图片上传
  • 实现了通过设立单独的文件夹规范管理
  • 实现了按照文章的ID分子目录存储图片
  • 实现了七牛云自动CDN防止高流量接入
  • 实现了七牛云存储中图片的目录式存储
  • 实现了图片上传后自动添加水印的功能
  • 还可以实现图片自动裁切等更高级功能
# 写于七年前,改于二年前
           

14

  1. 木瓜园

    功夫不负有心人,恭喜!

    Safari 11 · iPhone iOS 11.2.6
    1. S̆̈

      @木瓜园谢谢 😎

      Google Chrome 64 · Mac OS X 10.13
  2. fooleap

    用了好多插件,唉,考虑有时候只想发图,话又不多的情况下,博客要不要搞一个相册分类,若还是用七牛,还用 Jekyll,怎么做又是个问题。 😀

    Google Chrome 63 · Windows 7
    1. S̆̈

      @fooleap除了水煮鱼七牛插件相对比较复杂外,就用到一个老外做的插件Custom Upload Dir,这个插件可以被代码代替,我只是懒。DX-Watermark也可以不用,用七牛插件可实现类似效果。
      Jekyll不太熟悉,不过我觉得都是php,要实现效果应该类似吧?
      我个人觉得相册没啥用,还是直截了当写一篇博文比较好。

      Google Chrome 64 · Mac OS X 10.13
      1. fooleap

        @S̆̈:arrow:有时候懒得写, Jekyll 不是 PHP,具体到前端主要是模板语言 Liquid。

        Google Chrome 63 · Windows 7
        1. S̆̈

          @fooleap嗯我也常常懒得写,奉行拿来主义……
          Jekyll看着比较高级,我是玩不来了。

          Google Chrome 64 · Mac OS X 10.13
          1. fooleap

            @S̆̈Jekyll 配置好环境,玩起来是比 WP 要简单很多的,各方面比较简陋。

            Google Chrome 63 · Windows 7
            1. S̆̈

              @fooleap毛坯房好装修嘛。

              Wordpress App 9 · iPhone iOS 11.2.6
  3. JiaYin

    对我来说好复杂。。。。天书一样。。。 😥

    Google Chrome 64 · Windows 8.1
    1. S̆̈

      @JiaYin我探索出来花了好久……其实不复杂,按照教程一步一步做就好啦。

      Wordpress App 9 · iPhone iOS 11.2.6
  4. 老何

    好久没用wp了,感觉太复杂.我用te,一条命令搞定七牛云储存,而且在博客本地也有备份. 😈

    Firefox 58 · Windows 7
    1. S̆̈

      @老何你们都太高级了 😛

      Google Chrome 64 · Mac OS X 10.13
  5. emmai

    楼主这样操作之后,媒体库里面还是没有七牛的图片,比如我想在写文章的时候添加特色图,这个时候只能从媒体库选择,也就意味着我只能从本地上传,然后放到自己的服务器上面,是吗?

    Google Chrome 71 · Windows 10
    1. S̆̈

      @emmai这个方法当时没有考虑到媒体库的问题。目前我已经改用阿里云,相对比较便捷,也有媒体库,方法见 https://synyan.cn/t/?p=17719

      Wordpress App 11 · iPhone iOS 12.1

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注