WordPress 超輕量圖片 Lightbox 特效外掛 – 完美取代 FooBox

前陣子跟社團的前輩聊到能單純提供圖片 Lightbox 燈箱效果的外掛,希望能找到比 FooBox 更為輕量的替代品。

因為很多時候架設 WordPress 網站需要的只是單純能讓單張圖片、多張圖片 (圖庫) 在點擊之後彈出視窗,以原尺寸或全螢幕的方式顯示圖片,方便訪客能更清晰地看到圖片中的細節。

這個時候,FooBox 這種旗艦型的外掛提供了太多太多我們不需要的功能,也造成了網頁載入速度受到影響。

針對上面所說的用途,我們找到的外掛叫做「Lightbox for the Default Gallery & Image Block (Simple, Lightweight & No Lock In)」。

因為名字太長了,接下來為了方便說明,我們就簡稱為「超輕量 Lightbox」。

關於 WordPress 官方外掛頁面 – Lightbox for the Default Gallery & Image Block (Simple, Lightweight & No Lock In)

FooBox vs. 超輕量 Lightbox

為了讓大家能夠信服「超輕量 Lightbox」的簡稱實至名歸,我們來比較一下這兩個外掛的大小。

外掛檔案大小

FooBox

直接從 WordPress.org 網站下載最新版的 FooBox (v2.7.16):

  • 壓縮檔大小 – 1.08 MB
  • 解壓縮後大小 – 3.46 MB

超輕量 Lightbox

直接從 WordPress.org 網站下載最新版的外掛 (v1.8.5):

  • 壓縮檔大小 – 7.57 KB
  • 解壓縮後大小 – 18.5 KB

是的,大家沒看錯,外掛檔案的大小差了 100 多倍。FooBox 確實是包含了相當豐富的功能,但實際上卻也因為 FooBox 官方將 Freemius 付費版管理與購買的功能也直接放在外掛中,這部分對效率的影響也會直接反映在 WordPress 後台進入 FooBox 管理頁面時的操作上。

Plugin to replace FooBox_mark

頁面載入檔案大小

接著我們來看文章載入時使用到的外掛檔案大小,我們使用 Clearfy 的 Assets Manager 直接檢視頁面載入 CSS、JavaScript 檔案的內容。

FooBox

  • CSS – 28.8 KB
  • JavaScript – 98 KB

總計 126.8 KB

foobox

超輕量 Lightbox

  • CSS – 3.5 KB
  • JavaScript – 9.4 KB

總計 12.9 KB

lightweight-lightbox

相比之下,在頁面載入時足足可以省下 113 KB。對於只需要單純的圖片 Lightbox 特效的站長來說,FooBox 的體積真的是有點大。

超輕量 Lightbox

安裝外掛

首先,從 WordPress 後台 > 外掛 > 安裝外掛,搜尋「block lightbox」關鍵字。

gallery-block-lightbox

找到之後,安裝並啟用外掛。

使用方式

  1. 編輯文章時,使用 WordPress 標準的「圖片 (Image)」或「圖庫 (Gallery)」區塊插入圖片。
  2. 對文章中的圖片選擇「插入連結」,並指定連結至「媒體檔案」。
lightweight-lightbox-how-to-use

這部分的機制與 FooBox 是完全相同的。

停用、移除外掛之後「圖片」、「圖庫」區塊還是會按照 WordPress 原本的方式運作,不會有其他影響。

此外,值得一提的是這個外掛是用純 JavaScript 代碼寫的,完全不使用到 jQuery,也因此不存在與其他程式碼的相依性問題。

調整外觀 – 透過 CSS

另一個推薦的原因是外掛的開發者回覆使用者問題的速度相當快,也相當 open minded 針對一些簡單調整外觀、功能的問題都很大方的提供代碼調整的建議。

對於 CSS 的部分,大家可以直接參考開發者分享的 github 連結,清楚的了解 CSS selector 結構與名稱之後就能相當方便的修改這個外掛的外觀與顯示方式了。

安裝外掛之後,我也只有簡單的調整點擊彈出圖片為圓角顯示而已。

我們使用 Code Snippet 工具 WPCodeBox 加入下述 CSS 代碼。

#baguetteBox-overlay .full-image img {
    border-radius: 10px;
}

擴充至全站使用 – 透過 PHP

這個外掛本身的功能只針對文章中的圖片、圖庫提供 Lightbox 特效功能。如果想要在特定的小工具 widget 或全站的所有頁面上使用的話,可以參考以下方式。

將下述 PHP 代碼加到小工具中:

wp_enqueue_script( 'baguettebox' );
wp_enqueue_style( 'baguettebox-css' );

或是使用 WPCodeBox 加入下述 PHP 代碼,即可將外掛功能使用在所有頁面的圖片、圖庫上:

function my_theme_enqueue_baguettebox_assets() {
	wp_enqueue_script( 'baguettebox' );
	wp_enqueue_style( 'baguettebox-css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_baguettebox_assets' );

索取 WPCodeBox 超優惠折扣

WPCodeBox 是相當好用的 Code Snippet 外掛,對於擁有、管理多個網站的人來說,可以將常用的 PHP、CSS、SCSS、LESS、JavaScript 等程式碼上傳到雲端,並直接於網站中下載需要使用的程式碼。

此外,WPCodeBox 也提供條件編輯器功能 (Condition Builder),可以自由的指定執行代碼的條件。

WPCodeBox 提供給 Quants Note 讀者「超優惠」折扣,歡迎訂閱取得優惠碼唷

索取優惠碼

Subscriber Only!

成功訂閱電子報之後,我們後續會將 WPCodeBox 的優惠碼寄給您!

【訂閱說明】

輸入 Email 且按下訂閱電子報之後,請至電子郵箱搜尋「Quants Note 電子報訂閱確認信」,完成訂閱流程。

成功訂閱電子報之後,系統就會自動將 WPCodeBox 的優惠碼寄給您!搜尋「WPCodeBox 優惠碼」信件,優惠碼就在郵件內容中唷!

結語

有網頁載入效能考量的朋友,如果您跟我一樣只需要單純的圖片 lightbox 特效功能,可以考慮改用「Lightbox for the Default Gallery & Image Block (Simple, Lightweight & No Lock In)」外掛。

這外掛是免費、開源的,有特殊需求的人也可以自行修改為自己的版本。

如果有任何使用上的問題,也歡迎留言討論~

本文中的圖片 Lightbox 特效就是這個外掛提供的唷!

The-Plugin-With-the-Best-Video-Experience-440X231

3 則留言

  1. 您好,我已經訂閱電子報了,但是並沒有收到WPCodeBox的折扣碼,可以請您再傳給我一次嘛?謝謝

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *