如何更改WordPress詩句樣式，並一鍵套用到整個網站?

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

本篇文章，將會教你該如何使用程式碼片段外掛，更改整個 WordPress 網站的詩句樣式。包括更改詩句背景顏色、邊框顏色+粗細、填充寬度等等，省卻了過往想自訂詩句樣式，還必須在文章編輯器中一個詩句一個詩句更改的麻煩。

使用教學

為了方便代碼的管理，本人是使用了程式碼片段外掛來更改樣式，這樣未來如果想要修改代碼會比較方便快速。

step 1

首先，前往 外掛 > 安裝外掛，搜尋「Code Snippets」，如下圖所示，找到名稱為 Code Snippets 的外掛，立即安裝並啟用該外掛。

Code Snippets 外掛 :
https://tw.wordpress.org/plugins/code-snippets/

step 2

外掛啟用後，網站後台的左半邊會多出 程式碼片段 這個選項，點擊 程式碼片段 中的「新增程式碼片段」。

step 3

複製以下的程式碼。如下圖所示，在 程式碼輸入框 中貼上該程式碼，並更改程式碼名稱為「更改整個網站詩句樣式」，方便程式碼與程式碼之間的管理，也方便快速找到並修改該程式碼。

程式碼 :

/*
如何更改WordPress詩句樣式?
https://xiaoxiang.blog/verse-style
*/
add_action( 'wp_head', function () { ?>
<style>

	pre.wp-block-verse {
		background: #f7f8f9;
		/*詩句背景顏色*/
		padding: 1em;
		/*詩句填充寬度*/
		border:1.6px solid #eaeaea
		/*詩句邊框粗細、顏色*/	
	}

</style>
<?php } );

畫面 :

step 4

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

如何使用詩句?

step 1

前往 文章 > 新增文章。

step 2

點擊「新增區塊」選項。

step 3

選擇「詩句」。

最終樣式

以下為程式碼啟用後網站中 詩句 會顯示出來的最終樣式，你也可以自行更改程式碼來自行改變詩句的樣式 :

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

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

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

by 小翔