如何在 WordPress 中更改預設文字選取顏色

有時，您可能希望預設的文字選取顏色能與背景色更為對比，使用戶可以清楚看到內容中被突出顯示的部分。在本文中，我們將向您展示如何在您的 WordPress 主題中更改預設文字選取顏色。

為什麼要在 WordPress 中更改預設文字選取顏色？

文字選取顏色是指在內容中突出顯示一段文字時顯示的顏色，就像這樣：

在某些情況下，您可能希望更改此顏色，因為它與您的 WordPress 網站設計不協調。配色方案在使您的網站看起來美觀並保持一致的品牌體驗方面起著重要作用。如果您運行的是 WordPress 博客，則可能也希望更改預設的文字選取顏色，以便使其更能從其他內容中脫穎而出，便於閱讀。

既然如此，讓我們看看如何在 WordPress 中更改預設文字選取顏色。您可以使用以下兩種方法：

方法 1：使用 WordPress 主題設定（簡單）

一些 WordPress 主題允許您更改字體和字體的設定，包括預設的文字選取顏色。要檢查您的主題是否提供此選項，您需要前往外觀 » 自訂。

注意：如果您正在使用區塊主題，則不會有此選項，您需要使用方法 2 來更改文字選取顏色。

在這裡，查找標記為“顏色”的任何設定。如果您看到“常規”、“全域”或類似的標籤，則通常包含主題的顏色設定。

例如，如果您使用的是熱門的 Astra WordPress 主題，則需要選擇“全域”選項卡。之後，點擊“顏色”以查看組成此 WordPress 主題的所有不同顏色。接下來，您必須點擊“強調色”。

這將打開一個顏色選擇器，您可以在其中選擇新的文字選取顏色。當您進行更改時，即時預覽將自動更新。因此，您可以嘗試不同的設置，看看哪個最適合您的 WordPress 網站。當您對更改感到滿意時，只需點擊“發布”使其生效。之後，您會在您的 WordPress 博客或網站上看到新的文字選取顏色。

即使您在 WordPress 主題自定義器中看不到任何顏色設置，也值得查看主題的文檔，看看是否有辦法更改預設的文字選取顏色。您甚至可以聯繫主題的開發者尋求幫助。更多信息，請參見我們的指南，了解如何正確請求 WordPress 支持並獲得幫助。

方法 2：使用代碼更改文字選取顏色（適用於所有主題）

如果您在主題自定義器中看不到更改文字選取顏色的方法，則另一個選項是使用 CSS 代碼。通常，您會在 WordPress 教程中看到 CSS 代碼片段，並附有將它們添加到主題的 functions.php 文件的說明。最大問題是，即便代碼片段中有一點小錯誤，也可能會使您的 WordPress 網站完全崩潰，更不用說更新 WordPress 主題後會丟失所有自定義代碼。

這時 WPCode 就派上用場了。這個代碼片段插件使您可以輕鬆地將自定義代碼添加到 WordPress，而不會造成任何錯誤或使您的網站無法訪問。首先，您需要安裝並啟用免費的 WPCode 插件。更多詳情，請參見我們的分步指南，了解如何安裝 WordPress 插件。啟用後，前往 WordPress 管理儀表板中的代碼片段 » 添加片段。

在這裡，只需將滑鼠懸停在“添加您的自定義代碼”上。當它出現時，點擊“使用片段”按鈕。首先，為自定義代碼片段輸入一個標題。這可以是幫助您稍後在 WordPress 儀表板中識別片段的任何名稱，比如“更改文字選取顏色”。之後，打開“代碼類型”下拉菜單並選擇“CSS 片段”。

然後您可以將以下 CSS 添加到代碼預覽框中：

/* 自定義 Firefox 中文字選取顏色 */
::-moz-selection {
    /* Firefox 中文字選取時的背景色 */
    background-color: #008000; /* 綠色 */
    /* Firefox 中文字選取時的文字顏色 */
    color: #fff;
}

/* 自定義其他瀏覽器的文字選取顏色 */
::selection {
    /* 其他瀏覽器中文字選取時的背景色 */
    background-color: #008000; /* 綠色 */
    /* 其他瀏覽器中文字選取時的文字顏色 */
    color: #fff;
}

注意，我們添加了兩個樣式。::moz-selection CSS 選擇器適用於 Firefox 瀏覽器，而 ::selection CSS 選擇器適用於其他流行瀏覽器，如 Google Chrome、Safari、IE9+ 和 Opera。在上面的示例中，# 的十六進制代碼將更改鏈接顏色為綠色，因此您需要將 background-color: #008000 更改為您希望用於突出顯示文本的顏色。如果您不確定使用什麼十六進制代碼，可以在 HTML 顏色代碼網站上探索不同的顏色並獲取它們的代碼。

當您對代碼的外觀感到滿意時，只需點擊“非活動”切換以顯示“活動”。然後，點擊“保存片段”使 CSS 片段生效。您現在可以訪問您的網站以看到更改效果。

這是在我們的演示網站上的效果。