一個讓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技術。原本想主打的遊戲開發技術到現在一毛錢都還沒用上。


本文在我的獨立博客的地址:http://zxtechart.com/2017/06/05/wordpress/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章