首頁  >  文章  >  CMS教程  >  WordPress 字體顏色修改指南

WordPress 字體顏色修改指南

王林
王林原創
2023-09-03 12:05:011531瀏覽

您可以輕鬆地為一小部分文字或一個區塊更改 WordPress 網站中的字體顏色。或者,您可以變更整個網站中特定元素或 CSS 類別的顏色。

#在這個快速教學中,我將向您展示如何快速變更 WordPress 網站中的字體顏色。

我將向您展示兩種方法:

  • 更改單一區塊的字體顏色。
  • 將 CSS 類別新增到色塊,然後設定該類別的樣式。

我也會向您概述如何使用樣式表更改整個網站的字體顏色。

如果您想了解如何為 WordPress 添加全新字體或如何更改 WordPress 中的字體大小,您也可以在此處了解具體操作方法。

如何更改文字部分的字體顏色

您可以選擇將貼文或頁面中的一部分文字或整個文字區塊設定為與其他貼文或頁面不同的顏色。您可以使用它來突出顯示某些文字並使其脫穎而出,或增強網站的設計。

警告:太多的顏色會讓您的網站看起來混亂且不專業。確保使用不衝突的顏色。

首先找到要更改顏色的文字部分。

WordPress 字体颜色修改指南

雙擊選擇要變更顏色的文字。點擊該區塊上方的箭頭圖示並選擇文字顏色

WordPress 字体颜色修改指南

選擇您希望文字具有的顏色。編輯畫面中的顏色將會為您改變。

WordPress 字体颜色修改指南

或者,您可以使用十六進位程式碼來選擇特定顏色。如果您想使用網站其他地方使用的顏色,這是一個好主意。

點擊自訂顏色鏈接,然後從選擇器中選擇顏色或輸入十六進位代碼。

WordPress 字体颜色修改指南

對要變更顏色的任何其他文字區塊或文字部分重複此操作。您不必更改整個區塊的顏色 - 如果需要,您可以只更改一個單字。

最後,點擊更新來更新您的帖子,或點擊發布來發布它。這將保存您的更改。

現在你的文字將是你給它的任何顏色:

WordPress 字体颜色修改指南

如何使用 CSS 類別來變更字體顏色

如果您想更改一堆文字區塊,使它們全部具有相同的顏色,最好的方法是使用 CSS 類別。這樣,您就知道它們都是相同的顏色,您不必記住您使用的顏色。

再次找到您的文字區塊,然後在區塊窗格中開啟進階標籤。

其他 CSS 類別欄位中,輸入 CSS 類別。我將使用 highlight-color。我故意不命名顏色,以防我稍後決定更改它。

WordPress 字体颜色修改指南

現在點擊更新發布儲存您的貼文。

您現在有兩個選項可以使用該類別編輯區塊的顏色:

  • 在定制器中加入樣式
  • 將樣式加入主題的樣式表

在定制器中設定類別的樣式是最簡單的方法,並且在更新主題時不會給您帶來任何問題。

前往 WordPress 管理員中的外觀 > 自訂,然後按一下其他 CSS

WordPress 字体颜色修改指南

其他 CSS 窗格中,輸入 CSS 以變更字體顏色: p>

.highlight-color {
 color: #e76d16;
}

使用十六進位代碼將該程式碼中的顏色變更為您想要使用的任何顏色。最好使用主題中其他地方使用的顏色,或使用與主題相符的顏色,同時使文字脫穎而出。

WordPress 字体颜色修改指南

點擊發布按鈕儲存您的變更。

現在轉到您的即時網站中的帖子,您將看到帶有 highlight-color 類別的區塊的顏色與其周圍的文字顏色不同:

WordPress 字体颜色修改指南

現在您可以將此類用於您想要設定該顏色的任何區塊。

更改主題樣式表中的字體顏色

透過我向您展示的兩種方法,您無需編輯主題中的文件或對 CSS 有深入的了解。它們為您提供了一種快速更改 WordPress 字體顏色的方法。

但是,如果您想要編輯網站中現有元素的顏色(例如所有段落或連結),或者想要在樣式表而不是定制器中添加 CSS,則需要編輯主題的樣式表.

您可以在我們的向 WordPress 網站添加自訂 CSS 的指南中找到有關編輯樣式表的更多資訊。如果您想更深入地了解,這是一個很好的起點。

結論

更改 WordPress 網站中文字的字體顏色只需幾分鐘即可完成。您可以直接編輯字體顏色,也可以給它一個類,然後為您的類別編寫 CSS。

但是無論您選擇這樣做,都不要做得太過分。並確保您使用的顏色能夠很好地配合,以避免網站看起來凌亂和不專業。

使用專業的 WordPress 主題讓您的網站脫穎而出

您正在設計一個新的 WordPress 網站嗎?我們專業設計的 WordPress 主題集合可以在幾分鐘內為您的網站帶來美麗的新外觀和感覺。

WordPress 字体颜色修改指南

以下是 ThemeForest 2020 年推出的一些最暢銷和新興的 WordPress 主題。 p>

#

以上是WordPress 字體顏色修改指南的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn