如何在 WordPress 中突出顯示文本(初學者指南)

12/22/2022

突出顯示文本可以幫助將用戶的注意力集中到您內容的某一部分。這對於展示行動號召、特別優惠或僅僅是加強某些句子非常有幫助。

在此文章中,我們將向您展示如何在 WordPress 的帖子或頁面中輕鬆地突出顯示文本。

為什麼以及何時在 WordPress 中突出顯示文本

文本突出顯示是一種強調內容中重要信息的簡單方法。它引導用戶關注您不希望他們錯過的細節。例如,在您的 WordPress 網站上不同顏色地突出顯示折扣優惠會吸引讀者的注意,幫助您增加銷售量。

不同顏色的文本突出顯示還可以幫助具有視覺障礙或閱讀困難的用戶更容易地導航和理解內容。它甚至可以提升您的內容的外觀,使其更具視覺吸引力。然而,突出顯示太多的文本會分散注意力並降低其效果。因此,我們建議僅突出顯示重要信息,例如行動號召、警告和讀者應該注意的其他細節。

接下來,我們來看看如何在 WordPress 中輕鬆地突出顯示文本。您可以使用以下快速連結跳轉到您想要使用的方法:

方法 1:使用區塊編輯器在 WordPress 中突出顯示文本

如果您想用區塊編輯器(Gutenberg)輕鬆突出顯示文本,這是適合您的方法。首先,您需要從 WordPress 管理側邊欄中打開一個現有或者新的帖子。

進入編輯器後,選擇您想要突出顯示的文本,然後單擊區塊工具欄頂部的“更多”圖標。這將打開一個下拉菜單,您需要從列表中選擇“突出顯示”選項。

屏幕上將會打開一個顏色選擇工具。從這裡,您首先需要切換到“背景”標籤。然後,您可以從給定的選項中選擇一種預設的突出顯示顏色。您還可以單擊“自定義”選項來啟動“滴管”工具,選擇自定義顏色來突出顯示文本。

最後,別忘了單擊“發布”或“更新”按鈕來保存您的更改。現在,您可以訪問您的 WordPress 博客來查看實際效果。

方法 2:使用 WPCode 在 WordPress 中突出顯示文本(推薦)

如果您打算在整個 WordPress 網站中使用特定顏色來一致地突出顯示文本,那麼這種方法適合您。您可以通過在主題文件中添加 CSS 代碼來輕鬆地在 WordPress 中突出顯示文本。然而,輸入代碼時的最小錯誤可能會破壞您的網站,使其無法訪問。

這就是為什麼我們推薦使用 WPCode,這是市場上最好的 WordPress 代碼片段插件。它是將代碼添加到網站中最簡單和最安全的方式,無需直接編輯主題文件。

使用 WPCode 創建代碼片段

首先,您需要安裝並啟用 WPCode 插件。更多說明,請參見我們的初學者指南:如何安裝 WordPress 插件。注意:WPCode 也有免費計劃可供本教程使用。但升級到付費計劃將解鎖更多功能,如代碼片段的雲庫、智能條件邏輯等。

啟用後,從 WordPress 管理側邊欄轉到代碼片段 » + 添加片段頁面。然後僅需在“添加您的自定義代碼(新片段)”選項下單擊“使用片段”按鈕。

這將帶您前往“創建自定義片段”頁面,首先輸入您的代碼片段名稱。然後從右上角的“代碼類型”下拉菜單中選擇“CSS 片段”選項。

接下來,將以下代碼複製並粘貼到“代碼預覽”框中:

mark {
 background-color: #ffd4a1;
}

然後,在代碼的 background-color 行旁輸入您首選的突出顯示顏色的十六進制代碼。在我們的示例中,我們使用的是 #ffd4a1,這是一種淺棕色。

接下來,向下滾動到“插入”部分。從這裡,選擇“自動插入”方法來執行代碼。

然後,前往頁面頂部,將“未激活”開關切換為“激活”。最後,單擊“保存片段”按鈕來儲存更改。

在區塊編輯器中突出顯示文本

現在,CSS 片段已被激活,我們需要在 WordPress 編輯器中添加一些 HTML 代碼來突出顯示網站上的文本。首先,打開一個現有或者新的帖子。

從這裡,在區塊工具欄的頂部單擊“選項”圖標。這將打開一個新下拉菜單,您需要選擇“編輯為 HTML”選項。

現在,您將看到區塊內容的 HTML 格式。在這裡,簡單地將您要突出顯示的文本包裹在 標籤內,例如:

<mark>highlighted-text</mark>

這將在您 WPCode 片段中選擇的十六進制顏色中突出顯示文本。然後,單擊區塊工具欄的“視覺編輯”選項以切換回可視化編輯器。

完成後,單擊“更新”或“發布”按鈕來保存更改。現在,您可以訪問您的網站來查看實際效果。

附加內容:使用 SeedProd 突出顯示網站上的重要頁面

除了在博客文章中突出顯示文本,您還可能想要突出顯示 WordPress 網站上的重要部分,如聯絡表單或禮券。例如,如果您有一個網店並剛剛推出一個季節性促銷活動,您可能想在網站上突出顯示該優惠。

您可以通過為它們創建著陸頁來突出顯示這些部分。這些是您網站上的獨立頁面,旨在產生成果。為了為您的網站創建具有視覺吸引力的著陸頁,我們建議使用 SeedProd。這是市場上最好的 WordPress 著陸頁構建器,帶有拖放構建器、預製模板和多個區塊。

SeedProd 使創建吸引人的著陸頁變得非常簡單,這些頁面突出了您網站上的重要部分,如聯絡表單、促銷公告、贈品、推薦表單、登入頁等。詳情請參見我們的教程:如何在 WordPress 中創建著陸頁。

除此之外,您還可以使用 SeedProd 創建自定義主題、即將推出的頁面、維護頁面等。更多信息,請參見我們的完整 SeedProd 評測。

希望本指南能幫助您學會如何在 WordPress 中突出顯示文本。您可能還希望參見我們的分步指南:如何在 WordPress 中自定義顏色,以使您的網站更加美觀,以及我們對最佳電子郵件營銷服務的比較以增加流量。

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



Related Posts

  • 2024-08-04
  • WordPress 教学

不喜欢 WordPress 4.3 引入的格式化快捷键?觉得有点烦人?最近,有用户问我们如何在 WordPress 中禁用视觉编辑器格式化快捷键。在本文中,我们将向您展示如何做到这一点。

閱讀更多
  • 2024-07-31
  • WordPress 教学

你在 WordPress 网站上看到 503 服务不可用错误吗?503 错误是因为服务器无法处理请求,通常是由于服务器过载或维护。而这个错误不会告诉你具体原因,这对于初学者来说非常令人沮丧。本文将向你展示如何修复 WordPress 中的 503 服务不可用错误。

閱讀更多
  • 2024-07-30
  • WordPress 教学

管理一个企业需要大量的工作。如果您无法正确维护您的 WordPress 网站,可能会迅速看到流量和销售额下降的现象。幸运的是,您可以聘请虚拟助手 (VA) 来帮助管理您的网站。本文将教您如何聘请 WordPress 虚拟助手,以便您可以专注于业务中最重要的活动。

閱讀更多

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>