.st0{fill:#FFFFFF;}

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 讀者「超優惠」折扣,歡迎訂閱取得優惠碼唷

【上鎖內容說明】
初次訂閱:
輸入 Email 且按下訂閱電子報之後,請至電子郵箱搜尋「Quants Note 電子報訂閱確認信」,完成訂閱流程;接著搜尋「WPCodeBox 專屬優惠碼索取」信件,優惠碼就在郵件內容中唷!

老訂閱戶:
輸入 Email 且按下訂閱電子報之後,請直接前往電子郵箱搜尋「WPCodeBox 專屬優惠碼索取」信件,收取優惠碼內容!

結語

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

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

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

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

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>