如何在WordPress帖子和頁面中添加選項卡式內容


您是否想將帖子劃分為選項卡以節省空間,並使用戶更容易找到所需內容? 在本文中,我們將向您展示如何在WordPress帖子和頁面中添加選項卡式內容。

帶有選項卡式內容的WordPress帖子

影片教學

訂閱WPBeginner

如果您不喜歡該視頻或需要更多說明,請繼續閱讀。

您需要做的第一件事是安裝並激活Tabs Shortcode和Widget插件。 該插件可以直接使用,沒有可供您配置的設置。

只需創建一個新帖子,然後在帖子編輯屏幕上,您就會注意到一個新的簡碼按鈕。 單擊該按鈕將顯示一個菜單。

標籤佈局按鈕

單擊菜單中的選項卡佈局選項,它將啟動插件的選項卡編輯器界面。

添加標籤

選項卡編輯器上的第一個選項是選擇要顯示的選項卡數量。 接下來,您可以選擇佈局類型。 該插件支持水平和垂直選項卡。 之後,您需要為每個選項卡提供標題,如果需要,請選擇一個圖標,然後添加選項卡內容。

對所有選項卡重複該過程。 彈出窗口上的最後一個選項是添加一個自定義CSS類。 如果要更改選項卡的外觀,則應在此處輸入CSS類。

在整個過程中,您將能夠在右側看到選項卡的實時預覽。 完成後,單擊“插入”按鈕以在WordPress帖子中添加選項卡。

保存並預覽您的信息,您將看到您使用的標籤。

在WordPress中添加選項卡式小部件

該插件還提供了一個小部件,可將選項卡式內容添加到WordPress邊欄中。 只需訪問 外觀»小部件 並將OTW簡碼小部件添加到側邊欄。

添加選項卡式內容小部件

在窗口小部件設置區域中,單擊添加按鈕以添加選項卡佈局。 這將調出我們之前顯示的選項卡編輯器。 只需使用用戶界面創建選項卡,然後將其添加到小部件即可。 最後,單擊“保存”按鈕以存儲您的小部件設置。

現在,您可以預覽您的網站,以查看帶標籤的內容小部件的運行情況。

更多喜歡冒險的用戶還可以查看本教程,了解如何在WordPress中添加jQuery tabber小部件。

我們希望本文能幫助您學習如何在WordPress帖子和頁面中添加選項卡式內容。 您可能還想看看我們為WordPress初學者提供的8種最佳jQuery教程列表。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Google+。