【WordPress外掛】如何點圖放大文章中的圖片？Easy FancyBox完整教學

這篇主要是教大家如何在WordPress中啟用點圖放大的功能，以及介紹一個關於這個功能的外掛 — Easy FancyBox。

最近在寫一些教學的文章時，發現截圖的內容就算在文章中放到最大還是難不太清楚，所以就想到WordPress應該會有點圖放大的相關外掛，首先來說說該怎麼啟用這個功能吧！

Table of Contents

1. 啟用主題內建的點圖放大

不喜歡外掛？沒關係，WordPress本身就有內建這個功能了(我摸了3個小時才發現…)，平常寫文章的時候我只有在文字中會加超連結，昨天赫然發現原來只要啟用圖片中的超連結就可以有主題內建的點圖放大功能了！

但每個佈景主題點圖放大的樣式也會有些微的差異，例如：

1.1 【主題範例】Twenty Nineteen主題點圖放大的樣式

Twenty Nineteen是WordPress中最陽春的主題之一，這個主題點圖放大的樣式就很陽春，啟用點圖放大的功能後，點擊文章中的圖片會另外開一個分頁顯示全螢幕的圖片，完整圖片之外的頁面會呈現全黑色，沒什麼美感跟調整空間。

1.2 【主題範例】OceanWP主題點圖放大的樣式

OceanWP是WordPress中最熱門的佈景主題之一，我的部落格也是用OceanWP，後來發現也有內建點圖放大的功能，而且樣式稍微美觀一點，而且樣式稍微美觀一點，點擊文章圖片後會直接在文章頁面彈出一個全螢幕的圖片，圖片外則是半透明的樣式。

以上是隨意兩個佈景主題的點圖放大範例，樣式的部分彈性比較少，就算是相較其他主題較有彈性的OceanWP，我也查不到有可以調整點圖放大樣式的地方。

由於佈景主題的限制，我最後選擇了安裝外掛，篩選了幾個之後我覺得Easy FancyBox是個不錯的選擇，接下來就來教學一下Easy FancyBox這個外掛吧！

2. 點圖放大的外掛 — Easy FancyBox

2.1【外掛範例】Easy FancyBox點圖放大的樣式

首先來看看Easy FancyBox的預設樣式吧！個人覺得比佈景主題美觀多了，不僅有圖片外框凸顯圖片，還有陰影讓整個圖片感覺更立體，右上角的退出鍵也顯眼多了！

2.2 Easy FancyBox完整教學

在安裝外掛前要先提醒大家一件事，有些佈景主題的點圖放大功能會和外掛重覆，也就是說當你安裝外掛並啟用後，當點選文章圖片時會一次彈出2個視窗，一個是外掛的，另一個是佈景主題的，所以如果有發生這種現象的話要記得把佈景主題的點圖放大功能給關掉(ex: 我的OceanWP要去Theme Panel => Scripts & Styles => 把Lightbox取消勾選，每個佈景主題設定可能不同)。

Step 1

安裝Easy FancyBox外掛並直接啟用

Step 2

到外掛頁面的Easy FancyBox部份點選設定

Step 3

圖片尺寸設定

這部分是設定在文章新增圖片時，把圖片從你的電腦上傳到網站媒體褲時的尺寸設定，但這也可以新增圖片後在右邊區塊的部分編輯，所以可以略過。

Step 4

Overlay設定：圖片外的輪廓設定

也就是下圖中紅色框外部的樣式設定，預設樣式為顏色：#777777，透明度：0.7 (0為完全透明，1為完全不透明)。

如果想即時預覽樣式的話，可以先擬個文章草稿，隨便新增一張圖片並開啟點圖放大功能，預覽文章後點擊該圖變成上圖的頁面後，將滑鼠移到圖片外圍，按右鍵，檢查：

紅色框框部分就是外圍的背景顏色(background-color)以及透明度(opacity)

點下灰色框框後可以直接選擇顏色，瀏覽器會即時預覽：

透過預覽選定好你想要的背景顏色和透明度後，再把值填到外掛設定的頁面就大功告成了！

Step 5

設定圖片的margin大小

如果你不希望圖片直接站滿全螢幕，可以在下方設定margin大小：

預設值為40，最大值為80，設定為80後可以看到margin明顯變大：

Step 6

設定圖片邊界(border)樣式，預設為白色

例如：我將顏色調整為#ff0000，圖片的邊界顏色就會改變為紅色：

Step 7

選擇是否要顯示標題，這邊要注意的是標題的顯示內容為圖片設定中的替代文字，不是圖片正下方的說明哦！

如果要顯示的話請將以下2個選項都打勾：

標題的顯示方式有4種：

(1) Float

(2) Outside

(3) Inside

(4) Overlay

Step 8

調整標題字體顏色

Step 9

調整彈出動畫與退出動畫

免費版本只有淡入和彈出兩種動畫，大家可以試看看比較喜歡哪種！

3. 結論

以上就是Easy FancyBox的完整教學啦！根據上面的步驟大家可以客製化出適合自己的點圖放大樣式，如果希望有更多樣式可以調整，就要購買付費版了，但我個人認為免費版就滿夠用了哈哈，希望這篇教學文對你有幫助！

延伸閱讀：
如何用 WordPress 架設網站 (1)：前置作業 ⏤ 購買網域與主機
如何用 WordPress 架設網站 (2)：Cloudways 教學
如何用 WordPress 架設網站 (3)：namecheap 教學與 Cloudflare 教學

如果覺得我的文章有幫助的話，歡迎幫我的粉專按讚哦~謝謝你！