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

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

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

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

針對上面所說的用途，我們找到的外掛叫做「Lightbox for Gallery & Image Block」。

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

外掛的 WordPress 說明頁面 – Lightbox for Gallery & Image Block。

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 管理頁面時的操作上。

頁面載入檔案大小

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

FooBox

• CSS – 28.8 KB
• JavaScript – 98 KB

總計 126.8 KB

超輕量 Lightbox

• CSS – 3.5 KB
• JavaScript – 9.4 KB

總計 12.9 KB

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

超輕量 Lightbox

安裝外掛

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

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

使用方式

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

這部分的機制與 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' );

結語

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

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

如果有任何使用上的問題，也歡迎加入臉書社團或 DC 社團一起討論~

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