让WordPress媒体库支持外链图片

最近有一个月左右没更新了,因为这个月的业余时间都在忙于一个WordPress插件:External Media without Import。

其实只是很小很简单的一个插件,代码不过短短几百行。不过这东西一旦被当成产品认真做起来,依然让我感到——每天在上班时间以外,应对完工作上的需求和bug之后,接着还要在业余时间认真做好另一个产品是多么劳心劳力。这是我正式发布并打算认真维护的第一个个人项目。为此我还自己设计制作了用于WordPress官方渠道的插件图标和Banner:

闲话少说,还是来介绍一下这个插件。先列出插件地址。

插件的WordPress官方渠道地址:

https://wordpress.org/plugins/external-media-without-import/

插件的Github地址:

https://github.com/zzxiang/external-media-without-import

使用WordPress建站的人可能大都知道,在没有插件支持的情况下,要将一张图片添加进WordPress媒体库中,就必须要将图片文件上传到WordPress所在的服务器。但是有的用户可能希望将图片存储在另一台服务器另一个域名上以节省WordPress主站的空间和流量,与此同时仍然想将这些图片添加进WordPress媒体库,以便使用WordPress媒体相关的功能和插件——比如相册等。

External Media without Import就是用来满足这个需求的插件。它可以将一个外链图片添加进WordPress媒体库中,但只是往WordPress数据库里插入一条链接数据,并不会将图片文件传到WordPress站点所在的服务器上。当然,一条数据库记录也会占用服务器空间,但比起动辄几十KB乃至几个MB的图片文件来说,还是微不足道的。

该插件在WordPress管理页面的媒体添加上传面板中增加了一个Add External Media without Import按钮:

点击它就会出现一个输入图像URL的面板。输入图像URL后点击“添加”按钮,就会将外链图片插入至媒体库中。就是这么简单易用:

因为界面上扩展的是媒体库的上传面板,所以用户在编辑文章和页面的过程中也可以随时使用该插件添加外链图片到媒体库中。

另外,你也可以点击管理页面左侧菜单的“多媒体”->“Add External Media without Import”子菜单直接进入URL的输入面板。

做这个插件的最初动机是来源于我博客的作品集页面的排版。那时我的作品集页面使用了一个支持外链图片但只支持Grid排版的相册:Responsive Grid Gallery with Custom Links。然而页面中的各个图片宽度高度都不相等,这就造成了页面中有的图片上下或左右空隙很大,使排版很是难看:

因此我打算改用瀑布流排版(Masonry Layout)。支持瀑布流排版的相册插件倒是不少,但并不是随便挑一个都能用。这是因为绝大部分相册插件要么只接受媒体库里的图片,要么需要用户上传本地图片,也就是说相册中的图片仍然要存储在WordPress站点上。而我为了节省博客站点自身的空间和流量,将所有图片都放在了Photobucket上。因此我需要一个既支持外链图片又支持瀑布流排版的相册插件。

然而支持外链图片的相册插件本身就很少,支持外链图片的瀑布流相册插件更是一直没找到。于是我想到了让WordPress媒体库支持外链图片的插件,那样很多相册插件就能用上了。于是就诞生了这个External Media without Import插件。

接着我又使用BNE Gallery ExtendedWP Gallery Custom Links这两个插件扩展了WordPress的自带相册——前者让相册支持瀑布流排版,后者让相册中的每张图片支持自定义的点击链接。最终用这两个插件再加上我自己做的External Media without Import,三管齐下实现了作品集页面的外链图片的瀑布流相册。从下图右侧的页面源代码中选中的元素可见图片是从Photobucket上取的,并没有存储在WordPress站点上:

想不到我的第一个正式发布的个人项目是个Web项目,用到的技术是我在现在工作的互联网创业公司学到的Web技术。原本想主打的游戏开发技术到现在一毛钱都还没用上。

《让WordPress媒体库支持外链图片》上有44条评论

  1. 添加的时候出现这一行字:Failed to prepare attachment for js Please fill in the following properties manually. If you leave the fields blank (or 0 for width/height), the plugin will try to resolve them automatically
    博主帮忙解决下,谢谢

    1. 再次点击“添加”呢?你的WordPress是哪个版本?
      如果还不行的话可以点击后台左侧管理菜单里的“多媒体” -> Add External Media without Import,在那个页面里添加试试。

  2. 插件不错,后期能否可以支持直接上传而不是跳转到媒体库?也就是说前台非管理员也可以操作上传工作,这个功能可以实现么?

      1. 目前插件插入图片都需要跳转到后台媒体库,插入到媒体库之后才能调用,这个只有【管理员】才能完成操作,我想问的是能不能实现其他【注册用户】能否在前台使用这个外链图片功能(无需跳转到后台媒体库)

          1. 嗯嗯,如果能实现注册用户上传的话,那这个插件应该市场很大,毕竟现在很多网站都有投稿功能,如果投稿量大的话,图片就会占用很大空间;可以考虑做个付费版本,我想很多人都是可以接受的,能搞定的话email下我,谢谢。

    1. 能否具体解释一下“自行选择是否把图片从媒体库中移除”的意思呢?将图片从媒体库中删除不是选择图片然后删除就可以了吗?

    1. 我又来了QAQ,今天一张一张上传了300张,还有几千张没传。。希望能添加批量上传的功能,也愿意付费购买orz

      1. 哇,几千张……Orz 其实我已经收到了好些希望添加批量上传功能的请求,现在也在考虑中。就是最近刚开展海外生涯,一时半会儿抽不出身来。不过应该不久就可以着手这个功能了。谢谢你的肯定!

  3. 插件非常好!大赞!
    只是在网站搬家的时候遇到此插件报错
    Parse error: syntax error, unexpected T_STRING in /data/home/**********/htdocs/wp-content/plugins/external-media-without-import/external-media-without-import.php on line 25
    看过原文件,第25行应该是
    namespace emwi;
    不知可否帮忙分析错误原因和解决办法,如果方便,可邮件交流,多谢!

    1. 写这篇文章的时候我用UCloud做图床。现在站点搬到Vultr上之后,因为Vultr空间和流量都够大,所以搬家后添加的图片也一并放在了Vultr上。

  4. 我使用的时候发现,我网址是HTTPS ,然后 使用HTTP的图片地址
    页面强制加了S ,
    图片变成HTTPS了
    图片显示失败
    是什么问题

    1. https的网页引用http的资源是会遇到警告的,但为什么会强制加 s 还真是不清楚。你输入图片地址的时候有没有在地址前面明确加上 http:// ?如果靠自动补全的话,很可能就补全成 https 了。

  5. 你好。我使用的wordpress3.5
    启用插件时遇到
    无法启用插件,因为它引起了一个致命错误(fatal error)
    Parse error: syntax error, unexpected T_STRING in /wp-content/plugins/external-media-without-import/external-media-without-import.php on line 25

  6. 今天发生了一个很奇怪的情况
    通过这个插件导入的图片都无法用在Product gallery.
    可以正常的添加进Product gallery。
    但是发布的时候,Product gallery的图片就会消失不见,在前台也看不到
    之前都是正常的。
    这个情况今天才刚发现。

    1. Product Gallery是一个插件吗?有的使用媒体库的插件确实是无法跟我这个插件协同的,我也遇到过。我也不知道为什么。如果你那边之前都是正常的话,是不是最近更新过Product Gallery插件?

  7. 你好作者,感谢你开发的插件很有用。我在测试外链图片时,遇到问题请教一下,请问,外链图片格式是否有要求?
    测试时 .jpg格式的图片在PC、手机上都正常显示,而像花瓣网的图片链接,不是正常的图片格式结尾,例如:http://img.hb.aicdn.com/adeed7d28df6e776c2fa6032579c697381d1a82b7fe00-fwRqgn_fw658

    这种图片,外链后,在PC上正常显示,在安卓手机上有时显示有时不显示。

    2.而topit.me网站的图片,图片链接虽然是jpg结尾,但是外链后,图片在PC、手机上都不显示。示例图http://a3.topitme.com/f/cd/e8/112987699774ee8cdfl.jpg
    希望能得到回复,谢谢!

    1. 真是太抱歉了,忙了将近三个月才能仔细看你的留言。

      http://img.hb.aicdn.com/adeed7d28df6e776c2fa6032579c697381d1a82b7fe00-fwRqgn_fw658 这样的URL很可能是无法被正常添加的,因为我的这款插件并没有接驳任何图床平台(包括花瓣网)的接口,所以需要被添加的URL本身就是一个普通的图片外链地址。通常这样的URL都是以jpg或是png之类的图片格式扩展名结尾。我刚才在浏览器中打开这个URL后试着用“另存为”将图片保存下来,但是却保存失败了,被提示说我的操作已被禁止,因此很可能是花瓣网并不允许浏览器以外的第三方程序(比如我的插件,或是ftp客户端)通过URL直接获取图片数据。

      至于 http://a3.topitme.com/f/cd/e8/112987699774ee8cdfl.jpg 这张图片的话,我刚才在我的博客里倒是可以正常地添加这张图片,只是打开的时候非常慢。看图片的体积并不大,不知会不会是网络方面的缘故。

  8. 我目前想得用wordpress和WooCommerce插件搭建自己的购物网站,所以也遇到图片已经上传在其它服务器的问题,请问大神,它能和WooCommerce插件兼容么?

    1. 正好我昨天用最新的WooCommerce(版本3.4.5)试过一下,暂时是没试出问题。但是我也收到了一些反馈说无法兼容WooCommerce,所以我也不好说。最近打算抽时间研究一下。

发表评论

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