Last Updated on 2021-10-18 by Clay
在 WordPress 所搭建的網站當中,若要讓讀者能夠點擊文章中的圖片並放大,是可以直接設定讓圖片『鏈結到媒體檔案』的。不過這個方法會讓讀者在打開圖片時跳轉到另外一個頁面,老實說不是很方便。
若是想要達成『彈出圖片』並隨時可以取消回到文章,則可以透過不同的外掛來做到。不過不知道是否因為我的主題 Neve 與外掛衝突,很多的圖片放大外掛在我的網站上是無效的,測試了很多外掛,最終才發現 WP Featherlight 這個外掛是可行的。
若是使用 WordPress 搭建的網站無法順利使用圖片放大外掛,則推薦嘗試看看 WP Featherlight。
WordPress 內建點擊圖片放大效果
首先我先簡單紀錄在 WordPress 中如何做到這一點。這是 WordPress 本身就有的功能,不過我一直到使用了 WordPress 快要兩年才發現這個功能。
假設下方是我在 WordPress 文章編輯器中插入的一張圖片,我們可以看到上方有一排工具列。

緊接著我們點擊『連結』符號,並選擇『媒體檔案』,這下子我們就可以在文章中點擊圖片並放大了。


不過就如同上述,在文章中點擊圖片是跳出另外一個畫面,讀者需要回到上一頁才能回到文章本身,有點不方便。
為了解決這樣的問題,我們需要使用外掛來輔助圖片放大的效果。
使用 WP Featherlight
首先前往後台,下載 WP Featherlight,並且啟用。

接著文章中所有連結到媒體檔案的圖片(是的,我們還必須將其連結到媒體檔案),全都可以只是跳出放大,點擊圖片外的暗色區域就可回到文章了。

雖然右上角有個叉叉在,但是其實點擊圖片外的區域就可以跳出了。
References
- https://wordpress.org/plugins/wp-featherlight/
- http://seehowsupport.com/wordpress/content-editor/click-to-enlarge-images-in-wordpress/
- https://wpdaddy.com/how-to-enlarge-images-when-clicked-in-wordpress-posts/