【鏈接】https://wordpress.org/plugins/tabby-responsive-tabs/
【作者:cubecolour】https://cubecolour.co.uk/tabby-responsive-tabs
描述
- 添加一組水平選項卡,這些選項卡在狹窄的視口上變為手風琴
- Tabs和手風琴是使用jQuery創建的
- 在同一頁面上支持多組標籤
- 使用語義頭和內容標記
- Aria屬性和角色有助於屏幕閱讀器的可訪問性
- 標籤和內容可通過鍵盤訪問
Tabby響應式標籤插件被設計為一種輕鬆輕巧的方式,可以向您的內容添加響應式標籤。沒有管理面板,有經驗的開發人員應該可以通過使用自定義版本替換內置CSS規則來輕鬆自定義選項卡在網站上的顯示方式(有關更多詳細信息,請參見下面的注釋)。
可選加載項(ADD-ONS)
“ Tabby Responsive Tabs Customiser ”加載項會添加一個設置面板,其中包含用於自定義標籤的多個參數。提供最簡單的方法來自定義選項卡的顯示而無需編輯任何代碼。您可以使用默認的虎斑樣式或隨附的一鍵式預設之一作為自定義的起點。它還使您可以輕鬆地將圖標添加到選項卡標題。
“Tabby Link to Tab”加載項提供了一個簡單的短代碼,以創建指向特定選項卡的鏈接,這些鏈接可以與選項卡組顯示在同一頁面的任何位置,而無需重新加載頁面。
“ Tabby Tab to URL Link”加載項使您可以將一個或多個選項卡設置為指向任何URL的鏈接。
“Tabby Load Accordion Closed”加載項改變默認的行為時,標籤顯示為手風琴所以沒有手風琴節是開放的最初時加載頁面。
用法:
使用短代碼:【 tabby
】和【tabbyending】
【tabby title="tabname 1"】
內容1
【tabby title="tabname 2"】
內容2
【tabby title="tabname 3"】
內容3
【tabbyending】
注意:為防止WordPress的wpautop過濾器引入雜散段落標籤,請確保在每個tabby短代碼和tabbyending上方和下方留空行。
如果要更改標籤和手風琴在網站上的顯示方式,則有兩個選擇:
- 使用“ Tabby響應式標籤定製器”插件,該插件提供了一種非常簡單的方法來自定義選項卡的顯示,而無需編輯任何代碼。
- 將插件樣式表的內容複製到您的子主題或自定義樣式插件中,然後根據需要對副本進行更改。如果這樣做,您還需要通過將以下行添加到子主題的functions.php或自定義功能插件中來阻止內置樣式的加載:
碼:
<?php remove_action('wp_print_styles', 'cc_tabby_css', 30); ?>
其他簡碼屬性
打開
默認情況下,第一個(最左側)標籤面板將在“標籤視圖”和“手風琴視圖”中打開。
如果要在頁面首次加載時默認打開第一個選項卡以外的特定選項卡,則可以在該選項卡的短代碼中添加參數和值open =“ yes”:
【tabby title="My Tab" open="yes"】
注意確保一個是打開狀態,因為不支持在一個標籤組中打開多個標籤。
圖標
可以使用‘icon’屬性添加在標籤標題旁邊顯示圖標所需的標記。“ Tabby響應式”選項卡不會添加圖標文件,您還需要使用主題或插件(例如“ Tabby響應式標籤”定製程序附加組件)來添加圖標文件:
【tabby title="My Tab" icon="cog"】
“Tabby Responsive Tabs Customiser ”插件可用於添加在標籤標題中顯示圖標所需的Font Awesome文件。
鏈接到頁面時控制打開哪個選項卡
您可以使用“目標” URL參數來設置頁面初始加載時將打開哪個選項卡。該參數的值基於在tabby短代碼中指定的選項卡標題,但其格式設置為標點符號和特殊字符已刪除,重音符號已刪除以及用短劃線代替空格。
如果要鏈接到“聯繫人”頁面,同時打開名為“電話號碼”的選項卡,則用於鏈接到此頁面的URL如下所示:
您可以使用“目標” URL參數來設置頁面初始加載時將打開哪個選項卡。該參數的值基於在tabby短代碼中指定的選項卡標題,但其格式設置為標點符號和特殊字符已刪除,重音符號已刪除以及用短劃線代替空格。
如果要鏈接到“聯繫人”頁面,同時打開名為“電話號碼”的選項卡,則用於鏈接到此頁面的URL如下所示:
yoursite.com/contact/?target=phone-numbers
如果要打開標題為“電子郵件地址”的選項卡,則URL如下所示:
yoursite.com/contact/?target=email-addresses
如果要打開標題為“entrées”的選項卡(第二個e帶有重音符號),則該網址應類似於:
yoursite.com/contact/?target=entrees
顯示
1、正常
2、小屏幕
3、打印模式
以下是舉例:
Tab1
第一部分內容
圖:
Tab2
第二部分內容
- 測試1
- 測試2
- 測試3
Tab3
第三部分內容