說到 WordPress 圖片燈箱功能,大部分玩家的反應可能是使用 Easy FancyBox、Simple Lightbox 之類的外掛,但這個功能其實在在官方的 Jetpack 外掛中早已內建,讓我們來介紹一下他。
至於為何我要使用圖片燈箱呢?因為有些圖片在文章中因為排版的關係,會被塞成小尺寸的圖片,以訪客的角度來說不好檢視。而圖片燈箱就能讓瀏覽者輕鬆的檢視大圖。
Jetpack 外掛資訊
- 官方網站:https://jetpack.com
- 下載網址:WordPress 外掛
使用說明
進入 WordPress 控制台,切換到 Jetpack 的 設定,將 撰寫 分頁中的 再全螢幕隨選區圖庫中顯示圖片 選項開啟。
子選項是給攝影作品用的 EXIF 資訊顯示,而 隨選顏色配置 可依個人喜好選擇。
接下來就是要開始將每張圖片的連結目標調整為 附件檔案。
只不過我自己遇到了些問題,少部分圖片總是無法順利的開啟燈箱。所以我轉了個彎來治好它。
將圖片直接切換為 圖庫 模式,再將連結目標改為 附件頁面 即解決問題。
另外右側設定中的 裁切圖片 會讓你的圖片與父元素同寬,如果小圖被自動放大後模糊太嚴重可以手動關閉,大圖則沒差。
燈箱效果預覽:
以上就是 Jetpack 的燈箱開啟流程,那接下來我們要來修正一下它的功能。
功能修正
一般來說為了防止網站的頁面權重被無意義的網頁分散掉,我們會搭配 Clearfy、YoastSEO 等外掛來將附件頁面重新導向回文章或首頁,自然也不會使用到附件留言版。但是我們在上面的預覽圖中看到了留言版的存在,所以必須將它修正掉。
在佈景主題的 function.php 或使用 Code Snippets 外掛,加入以下代碼即可關閉附件網頁的留言功能。
function filter_media_comment_status( $open, $post_id ) { $post = get_post( $post_id ); if( $post->post_type == 'attachment' ) { return false; } return $open; } add_filter( 'comments_open', 'filter_media_comment_status', 10 , 2 );