Tabby Responsive Tabs – WordPress plugin 外掛推薦下載

點擊下載

Tabby響應選項卡

外掛Plugin描述

添加一組水平選項卡,這些選項卡將更改為窄視口上的手風琴.Tabs和手風琴是使用jQuerySupports多組創建的相同頁面上的選項卡使用語義標題和內容markupAria屬性和角色有助於屏幕閱讀器accessibilityTabs和內容可通過鍵盤訪問

Tabby Responsive Tabs外掛Plugin旨在為您的內容添加響應選項卡,這是一種簡單輕便的方式。沒有管理面板,經驗豐富的開發人員應該能夠通過使用自定義版本替換內置CSS規則,輕鬆自定義選項卡在其網站上的顯示方式(有關詳細信息,請參閱下面的說明)。

可選加載項

Tabby自適應標籤自定義程序加載項會添加一個設置面板,其中包含用於自定義選項卡的多個參數。提供最簡單的方法來自定義選項卡的顯示,而無需編輯任何代碼。您可以使用默認的平紋樣式或其中一個包含的單擊預設作為自定義的起點。它還使您可以輕鬆地向標題標題添加圖標。

Tabby Link to Tab 附加組件提供了一個簡單的短代碼,用於創建指向特定選項卡的鏈接,這些選項卡可以顯示在與選項卡組相同的頁面上的任何位置,而不需要重新加載頁面。

Tabby選項卡到URL鏈接附加組件使您可以設置一個或多個選項卡作為任何URL的鏈接。

當選項卡顯示為手風琴時, Tabby Load Accordion Closed 附加組件會更改默認行為,因此在頁面最初加載時不會打開手風琴節。

用法:

有兩個短代碼都可以使用 [虎斑] [tabbyending]

  [tabby title =“tabname”]  

將tabname替換為選項卡的名稱。

在短代碼後添加選項卡內容。

在選項卡組中最後一個選項卡的內容後添加 [tabbyending] 短代碼。

例子

如果你複製&將此示例粘貼到您自己的頁面而不是鍵入它們,確保任何雜散< code>或者< pre>標籤已刪除。

  [虎斑標題=“第一個標籤”]虎斑ipsum dolor坐下來,小貓曬日光浴,餵我。[虎斑標題=“第二個標籤”]放下你的方式貓薄荷卡住在一棵樹上,曬日光浴的小貓。[虎斑標題=“第三個標籤”]睡在水槽裡爬窗簾攻擊,給我魚。[tabbyending]  

注意:防止流浪款由WordPress的wpautop過濾器引入的標籤,確保在每個tabby短代碼和tabbyending上方和下方留下一個空行。

您可以在演示頁上看到選項卡。

如果您想更改標籤和手風琴在您網站上的顯示方式,您有兩種選擇:

使用 Tabby Responsive Tabs Customiser 外掛Plugin,它提供了一個非常簡單的方法自定義選項卡顯示的方法,無需編輯任何代碼。

將外掛Plugin樣式表的內容複製到子主題或自定義樣式外掛Plugin中,並根據需要對副本進行更改。如果這樣做,您還需要通過將以下行添加到子主題的functions.php或自定義功能外掛Plugin來阻止加載內置樣式:

代碼:

 <?php remove_action('wp_print_styles','cc_tabby_css',30); ?>  

附加短代碼屬性tes

打開

默認情況下,第一個(最左側)選項卡面板將在“標籤視圖”和“手風琴視圖”中打開。

如果您希望在首次加載頁面時默認打開第一個選項卡以外的特定選項卡,則可以添加參數&

[tabby title =“我的標籤”打開=“是”]

  如果在其中一個選項卡短代碼中使用“打開”短代碼參數,請確保僅將其添加到單個選項卡,因為不支持在選項卡組中打開多個選項卡。 

圖標

可以使用

‘圖標’

屬性添加在標籤標題旁邊顯示圖標所需的標記。 Tabby響應選項卡不會添加圖標文件,您還需要使用主題或外掛Plugin(例如tabby響應選項卡自定義程序加載項)來添加圖標文件:

[tabby title =“我的選項卡”icon =“cog”]

  這會在選項卡標題之前添加一個偽元素,其中包含“fa”和“fa-cog”類。如果您確保CSS規則針對外掛Plugin添加的類,則可以使用其他圖標字體集。 

Tabby響應標籤自定義程序

外掛Plugin可用於添加在標籤標題中顯示圖標所需的字體真棒文件。 控制鏈接到頁面時打開的選項卡

您可以使用“目標”URL參數設置頁面最初加載時將打開的選項卡。此參數的值基於tabby短代碼中指定的選項卡標題,但使用標點符號和&amp ;;刪除了特殊字符,刪除了重音符號,並用短劃線替換了空格。

如果您想鏈接到“聯繫人”#8217;打開標題為“電話號碼”的標籤的頁面,您用來鏈接到此頁面的網址如下所示:

yoursite.com/contact/?target=phone-numbers

  如果您希望打開標題為“電子郵件地址”的標籤,則網址將如下所示:

yoursite.com/contact/?target=email-addresses

  如果你想要一個標題為'entré es'的標籤打開(在第二個e上突出重音),網址將如下:

yoursite。 com / contact /?target = entrees

  屏幕截圖

在桌面瀏覽器上,內容顯示在選項卡中。
當瀏覽器寬度低於媒體查詢中設置的大小時,選項卡將被手風琴取代。
基本打印樣式旨在顯示標題標題&打印時適當的內容。
安裝

將Tabby Responsive Tabs外掛Plugin文件夾上傳到’/ wp-content / plugins /’目錄通過WordPress的“外掛Plugin”菜單激活外掛Plugin

FAQ

為什麼不是它對我有用嗎?

在對任何無法正常工作的外掛Plugin進行故障排除時,您可以調查一些事項:

錯誤形成的短代碼

如果您複製了&粘貼在顯示示例用法的網頁上的Tabby Responsive Tabs短代碼中,而不是直接將其鍵入頁面中,短代碼文本中可能存在不可見或無效的字符,或者短代碼包含在代碼標記中。通過刪除短代碼並直接鍵入它們來糾正此問題。

外掛Plugin或主題衝突

進行故障排除她有一個與Tabby Responsive Tabs外掛Plugin衝突的外掛Plugin或主題,切換到默認主題,如Twenty-Thirteen。如果外掛Plugin在此時開始正常工作,您就知道需要調查主題。
如果更改主題沒有區別,請停用除Tabby響應選項卡以外的所有外掛Plugin。如果您的選項卡在此時正確顯示,請通過逐個重新激活外掛Plugin來發現導致問題的外掛Plugin,直到Tabby響應選項卡再次停止工作。

如果外掛Plugin不適合您

,請仔細閱讀文檔以檢查您的問題是否包含在內。然後查看外掛Plugin支持論壇中的主題。如果有人遇到相同或類似的問題,您可以在已解決的主題中找到合適的解決方案。如果您找不到能夠解決問題的答案,請在論壇上發布一個新主題,以便我們有機會在您考慮進行審核之前讓其工作。 有多少級別的支持? 如果您在使用外掛Plugin時遇到問題,可以免費獲得外掛Plugin支持。要訪問此內容,請在

外掛Plugin支持論壇

上打開一個新主題。所有通信必須在論壇上進行,以獲得免費支持 如果您需要更高級別的支持, WordPress.org上的外掛Plugin支持論壇 – 例如,您不希望發佈網址或者您需要CSS支持以滿足您網站的特定要求,您可以通過

付費電子郵件支持表格為cubecolour外掛Plugin形式。

如何刪除顯示在標籤內容開頭或結尾的額外段落標記? 這些額外的標籤通常由WordPress的wpautop功能添加。建議在每個tabby短代碼之前和之後留一個空行,以防止它們出現。 粘貼的短代碼無效或標籤具有“階梯式”外觀

如果您正在復制&將示例短代碼粘貼到可視編輯器中並且短代碼似乎不起作用或選項卡以階梯式配置顯示,查看文本編輯器中的頁面以確保您沒有添加任何額外的標記在可視化編輯器中可見。刪除任何開始和結束< pre>和/或< code>圍繞選項卡短代碼的標籤對。 (這適用於使用短代碼的任何外掛Plugin)。

外掛Plugin的管理頁面在哪裡?

沒有一個。這是一個沒有選項的輕量級外掛Plugin。如果您希望能夠使用管理頁面自定義選項卡,則可以使用

Tabby響應選項卡自定義程序外掛Plugin

此外掛Plugin是否與響應主題一起使用? 是的 – 它應該適用於任何編碼良好的響應主題。 它是否適用於無響應的主題?

該外掛Plugin也應該與無響應的主題一起使用,但這並不是真的推薦;如果您使用的是非響應主題,則標籤可能無法切換到移動設備上的手風琴顯示。

它是否適用於WordPress的多站點安裝?

是的

如何更改顏色?

經驗豐富的開發人員為自定義選項卡顯示方式的推薦方法是將css規則從外掛Plugin的樣式表複製到子主題的樣式表中,然後根據需要自定義顏色和其他CSS。在子主題中使用外掛Plugin樣式的自定義版本時,您還應該通過將以下行添加到子主題的functions.php(或自定義功能外掛Plugin)來阻止外掛Plugin的默認內置樣式:

如果您希望在WordPress管理員中使用設置頁面來設置自定義標籤樣式,喲您可以使用

Tabby Responsive Tabs Customiser外掛Plugin

,其中包含多個標籤樣式預設,可以使用一套易於設置的全面選項進一步定制。 cusomiser外掛Plugin的設計非常容易讓非開發人員用來自定義選項卡的顯示方式。

我可以從默認的767px更改響應斷點嗎? 是的,您可以看到外掛Plugin的CSS中設置的位置。請參閱上面的答案,了解如何使用自定義css來使用自定義值。

也可以使用Tabby Responsive Tabs Customiser外掛Plugin的管理面板設置此值。

為什麼我的滑塊或(非原生WP)圖庫不能在除第一個選項卡之外的任何選項卡中工作?

一些旋轉木馬/滑塊/圖庫外掛Plugin使其內容呈現零高度和高度。如果包含內容的選項卡在頁面加載時不可見,則為width。如果您需要在選項卡中放置一個滑塊,我建議嘗試使用Meteor Slides,因為它似乎在我的測試中可靠地工作。原生WordPress畫廊也沒有問題。

如何在選項卡中刪除不匹配的開始或結束段落標記,使我的標記無效?

這是由WordPress的wpautop過濾器引起的,該過濾器適用於您的帖子/頁面內容。為防止出現雜散段落標記,請確保在每個短代碼之前和之後留下空白行。

為什麼我的谷歌地圖不能在除第一個選項卡之外的任何選項卡中工作?

一些谷歌地圖外掛Plugin呈現其內容為零高度&如果包含內容的選項卡在頁面加載時不可見,則為width。我已經能夠使用

WP Flexible Map

外掛Plugin在選項卡中顯示地圖。

我可以在一個頁面上顯示多個標籤組嗎? 是的,你可以擁有任意數量的標籤組。 我可以在側邊欄中添加標籤嗎?

如果您已向文本小部件添加短代碼支持,則可以在文本小部件中包含選項卡s通過將下面的過濾器添加到您的子主題的functions.php或自定義功能外掛Plugin。

add_filter(’widget_text’,’do_shortcode’);

 此過濾器使您可以使用文本小部件中的任何短代碼。 我可以在現有標籤中嵌套標籤組嗎? 

不,這不受支持。

我可以指定頁面最初加載時打開哪個選項卡嗎?

是的,有關詳細信息,請參閱“open”短代碼參數的文檔。

我可以指定從指向頁面的鏈接打開哪個選項卡

是,請參閱鏈接中“目標”URL參數用法的文檔。

我剛剛更新了外掛Plugin,標籤現在顯示不同

默認CSS在版本1.0.2和版本1.1.0中已更改。如果您的標籤現在在更新後顯示為“已損壞”,則可能是因為您的網站使用添加到主題中的自定義標籤樣式,而不是遵循使用完整自定義版本替換默認CSS的推薦方法。要解決此問題,請刪除添加到主題中的CSS規則以定位選項卡,並使用文檔中概述的方法添加自定義樣式。

你能為我創建一個自定義樣式表,以適應我網站的顏色或風格嗎?

特定於站點的定制工作超出了我能夠提供的免費支持範圍。我很高興將CSS工作作為付費工作,或者您可以使用可選的

Tabby Responsive Tabs Customiser

附加外掛Plugin來設置標籤的樣式以匹配您的主題。

Tabby響應標籤的外掛Plugin支持在WordPress.org上的外掛Plugin支持論壇

中提供。

為什麼我無法使目標參數起作用? 這與查詢字符串中的任何其他URL參數一樣使用,因此您需要為查詢使用有效的結構串。

如果查詢字符串中已有參數,包括使用默認醜陋永久鏈接時網址中包含的參數,則必須使用&符附加後續參數。

例如:

yoursite.com/?page_id=1&target=phone-numbers

如何在同一頁面上的鏈接上使用目標參數沒有頁面重新加載的tabgroup? 這對目標參數是不可能的,但是這可以通過使用可選的 Tabby Link to Tab外掛Plugin

來實現。標籤將如何打印? 基本打印樣式包含在外掛Plugin樣式表末尾的打印介質查詢中(從1.2版開始)。這旨在打印標籤和標題內容。如果您為選項卡使用自定義樣式,則可以將這些打印樣式複製到自定義樣式的末尾並自定義它們。 還有其他免費的cubecolour外掛Plugin嗎?

如果您喜歡Tabby Responsive Tabs,您可能會喜歡WordPress.org外掛Plugin目錄中的其他一些外掛Plugin。它們列在我的

配置文件

頁面的“外掛Plugin”選項卡下。

誰或什麼是立方體顏料? 我的名字是Michael Atkins。 Cubecolour是我在倫敦南部的網頁設計和開發業務的名稱,我與企業,組織和個人合作,使用WordPress構建和支持他們的網站。我喜歡參加當地的WordCamps和WordPress聚會。我從2007年開始使用WordPress,我是WordPress.org支持論壇的主持人。當我不坐在我的MacBook前面時,通常可以發現低音或夏威夷四弦琴。 為什麼你拼錯了“顏色”一詞?

我沒有,我來自英國,“顏色”是正確的拼寫。

我正在使用外掛Plugin並喜歡它,我怎麼能表達我的感激之情?

您可以通過捐贈任何金額

我的捐款頁面

或者您可以購買

Tabby Responsive Tabs Customiser外掛Plugin的副本。 如果你發現Tabby Responsive Tabs很有用,我也很感激外掛Plugin評論頁面上的評論

Tabby Responsive Tabs Customiser是Premium版本還是Pro版本的Tabby響應標籤? 不,Tabby Responsive Tabs可以自行運行,並且可以自定義標籤顯示的方式,對於任何熟悉編輯子主題的人來說都應該是直截了當的。 Tabby Responsive Tabs Customiser外掛Plugin是一個附加組件,旨在幫助那些想要一種簡單的方法來自定義標籤顯示方式而無需觸及任何代碼的人。 為什麼Tabby Responsive Tabs Customiser是一個附加外掛Plugin而不是Tabby Responsive Tabs的一部分?

免費的Tabby Responsive Tabs外掛Plugin被設計為WordPress開發人員的輕量級外掛Plugin,可以為其WordPress網站添加響應式標籤。可選附加組件定制器外掛Plugin提供的功能從未打算作為Tabby響應選項卡的一部分包含在內,並且對非編碼器特別有用。

Tabby外掛Plugin的Tabby鏈接是什麼?

Tabby鏈接到選項卡是Tabby響應選項卡的可選附加組件,它提供了一個簡單的短代碼,用於創建指向特定選項卡的鏈接,這些選項卡可以顯示在與選項卡組相同的頁面上的任何位置。使用此選項卡時,選項卡將變為活動狀態,而不會重新加載頁面。大多數情況下不需要此加載項,但如果要包含選項卡內容中或頁面的其他區域中的特定選項卡的鏈接,則此加載項非常有用。

有關詳細信息,請參閱:

Tabby Link to Tab外掛Plugin

。這個附加組件是在幾個用戶請求該功能後開發的。

Tabby Responsive Tabs Customiser& Tabby鏈接到Tab加載項的成本? 這些費用為19GBP,用於單個站點。一個每個開發人員選項也可用,或79GBP,可用於您擁有或控制的所有站點。

評論

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *