如何在WordPress中更改文本顏色(3種簡單方法)


最近,我們的一位讀者問是否有一種簡單的方法可以更改WordPress中的文本顏色?

答案是肯定的。 您可以在整個網站上的WordPress中輕鬆更改字體顏色,甚至僅更改帖子內容中的單個單詞即可。

在本指南中,我們將逐步向您展示如何輕鬆地在WordPress中更改文本顏色。

在WordPress中輕鬆更改文本顏色

有許多原因可能導致您想要更改帖子或頁面中的文字顏色。 也許您想強調一個關鍵字,或者您想在特定頁面上使用彩色的子標題。

或者,您可能想要更改整個網站的文本顏色。 也許您的主題使用灰色作為文本,但是您寧願將其設置為黑色,也可以將其設置為深灰色,以提高可讀性。

在本教程中,我們將介紹以下方法:

只需單擊其中一個鏈接即可直接跳至該方法。

影片教學

訂閱WPBeginner

如果您喜歡書面說明,請繼續閱讀。

方法1.使用可視編輯器更改文本顏色

您可以使用默認的WordPress編輯器以與主文本不同的顏色來放置單詞,段落甚至子標題。

WordPress頁面中的彩色文本示例

這是使用塊編輯器更改文本顏色的方法。

首先,您需要編輯要更改的帖子或頁面,或創建一個新帖子。

接下來,輸入您的文字。 您需要根據需要創建一個段落塊或標題塊。 為了獲得幫助,請看一下我們有關如何使用WordPress塊編輯器的教程。

文本到位後,即可更改顏色。

更改塊的文本顏色

對於第一個示例,我們將更改整個塊的文本顏色。

只需單擊該塊,“塊設置”面板就會在屏幕的右側打開。 接下來,單擊“顏色設置”的箭頭以展開該標籤。 您將在此處看到文本顏色設置。

在WordPress中為整個塊選擇文本顏色

現在,您可以為文本選擇新的顏色。 可視編輯器將根據您的主題向您顯示一些選項。 您只需單擊其中之一即可更改文本顏色。

另外,如果您要記住特定的顏色,請單擊“自定義顏色”鏈接。 這將打開一個顏色選擇器,您可以在其中手動選擇顏色。 您也可以使用它輸入十六進制代碼。

為塊選擇自定義文本顏色

如果您改變主意並想返回默認的文本顏色,只需單擊顏色選項下面的“清除”按鈕即可:

將塊設置回默認文本顏色

專家提示: 如果要更改塊的背景顏色,也可以在此處進行。

更改單詞或短語的文本顏色

如果您只想更改一個或兩個單詞的顏色怎麼辦? 使用塊編輯器也很容易。

首先,您需要突出顯示要更改的單詞。 然後,單擊內容編輯器工具欄上的向下的小箭頭。

突出顯示要更改顏色的單詞

接下來,只需單擊下拉列表底部的“文本顏色”鏈接:

點擊下拉列表底部的“文本顏色”鏈接

現在,您將看到與整個塊相同的顏色選項。 同樣,您可以從默認選項之一中進行選擇,也可以使用“自定義顏色”鏈接選擇所需的任何顏色。

選擇突出顯示的單詞的文本顏色

顏色選項不僅限於段落塊。 您還可以更改標題欄的文本顏色。 與段落塊一樣,您可以在塊設置中為整個塊設置文本顏色。 或者,您可以突出顯示各個單詞並更改其顏色。

在WordPress中更改標題欄的文本顏色

注意: 您不能為標題欄設置背景顏色。

您也可以更改列表塊中的文本顏色,但只能突出顯示單詞並使用工具欄。 塊設置中沒有選項可以更改整個列表塊的文本顏色。

使用經典編輯器更改字體顏色

如果您仍在使用經典的WordPress編輯器,則可以使用工具欄更改字體顏色。

在經典編輯器中,單擊最右邊的工具欄切換。 然後,您將看到第二行圖標:

單擊工具欄切換按鈕以查看第二行圖標

現在,您可以選擇文本並使用字體顏色下拉菜單更改字體顏色。

使用經典編輯器中的文本顏色按鈕

方法2.在主題定制器中更改文本顏色

如果要在整個網站上更改文字顏色怎麼辦? 許多最好的WordPress主題將允許您使用主題定制器來做到這一點。

在此示例中,我們使用了OceanWP主題。 這是可用於WordPress的頂級免費主題之一。

在WordPress資訊主頁中,前往 外觀»定制 打開主題定制器。

轉到外觀,然後在WordPress儀表板中自定義

接下來,您需要尋找“印刷術”之類的選項。 可用的選項以及它們的名稱會根據您的主題而有所不同。

在主題定制器中選擇“版式”或類似選項

讓我們繼續,然後單擊“版式”選項卡或等效選項。 接下來,尋找一種設置,您可以在其中更改帖子和頁面的文本。 在OceanWP中,這稱為“正文”文本。 您需要單擊此按鈕,以便自定義字體顏色等。

選擇要在定制器中修改的正文文本

單擊“字體顏色”選擇器時,您將看到一個顏色選擇器。 選擇要用於文本的任何顏色。 這將更改 所有 您的帖子和頁面。

使用主題定制器為正文選擇顏色

您還可以通過使用選項來更改H1,H2等,以類似的方式更改標題顏色。

對更改感到滿意後,請點擊屏幕頂部的“發布”按鈕。

將您的更改發佈到您的網站

小費: 通常,最好在白色或淺色背景上選擇黑色或深灰色文本,以提高可讀性。

方法3。使用CSS代碼更改文本顏色

如果您的主題無法選擇更改文本顏色怎麼辦?

您仍然可以使用主題定制器在整個網站上更改字體顏色。 去 外觀»定制器 在WordPress儀表板中。

在選項列表的底部,您會看到一個標籤為“其他CSS”的標籤。

打開主題定制器的“其他CSS”部分

接下來,單擊“其他CSS”選項卡,您將看到一些說明以及一個可以輸入CSS代碼的框。

對於初學者,您可以將此代碼複製到框中。 之後,您可以將6個數字更改為所選顏色的十六進制代碼。

p { color:#990000; }

輸入用於將段落顏色更改為主題定制器的CSS

這會將您所有帖子和頁面中常規文本的字體顏色更改為深紅色(或您選擇的任何顏色),如下所示:

使用CSS代碼在全站範圍內自定義文字顏色

如果要更改帖子中標題的顏色,可以添加以下代碼:

h2 { color:#990000; }

同樣,將十六進制代碼更改為所需的任何顏色。

如果您不熟悉CSS,或者想要一個對初學者友好的CSS編輯器,使您可以輕鬆自定義網站的整個樣式,那麼我們建議您使用CSS Hero。 它是一個功能強大的可視化編輯器,可讓您自定義整個網站的樣式。

CSS Hero插件

我們希望本教程可以幫助您學習如何在WordPress中更改文本顏色。 您可能還喜歡我們的教程,內容涉及如何在WordPress中更改字體大小以及如何在WordPress中添加自定義字體。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。