如何替文章中的圖片增加陰影+圖片說明文字置中

文章最後更新於 2021 年 12 月 1 日

本篇將告知，該如何替 WordPress 網站文章中的圖片，增加陰影效果，並使圖片說明文字置中對齊。有助於提升網站整體的美觀效果。

目錄隱藏

Code Snippets 外掛介紹
使用教學
- 安裝外掛
- 複製貼上程式碼
效果預覽

Code Snippets 外掛介紹

本篇教學，將使用「Code Snippets」程式碼片段外掛來達成圖片增加陰影和說明文字置中的效果，且方便了程式碼與程式碼之間的管理，未來要修改程式碼也比較方便。

相關文章 :
【WordPress外掛】好用的程式碼片段外掛，N個實用程式碼片段範例教學

Code Snippets

使用教學

安裝外掛

不會安裝外掛的，可以點擊以下連結前往教學文章，手把手學習如何安裝外掛。

外掛安裝教學 :
https://xiaoxiang.blog/how-to-install-the-plug-in/

step 1

開啟 WordPress 後臺管理介面，前往外掛 > 安裝外掛。

step 2

使用關鍵字搜尋外掛，輸入「Code Snippets」。

step 3

找到名稱為「Code Snippets」的外掛，點選 立即安裝，並啟用該外掛。

複製貼上程式碼

step 1

外掛啟用後，點擊 程式碼片段 > 新增程式碼片段。

step 2

在標題框中輸入「文章圖片加陰影+圖片說明文字置中」，方便程式碼與程式碼之間的管理。
如下圖所示，複製貼上以下程式碼到程式碼輸入框中。

以下程式碼是本人已經設定好的圖片陰影樣式和圖片白色邊框樣式，個人感覺還不錯看。當然，如果覺得不滿意也可以自行修改，改成自己喜歡的。

程式碼 :

add_action( 'wp_head', function () { ?>
<style>
/*文章圖片加陰影*/
	.entry-content img {
    border-style: solid;
    border-color: #333333;
    border-width: 1px;
	box-shadow:3px 3px 12px gray;padding:3px;
	display:block;
	margin:auto;
}
	
/*文章圖片說明文字置中*/	
	.wp-block-image figcaption {
    text-align: center;   
}
</style>
<?php } );

畫面 :

step 3

完成後記得滑到底部，點擊「儲存設定並啟用」按鈕，儲存並啟用你的程式碼。

效果預覽

下圖為程式碼啟用後所顯示的最終效果，圖片外包著白框+帶有陰影，圖片置中+說明文字置中對齊。

0 0 選票

文章評分

如果對文章內容有任何問題，或有想讓小翔另外補充的的內容，歡迎在底下留言讓我知道。

在這裡，我想讓您知道在 小翔教你SEO 網站中，有些連結為聯盟營銷連接，這代表，當人們點擊該連結，並前往其他網站進行購買動作時，我將會從銷售中獲得少部分佣金（但不會影響你購買的價格）。

有關更詳細的聯盟連接說明，請前往聯盟計畫聲明（FTC）頁面觀看。

by 小翔

0 Shares