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

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

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

使用教學

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

step 1

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

Code Snippets 外掛 :
https://tw.wordpress.org/plugins/code-snippets/
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

選擇「詩句」。

詩句

最終樣式

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

詩句樣式
0 0 選票
文章評分

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

by 小翔

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