如何更改小工具標題樣式? 3種程式碼樣式一鍵套用

WordPress 的小工具可以放上一些，如 : 廣告看板、聯盟廣告、最新文章、電郵收集.. 等等的幫助網站的實用功能，對於網站的轉化、變現有很大的幫助。 其中，小工具的標題就是襯托這些功能的好用迷紅燈，好看吸睛的小工具標題，對於吸引目光有非常大的幫助。

所以，本文將教你如何利用程式碼片段，修改網站小工具的標題樣式，並為你提供 3 種標題樣式一鍵套用。

Code Snippets 外掛介紹

本篇教學，將使用「Code Snippets」程式碼片段外掛來更改小工具標題樣式，使用該外掛，也方便了程式碼與程式碼之間的管理，未來要修改程式碼也比較方便。

因為 WordPress 有許多豐富的外掛可供下載使用，豐富了我們的網站，但外掛一旦下載太多，可能會造成網站效能不佳，速度太慢等問題。

而 Code Snippets 是一個輕便、易用，且專為在網站上執行 PHP 程式碼片段所設計的解決方案。 使用 Code Snippets 外掛後，便不再需要為了網站功能去下載外掛，只需新增一個程式碼片段，輸入程式碼，即可為網站增加所需要的功能，且不會占用太多網站空間，從而降低網站速度。

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

使用教學

安裝外掛

step 1

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

• 相關文章 : 【WordPress教學】手把手教你如何安裝外掛

step 2

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

step 3

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

外掛設定教學

step 1

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

step 2

• 在標題框中輸入「小工具標題樣式修改」，方便程式碼與程式碼之間的管理。
• 複製貼上以下程式碼到程式碼輸入框中 (以下有 3 種程式碼樣式，你可以選擇你最喜歡的樣式來複製貼上)。

程式碼【一】 :

h2.widget-title {


        /* 小工具標題字體 */
	font-family: Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif;
	/* 小工具標題大小 */
	font-size: 20px;
	/* 小工具標題顏色 */
	color: #333;


	/* 設定下方邊框線條樣式 粗細 線條樣式 顏色 */
	border-bottom: 2px solid #E8E8E8;


	}

標題樣式預覽【一】 :

程式碼【二】 :

h2.widget-title {

	/* 小工具標題字體 */
	font-family: Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif;
	/* 小工具標題大小 */
	font-size: 20px;
	/* 小工具標題顏色 */
	color: #333;	
	
	border-left: 5px solid #001F3F;
        background-color: #F1F1F1;
	/* 與上方小工具的外部間距 */
	margin-top: 0rem;
	/* 與下方小工具的外部間距 */
	margin-bottom: 0.5rem;
	/* 區域內部間距 上 右 下 左 */
	padding: 0 0 0rem 0;
	/* 段落行高 沒寫單位就是直接以這個區域裡設定的字體大小乘上數字位數 */
	line-height: 1.6;
	padding-left: 10px;
        padding-top: 2px;
        padding-bottom: 2px;
        line-height: 1.7em;
        color: #001F3F;
        font-weight: bold;

	}

標題樣式預覽【二】 :

程式碼【三】 :

h2.widget-title {

	/* 小工具標題字體 */
	font-family: Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif;
	/* 小工具標題大小 */
	font-size: 16px;
	/* 小工具標題顏色 */
	color: #fff;

	background: #444444;
	/* 與上方小工具的外部間距 */
	margin-top: 0rem;
	/* 與下方小工具的外部間距 */
	margin-bottom: 0.5rem;
	/* 區域內部間距 */
	padding: 7px 13px;
	
        font-weight: bold;
	text-align: center;
	border: 5;
	text-transform: none;
        letter-spacing: 0;
	
	}

標題樣式預覽【三】 :

畫面 :

step 3

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

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

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

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

by 小翔