如何在 WordPress 中創建標籤以獲得令人驚嘆的標籤內容

已發表: 2022-09-01

想了解如何在 WordPress 中創建標籤?

向您的 WordPress 網站添加標籤是組織不同類型的內容並節省帖子和頁面空間的絕佳方式。

在本文中,我們將逐步向您展示如何在 WordPress 中添加選項卡。

WordPress中的標籤是什麼?

標籤是一種組織內容的導航系統,使訪問者更容易瀏覽您的網站。 您可以將標籤添加到帖子和頁面,或使用標籤小部件在 WordPress 側邊欄和小部件區域中顯示標籤內容。

為什麼需要標籤式 WordPress 內容?

除了對內容進行排序之外,標籤還可以更輕鬆地讓您的網站訪問者保持活躍和參與。 由於選項卡將內容主題組合在一個頁面上,因此用戶無需單擊即可轉到其他頁面,這對於較短的注意力跨度來說是理想的選擇。

例如,WordPress.org 使用其插件頁面上的選項卡來顯示詳細信息、評論、支持和開發等信息。

WordPress.org 上的選項卡式內容示例

使用選項卡的其他一些方法包括:

  • 在產品描述中顯示不同的產品規格
  • 在您的博客側邊欄中過濾類別
  • 在聯繫頁面上對聯繫信息進行排序

專業提示:標籤不應與手風琴混淆。 用戶單擊選項卡以切換信息,而手風琴展開以顯示信息。

現在您了解了更多關於標籤如何工作以及為什麼需要它們的信息,讓我們看看如何將標籤添加到您的 WordPress 網站。

下面我們將分享 2 種向 WordPress 添加標籤的方法。 首先,我們將使用頁面構建器,然後向您展示如何使用 WordPress 插件創建選項卡。

讓我們開始吧。

  • 方法 1:如何使用頁面構建器在 WordPress 中製作標籤
    • 方法 2:如何使用 WordPress 插件添加標籤

    方法 1:如何使用頁面構建器在 WordPress 中製作標籤

    對於第一種方法,我們將使用最好的 WordPress 網站構建器 SeedProd 將選項卡式內容添加到您的網站。

    SeedProd WordPress 網站建設者

    SeedProd 是一個功能強大的拖放頁面構建器,可讓您創建靈活的 WordPress 佈局而無需編寫代碼。 借助其專業的網站工具包、登錄頁面模板和實時可視化編輯器,您可以自定義網站的每個部分並實時查看更改。

    您還可以使用 SeedProd 來:

    • 創建自定義 WordPress 主題
    • 建立 WooCommerce 網站
    • 創建高轉化的登陸頁面
    • 將您的網站置於維護模式
    • 以及更多

    此頁面構建器還包括高度可定制的塊,用於增強您的 WordPress 設計。 例如,使用我們將在本指南中使用的選項卡塊,您只需單擊幾下即可將多個選項卡添加到頁面。

    按照以下步驟使用 SeedProd 在 WordPress 中創建選項卡。

    步驟 1. 安裝 SeedProd 網站構建器

    首先,您需要前往 SeedProd 網站並下載插件。 SeedProd 確實有免費版本。 但是,您需要一個高級計劃來解鎖標籤和其他塊。

    下載插件後,您需要在 WordPress 網站上安裝並激活它。 如果您以前從未安裝過 WordPress 插件,則可以按照這些說明進行操作。

    激活插件後,導航到SeedProd » 設置並輸入您的插件許可證密鑰。

    輸入您的許可證密鑰

    您可以在“下載”部分下的帳戶儀表板中找到您的 SeedProd 許可證密鑰。

    找到您的 SeedProd 許可證密鑰

    請記住在進行下一步之前單擊“驗證密鑰”按鈕。

    第 2 步。創建 WordPress 主題或登錄頁面

    有兩種方法可以使用 SeedProd 向您的網站添加標籤:

    1. 使用主題生成器創建自定義 WordPress 主題,並將選項卡添加到任何 WordPress 頁面。
    2. 使用拖放頁面構建器創建帶有選項卡式內容的獨立登錄頁面。

    對於本指南,我們將使用第一個選項,因為它允許您將選項卡添加到您喜歡的任何頁面,包括您的主頁、WordPress 側邊欄、頁眉、頁腳以及主題中的任何其他位置。

    您可以按照此分步指南使用 SeedProd 創建 WordPress 主題,然後返回此處獲取有關向您的站點添加標籤的說明。

    第 3 步。將標籤添加到您的 WordPress 頁面

    構建 WordPress 主題後,您需要決定哪些頁面應該包含選項卡式內容。 例如,您可以在聯繫頁面中添加標籤以顯示不同類型的聯繫信息,或者在自定義側邊欄中添加不同帖子類別的標籤。

    在此示例中,我們將在“關於”頁面添加選項卡以顯示更多詳細信息,例如職位空缺、編輯指南等。

    為此,請從您的 WordPress 管理員轉到頁面 » 所有頁面,然後找到您要編輯的頁面。

    由於您使用的是 SeedProd 網站工具包,因此會自動創建內容頁面,例如 about、contact 和 services 頁面。 要在可視化編輯器中打開它們,請單擊Edit with SeedProd鏈接。

    使用 SeedProd 進行編輯

    在頁面構建器中打開頁面後,您可以使用 SeedProd 的自定義選項進行更改。 您可以單擊任何元素來更改其內容、顏色、樣式和可見性。

    SeedProd 拖放式構建器

    通過從塊面板中拖動它們並將它們放置在適當的位置,也可以輕鬆地將更多元素添加到您的頁面。 所以讓我們用 SeedProd 的標籤塊來做這件事。

    首先,向頁面添加一個新部分以“容納”您的選項卡式內容。 在我們的例子中,我們將復制現有部分之一併將其拖到頁面底部。

    在 SeedProd 的頁面構建器中復制一個部分

    之後,將圖像換成更相關的內容,並通過單擊垃圾桶圖標刪除您不再需要的任何內容。

    在 SeedProd 中刪除一個塊

    現在您可以在左側面板中查找選項卡塊並將其拖到頁面上的新部分中。

    拖放 SeedProd 選項卡塊

    單擊該塊會顯示其內容設置,您可以在其中:

    • 添加多個選項卡
    • 顯示或隱藏選項卡圖標
    • 更改字體大小
    • 增加或減少選項卡之間的間距
    • 調整標籤對齊方式
    標籤塊設置

    展開每個選項卡可讓您添加選項卡標題並使用具有“所見即所得”(WYSIWYG) 設置的經典編輯器編寫內容。

    您還可以啟用自定義圖標來為您的選項卡添加更多興趣並使它們脫穎而出。 只需將“隱藏標籤圖標”切換到“關閉”位置,然後從 Font Awesome 庫中選擇一個自定義圖標。

    SeedProd 選項卡圖標

    單擊“高級”選項卡可讓您選擇更多自定義選項,包括自定義背景顏色、字體、邊框、間距等。

    高級選項卡設置

    您還可以通過單擊任一佈局選項來顯示垂直選項卡或水平選項卡集。

    SeedProd 中的垂直和水平選項卡

    請記住單擊屏幕右上角的保存按鈕以保存更改。

    按照相同的步驟將選項卡添加到 WordPress 網站上的任何其他頁面,然後繼續下一步以使您的更改生效。

    第 4 步。發布您的選項卡式內容

    將標籤添加到您的各種 WordPress 頁面後,您就可以將它們發布給您的網站訪問者查看。

    為此,請轉到SeedProd » Theme Builder頁面並將“啟用 SeedProd 主題”切換到“打開”位置。

    啟用種子產品主題

    現在您可以預覽您的頁面並查看您的選項卡式內容。

    如何使用 SeedProd 示例在 WordPress 中創建選項卡

    方法 2:如何使用 WordPress 插件添加標籤

    如果您不想更改 WordPress 主題或創建登錄頁面,以下方法是一個不錯的選擇。 我們將使用免費的 Tabs Responsive WordPress 插件將響應式標籤添加到您的 WordPress 網站。

    首先,您需要安裝 Tabs Responsive 插件並從您的 WordPress 管理員激活它。

    安裝並激活 Tabs Responsive WordPress 插件

    然後,導航到Tabs Responsive » 添加新選項卡並為您的選項卡集命名。

    添加新標籤集

    從那裡,您可以選擇默認模板,或者如果您使用的是專業版,您可以從 18 多種模板樣式中進行選擇。

    下一步是添加標籤。 您可以創建任意數量的選項卡,包括:

    • 標籤標題
    • 選項卡說明
    • 選項卡圖標
    編輯您的標籤內容

    您還可以通過選擇自定義選項卡樣式、背景顏色、字體顏色等來編輯右側邊欄中每個選項卡的樣式。

    標籤自定義選項

    當您對標籤感到滿意時,複製標籤短代碼並將其粘貼到您的 WordPress 主題中的任何位置。

    複製標籤短代碼

    例如,您可以將短代碼粘貼到 WordPress 帖子或頁面中,如下所示:

    將標籤短代碼添加到 WordPress 帖子或頁面

    這是它在您網站前端的外觀:

    WordPress 頁面標籤示例

    您還可以通過將短代碼粘貼到段落塊中來將選項卡短代碼添加到小部件就緒區域,例如 WordPress 側邊欄或頁腳小部件。

    在 WordPress 側邊欄中粘貼標籤短代碼

    之後,您將在側邊欄區域看到您的選項卡式內容:

    WordPress 側邊欄中的選項卡示例

    你有它!

    在本教程中,您學習瞭如何在不編寫代碼的情況下在 WordPress 中創建選項卡。 準備好在您的網站上創建可自定義的標籤了嗎?

    立即開始使用 SeedProd

    當您在這裡時,您可能還喜歡這些其他有用的 WordPress 指南:

    • 如何在 WordPress 中創建文本動畫(簡單步驟)
    • 如何為 WordPress 網站創建精美的分區分隔線
    • 如何在 WordPress 中添加作者框(無插件)

    謝謝閱讀。 請在 YouTube、Twitter 和 Facebook 上關注我們,獲取更多有用的內容來發展您的業務。