[ad_1]
標籤是許多網站上相當常見的功能，尤其是電子商務商店。電子商務商店所有者通常在產品描述區域中使用標籤，在那裡他們將評論，描述，技術規格等分成多個標籤。
仍然，標籤已經在許多其他不同類型的網站中使用，而不僅僅是電子商務網站。甚至官方的WordPress.org網站也使用插件描述頁面上的標籤。請參閱下面的圖片，以查看WP.org上突出顯示的選項卡。
許多其他網站所有者在不同類型的網站上使用標籤。但是，不要將標籤與之混淆 手風琴，擴展以揭示信息。下面，請觀察我在我的網站上如何使用手風琴。
但除了手風琴之外，我們在這裡談論標籤，所以讓我們不要失去焦點;我只需要明確選項卡和手風琴之間的區別。現在，我希望我們在同一頁上?
從本質上講，網站所有者使用標籤來分割本來會佔據整頁或帖子的信息。這意味著標籤使信息更容易消化，而不必強迫用戶按下滾動輪一百萬次。
換句話說，標籤可以提高您網站的可用性，尤其是在這個世界中 注意力越來越短。因此，如果您希望將用戶保留在您的網站上的時間更長，而不會讓用戶長篇大論，那麼您應該考慮使用標籤。
在今天的帖子中，我們將向您展示如何向WordPress帖子和頁面添加標籤。在本文結束之前，您將獲得使用選項卡所需的所有說明。我們希望您喜歡到最後，請不要在評論部分分享您的想法。這樣，讓我們開始吧。
使用頁面構建器
如果您已經安裝了頁面構建器，那麼您很幸運 – 您可能已經掌握了一個標籤模塊。大多數主要頁面構建器都提供選項卡作為其核心構建器元素集的一部分。這裡是我們最喜歡的兩個。
元素免費頁面生成器
流行的Elementor頁面構建器包含選項卡作為插件的免費版本的一部分。您需要做的就是在頁面上插入一個標籤元素，然後編輯標題，內容，樣式等等。就是這樣！
WPBakery Premium頁面構建器
使用包含WPBakery頁面構建器的高級主題（例如我們自己的 總主題）？大！標籤內置且易於使用。
WPBakery選項卡模塊與上一個示例略有不同，因為添加選項卡時選項卡最初為空。您需要在選項卡中插入其他頁面元素（文本區域，圖像，圖標等）以添加內容。但是，這為您提供了大量自由，可以根據需要創建標籤（除了內置樣式選項）。我們之前已在博客上介紹了此頁面構建器，因此如果您需要更詳細的說明，請查看我們的 WPBakery指南 （注意 – 這個插件之前被稱為Visual Composer，所以很抱歉任何混亂）。
安裝選項卡WordPress插件
如果您沒有使用頁面構建器，則不需要僅使用一個選項卡。有很多很棒的選擇，比如免費的WordPress插件，被WP Shop Mart簡稱為Tabs。 Tabs是一個漂亮的WordPress插件，可以幫助您創建無限數量的漂亮標籤，而不會出汗。
讓我們從安裝Tabs WordPress插件開始。由於它可以在官方的WordPress插件倉庫中使用，因此您可以直接從WordPress管理儀錶板中安裝插件。
我們使用的是免費版本，但如果您想稍後升級其他功能，可以使用高級版本。
安裝選項卡WordPress插件
登錄您的WordPress管理儀錶板並導航到插件>添加新，然後在關鍵字搜索框中輸入「tabs wpshopmart」。找到合適的插件後，點擊立即安裝按鈕，如下所示。
之後，單擊「激活」按鈕。就是這樣，你的Tabs Responsive WordPress插件已經可以使用了。現在，讓我們創建幾個選項卡來發現這個插件提供的內容。
配置選項卡響應WordPress插件
激活插件會在WordPress管理菜單中添加一個新項目。要創建新選項卡，請導航到選項卡響應>添加新選項卡，我們將在下面的screengrab中詳細說明。
這樣做會引導您進入Tabs Responsive Builder，它可以滿足您創建漂亮標籤（如老闆）所需的所有功能。請參閱下圖，了解所期待的內容。
相當不捲軸嗎？好吧，你可以在右側邊欄找到大部分功能。另請注意，各個選項卡都有其設置。您甚至可以在選項卡上使用WYSIWYG編輯器，這意味著您可以充分控制選項卡。
現在，讓我們創建幾個示例選項卡，並在頁面或帖子上顯示它們。
添加標題
首先為您的標籤添加一個描述性標題（就像您的標籤一樣） 導航菜單）如上圖所示。這樣，您可以稍後在WordPress管理儀錶板中輕鬆識別您的選項卡，以防您需要編輯任何內容。出於本教程的目的，我將選項卡命名為「Test Home Tabs」。
選擇標籤設計模板
如上面的屏幕截圖所示，下一步是選擇您要用於標籤的設計模板。免費版的Tabs WordPress插件只提供一個設計模板，但您可以隨時升級到高級版本19個。談論設計自由。
添加標籤
接下來，根據需要添加任意數量的選項卡，如下所示。
我們創建了一個編號列表，詳細說明了您可以在上面顯示的「添加選項卡」部分中執行的操作。數字對應於每個區域。
-
標籤標題 – 在此欄位中添加標籤標題，例如描述，規格，細節等
-
標籤說明 – 在此處添加標籤說明。此欄位允許您添加選項卡的內容。最好的部分是你可以使用WYSIWYG編輯器（如下面的數字3所示）為你的標籤添加豐富的內容，包括圖像，音樂和視頻
-
使用WYSIWYG – 如果您想使用熟悉的What-You-See-Is-You-Get-Get編輯器來創建標籤內容，請隨時點擊此按鈕啟動彈出窗口
-
選項卡圖標 – 此欄位可幫助您選擇要在選項卡上使用的圖標。 Tabs WordPress插件為您提供了大量的Font Awesome圖標，讓您像專業人士一樣為您的標籤添加爵士樂
-
顯示在圖標上方 – 如果您想在圖標旁邊顯示標籤標題，您一定會喜歡這個功能。此外，它允許您禁用圖標而不觸摸選項卡標題
-
刪除 – 點擊此按鈕可刪除特定選項卡
-
添加新標籤 – 單擊此按鈕可添加更多標籤
-
全部刪除 – 厭倦了所有標籤？只需點擊全部刪除按鈕即可重置所有內容
一些幫助你的獎金提示。首先，您可以拖放標籤以重新排序並根據需要進行排列。
其次 – 在創建選項卡時，不要忘記按一下或兩次「保存草稿」按鈕，以確保在意外離開「選項卡」構建器時不會丟失任何更改。
最後 – 如果您需要支持，則在「添加標籤」部分（以及大多數插件頁面）下方有一個藍色的「獲取支持」按鈕，可以引導您訪問WordPress.org上的官方標籤支持論壇。如果您在任何時候需要幫助，請隨時點擊支持按鈕。
標籤短代碼
接下來，您會找到用於添加標籤的標籤簡訊代碼，並在您希望的任何頁面或帖子上顯示標籤。例如，我們的短代碼是（TABS_R id = 443）。要顯示頁面上的選項卡，我只需將上述短代碼複製粘貼到該特定頁面即可。
Tabs Widget
您是否希望將標籤添加到網站的小部件區域？如果這是一個響亮的肯定，你會喜歡Tabs WordPress插件附帶的小部件支持。
點擊上圖中的點擊此處鏈接，您將進入WordPress窗口小部件屏幕，在該窗口中，您可以在主題中有窗口小部件區域的任何位置自由添加選項卡。
自定義CSS
雖然Tabs WordPress插件附帶了大量的標籤自定義選項（只需看一下右側邊欄;它充滿了樣式選項！），您可以添加自己的自定義CSS樣式，如下所示。
此外，您只需單擊「更新默認設置」按鈕，即可將自定義設置設置為所有新選項卡的默認設置，如上圖所示。
右側邊欄
我們在上圖中突出顯示的右側邊欄真正為您帶來了一天。它包含您所需的所有選項，可以根據您的內容設置標籤樣式。值得注意的選擇包括：
- 標籤背景顏色
- 標籤字體顏色
- 字體系列和風格
- 顯示標籤標題和圖標的選項
- 標籤圖標位置對齊，即標籤標題之前或之後
- 標籤邊框
- 多個選項卡描述動畫
- 還有更多
將您的標籤添加到WordPress頁面或發布
添加選項卡內容和樣式選項後，向上滾動並單擊「發布」按鈕，如下所示。
此時，您的標籤已準備就緒。您只需將選項卡添加到WordPress頁面或帖子。只需複製我們之前看到的標籤短代碼。我們是（TABS_R id = 443）。
啟動你的帖子編輯器（即使你正在使用它 古滕貝格）並將短代碼粘貼到您的帖子/頁面。之後，點擊Publish按鈕，如下所示。
設置好約5分鐘後;我正在使用Twenty Seventeen主題和大量的Lorem Ipsum，我想出了以下結果。
請注意，我沒有自定義顏色或任何東西。告訴我你的想法;那不容易嗎？
為你的WordPress頁面和帖子添加標籤是四年級學生的東西。我不希望你遇到任何問題，特別是如果你使用像WP Shop Mart的Tabs這樣的插件。
如何在WordPress頁面和帖子中添加標籤？哪個是你最喜歡的標籤WordPress插件？請在評論中分享您的想法。快樂創造！