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

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

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

Code Snippets 外掛介紹

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

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

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

使用教學

安裝外掛

step 1

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

外掛 > 安裝外掛

step 2

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

搜尋 Code Snippets

step 3

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

啟用 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

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

儲存設定並啟用
0 0 選票
文章評分

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

by 小翔

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