不曉得什麼原因，在我試裝了最熱門的幾款FancyBox插件都無效後，我決定自己將FancyBox效果加進我的WP裡。實際上這並不難，畢竟FancyBox都提供了js和css還很細心的附上了使用方法(x)。所以今天就來分享一下我是怎麼將FancyBox效果套用到我的WP。
FancyBox是什麼？
FancyBox 是一個燈箱腳本，以優雅的方式展示圖片，視頻和一些 html 內容。支持觸屏，響應式和自定義高度。在我寫這篇文章的時候最新版本為3.5.7，依賴 jQuery 3+，但FancyBox仍可與jQuery 1.9.1+和jQuery 2+一起使用。
這篇文章我將說明WordPress如何不安裝插件套用FancyBox燈箱效果，如果你不想自己折騰，倒是可以參考這兩款插件：
引入檔案
首先，有兩種方式使用FancyBox提供的js與css，一種是在官網下載然後上傳到你的網站，另一種是使用CDN，我的話比較習慣用CDN。
官網下載
到FancyBox3的官網按Download，將下載下來的壓縮檔解壓。
壓縮後會看見 dist、docs、src 三個資料夾，將dist裡的jquery.fancybox.min.js、jquery.fancybox.min.css 上傳到你的網站任意處 (ex: 根目錄/js 底下)
然後在主題的 header.php 裡頭加上下方代碼：
<link rel="stylesheet" href="js/jquery.fancybox.min.css" /> <script src="js/jquery.fancybox.min.js"></script>
注：記得將調用的地址改成你的檔案位置，否則會無法使用。
CDN
FancyBox官網的Quick start有附上CDN的調用方法：
<!--調用jquery.min.js--> <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script> <!--調用FancyBox--> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" /> <script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
注意
1. 可以不用加上調用 jquery.min.js 的代碼，我相信90%的網站主題已經都調用過，若你最後使用不了再加上就好。
2. 不要同時包含fancybox.js和fancybox.min.js文件。
3. 如果直接在瀏覽器中打開本地文件時，某些功能（ajax，iframe等）將無法使用，該代碼必須在Web服務器上運行。
然後同樣地，將這串代碼貼到主題的 header.php 裡。
打個岔，我通常不會在主題編輯器裡頭直接貼代碼，我會用 LuckyWP Scripts Control 這個插件。
使用教程
套用FancyBox燈箱效果的圖片需要添加一個指向自己的連結並且加上data-fancybox的標籤，像是：
<a href="a.jpg" data-fancybox> <img src="a.jpg"/> </a>
Fancybox會抓 a 標籤內對應的標籤去判定是否要套用燈箱效果，而一般的主題沒有提供這種方法(除非主題就自帶Fancybox燈箱)，所以我們需要加上functions來讓網站中的圖片都套用相應的標籤(data-fancybox)。
添加自定義函數
這個步驟就是要將網站中的圖片連結a標籤都加上 data-fancybox 屬性，圖片插入的時候默認是不帶有這個屬性，所以我們需要透過functions來達成。
將下方這串代碼貼到主題的 functions.php：
add_filter('the_content', 'fancybox');
function fancybox($content){
$pattern = array("/<img(.*?)src=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>/i","/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>(.*?)<\/a>/i");
$replacement = array('<a$1href=$2$3.$4$5 data-fancybox="gallery"><img$1src=$2$3.$4$5$6></a>','<a$1href=$2$3.$4$5 data-fancybox="images"$6>$7</a>');
$content = preg_replace($pattern, $replacement, $content);
return $content;
}
注：記得要貼在<?php 這裡 ?>，否則會出錯。
這段代碼會自動將你網站中的圖片連結加上 data-fancybox=”images” 標籤，如果你不這麼做，你必須手動在圖片上加上這個標籤才能激活FancyBox的燈箱效果。
基本上做到這你的燈箱效果已經實現了。
如果你希望其他媒體也要套用燈箱效果，你可以參照上面的 functions 修改一下就行。
- React 那些好看、有趣、實用的函式庫、組件庫推薦(2) - 2022 年 6 月 26 日
- 解決 preact 資源請求路徑錯誤的問題 - 2022 年 6 月 24 日
- [楓之谷私服] 潮流轉蛋機 NPC 腳本優化 - 2022 年 6 月 19 日
