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

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

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

Code Snippets 外掛介紹

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

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

使用教學

安裝外掛

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

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

step 1

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

外掛 > 安裝外掛

step 2

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

搜尋外掛

step 3

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

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 選票
文章評分

如果對文章內容有任何問題,歡迎在底下留言讓我知道。
如果你喜歡我的文章,可以按分享按鈕,讓更多的人看見我的文章。
還沒訂閱部落格的朋友們,記得在右上角填入信箱,收到我最新文章的通知。

by 小翔

訂閱
通知
guest
0 評論
在線反饋
查看所有評論