【WordPress】不使用插件就套用FancyBox圖片燈箱效果

  不曉得什麼原因,在我試裝了最熱門的幾款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,將下載下來的壓縮檔解壓。

KmShurF 【WordPress】不使用插件就套用FancyBox圖片燈箱效果

壓縮後會看見 dist、docs、src 三個資料夾,將dist裡的jquery.fancybox.min.js、jquery.fancybox.min.css 上傳到你的網站任意處 (ex: 根目錄/js 底下)

DHkYake 【WordPress】不使用插件就套用FancyBox圖片燈箱效果

然後在主題的 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 裡。

hBmbbps 【WordPress】不使用插件就套用FancyBox圖片燈箱效果

打個岔,我通常不會在主題編輯器裡頭直接貼代碼,我會用 LuckyWP Scripts Control 這個插件。

Url4bHm 【WordPress】不使用插件就套用FancyBox圖片燈箱效果

使用教程

  套用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;
}
VEgOodR 【WordPress】不使用插件就套用FancyBox圖片燈箱效果

注:記得要貼在<?php 這裡 ?>,否則會出錯。

  這段代碼會自動將你網站中的圖片連結加上 data-fancybox=”images” 標籤,如果你不這麼做,你必須手動在圖片上加上這個標籤才能激活FancyBox的燈箱效果。

基本上做到這你的燈箱效果已經實現了。

20200404143735 【WordPress】不使用插件就套用FancyBox圖片燈箱效果

如果你希望其他媒體也要套用燈箱效果,你可以參照上面的 functions 修改一下就行。

0 0 評分數
Article Rating
訂閱
通知
guest

0 Comments
在線反饋
查看所有評論