前言介紹
- 這款 WordPress 外掛「Tabs Shortcode」是 2012-03-19 上架。 目前已經下架不再更新，不建議安裝使用。
- 目前有 1000 個安裝啟用數。
- 上一次更新是 2024-12-05，距離現在已有 150 天。
- 外掛最低要求 WordPress 3.4 以上版本才可以安裝。
- 有 12 人給過評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
外掛標籤
內容簡介
若要在文章或頁面中新增分頁標籤，請添加以下 shortcode：
[tabs]
[tab title="title1"] tab 內容
tab 內容
[/tab]
[tab title="title2"]
其他內容標籤
[/tab]
[/tabs]
以下為 shortcode 其他可接受的屬性：
// 預設屬性
[tabs collapsible=true selected=’0′ event=’click’ position=’top’ ]
[tab title=”title1″]
tab 內容
[/tab]
[tab title=”title2″]
其他內容標籤
[/tab]
[/tabs]
collapsible = true 或 false - 是否允許折疊標籤 - 對 Twitter Bootstrap 無效
selected = 整數，例如 - 預設開啟哪個標籤頁，0 代表第一頁，1 代表第二頁，依此類推
event = 'click' 或 'mouseover' - 用戶需點擊標籤頁面或只需將滑鼠移至標籤上即可觸發內容切換。提示：如關心行動裝置體驗，請不要使用 mouseover
position = 'top'、'bottom'、'left' 或 'right' - 將標籤標示在哪一側，詳見螢幕快照中範例。
vertical_tabs = true 或 false - 已停用，與 position = left 相同
樣式 CSS
若要以不同方式設計分頁標籤，可使用下列樣式 CSS 改變樣式：
您也可以參考 http://jqueryui.com/themeroller/。
該 shortcode 使用 jQuery UI 產生標籤，但如果您使用的是 Twitter Bootstrap 框架，請參閱 FAQ。
/* =tabs
-------------------------------------------------------------- */
.tabs-shortcode.ui-tabs {
padding:.2em;
zoom:1;
clear:both;
background:#FFF;
padding:0;
margin:0;
}
.tabs-shortcode.ui-tabs-nav {
list-style:none!important;
padding:.2em 0 0!important;
margin: 0!important;
}
.tabs-shortcode .ui-tabs-nav:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .tabs-shortcode .ui-tabs-nav { zoom: 1; } /* IE6 */
*:first-child+html .tabs-shortcode .ui-tabs-nav { zoom: 1; } /* IE7 */
.tabs-shortcode .ui-tabs-nav li {
position:relative;
float:left;
border:1px solid #CCC;
background:#EEE;
list-style:none!important;
z-index: 100;
padding:0;
}
.tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-tabs-active,
.tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-tabs-selected {
background:#FFF;
color:#111;
}
.tabs-shortcode .ui-tabs-nav li:before {
content:"";
}
.tabs-shortcode .ui-tabs-nav li a {
float:left;
text-decoration:none;
padding:2px 1em;
color:#333;
border:none!important;
}
.tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-tabs-active a,
.tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-tabs-selected a,
.tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-state-disabled a,
.tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-state-processing a {
cursor: default;
}
.tabs-shortcode .ui-tabs-nav li a,
.tabs-shortcode.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a,
.tabs-shortcode.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a {
cursor:pointer;
}
原文外掛簡介
To add tabs to you post or pages just add this shortcode:
[tabs]
[tab title="title1"] tab content
tab content
[/tab]
[tab title="title2"]
another content tab
[/tab]
[/tabs]
Here are the some attributes that the shortcode also excepts
// default attributes
[tabs collapsible=true selected=’0′ event=’click’ position=’top’ ]
[tab title=”title1″]
tab content
[/tab]
[tab title=”title2″]
another content tab
[/tab]
[/tabs]
collapsible = true or false – weather the tabs should be allowed to be collapsed – this doesn’t work with twitter bootstrap
selected = integer for example – what tab should be selected. 0 means the first tab. 1 means the second tab etc.
event = ‘click’ or ‘mouseover’ – does do you user need to click on the tab or just mouse over to get to the content. Tip: Don’t use mouseover if you are concerned with mobile.
position = ‘top’ , ‘bottom’ , ‘left’, ‘right’ on what side do you want the tabs to appear. See screenshots for an example.
vertical_tabs = true or false – depreciated is the same as position = left
Sample CSS
Want to style the tabs a different way.
Here is some sample css to get you started.
Another place to look for it would be the http://jqueryui.com/themeroller/,
The shortcode used the jQuery UI to generate the tabs unless you are using the twitter bootstrap framework.
See the FAQ on how to deal with that case.
/* =tabs
-------------------------------------------------------------- */
.tabs-shortcode.ui-tabs {
padding:.2em;
zoom:1;
clear:both;
background:#FFF;
padding:0;
margin:0;
}
.tabs-shortcode.ui-tabs-nav {
list-style:none!important;
padding:.2em 0 0!important;
margin: 0!important;
}
.tabs-shortcode .ui-tabs-nav:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .tabs-shortcode .ui-tabs-nav { zoom: 1; } /* IE6 */
*:first-child+html .tabs-shortcode .ui-tabs-nav { zoom: 1; } /* IE7 */
.tabs-shortcode .ui-tabs-nav li {
position:relative;
float:left;
border:1px solid #CCC;
background:#EEE;
list-style:none!important;
z-index: 100;
padding:0;
}
.tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-tabs-active,
.tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-tabs-selected {
background:#FFF;
color:#111;
}
.tabs-shortcode .ui-tabs-nav li:before {
content:"";
}
.tabs-shortcode .ui-tabs-nav li a {
float:left;
text-decoration:none;
padding:2px 1em;
color:#333;
border:none!important;
}
.tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-tabs-active a,
.tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-tabs-selected a,
.tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-state-disabled a,
.tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-state-processing a {
cursor: default;
}
.tabs-shortcode .ui-tabs-nav li a,
.tabs-shortcode.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a,
.tabs-shortcode.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a {
cursor:pointer;
}
.tabs-shortcode .ui-tabs-panel {
display:block;
border-width:0;
background:none;
}
.tabs-shortcode .ui-tabs-hide {
display:none!important;
}
.tabs-shortcode.ui-tabs-panel {
clear:both;
}
/* Position Top and Bottom */
.tabs-shortcode-top .ui-tabs-nav,
.tabs-shortcode-bottom .ui-tabs-nav{
margin-left:0!important;
}
.tabs-shortcode-top .ui-tabs-nav li,
.tabs-shortcode-bottom .ui-tabs-nav li{
position:relative;
float:left;
position:relative;
float:left;
}
/* Position Top */
.tabs-shortcode-top .ui-tabs-nav{
border-bottom: 1px solid #CCC;
}
.tabs-shortcode-top .ui-tabs-nav li.ui-tabs-active,
.tabs-shortcode-top .ui-tabs-nav li.ui-tabs-selected {
padding-bottom:1px!important;
border-bottom:0;
margin:1px .3em -1px 0!important;
}
.tabs-shortcode-top .ui-tabs-nav li {
border-bottom-width:0!important;
margin:1px .3em 0 0!important;
}
/* Position Bottom */
.tabs-shortcode-bottom .ui-tabs-nav{
border-top: 1px solid #CCC;
}
.tabs-shortcode-bottom .ui-tabs-nav li.ui-tabs-active,
.tabs-shortcode-bottom .ui-tabs-nav li.ui-tabs-selected {
padding-top:1px!important;
border-top:0;
margin:-1px .3em 1px 0!important;
}
.tabs-shortcode-bottom .ui-tabs-nav li {
border-top-width:0!important;
margin:0 .3em 1px 0!important;
}
/* Position Left and Right */
.tabs-shortcode-left .ui-tabs-nav,
.tabs-shortcode-right .ui-tabs-nav{
width: 150px;
margin: 0!important;
}
.tabs-shortcode-left .ui-tabs-nav li,
.tabs-shortcode-left,
.tabs-shortcode-right .ui-tabs-nav li,
.tabs-shortcode-right{
position: relative;
overflow: hidden;
}
.tabs-shortcode-left .ui-tabs-nav li,
.tabs-shortcode-right .ui-tabs-nav li{
margin:0 0 0.3em 0;
width: 100%;
}
.tabs-shortcode-left .ui-tabs-nav li a,
.tabs-shortcode-right .ui-tabs-nav li a{
width: 100%;
}
.tabs-shortcode-left .ui-tabs-panel,
.tabs-shortcode-right .ui-tabs-panel{
margin-left: 165px;
}
/* Position Left */
.tabs-shortcode-left .ui-tabs-nav{
border-right: 1px solid #CCC;
padding: 0 1px 10px 0!important;
}
.tabs-shortcode-left .ui-tabs-nav,
.tabs-shortcode-left .ui-tabs-nav li{
float: left;
}
.tabs-shortcode-left .ui-tabs-nav li.ui-tabs-active,
.tabs-shortcode-left .ui-tabs-nav li.ui-tabs-selected {
padding-right:1px;
border-right:0;
margin:0 1px 0.3em 0;
}
/* Position Right */
.tabs-shortcode-right .ui-tabs-nav{
border-left: 1px solid #CCC;
padding: 0 0 10px 1px!important;
}
.tabs-shortcode-right .ui-tabs-nav,
.tabs-shortcode-right .ui-tabs-nav li{
float: right;
}
.tabs-shortcode-right .ui-tabs-nav li.ui-tabs-active,
.tabs-shortcode-right .ui-tabs-nav li.ui-tabs-selected {
padding-left:1px;
border-left:0;
margin:0 0 0.3em 1px;
}
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Tabs Shortcode」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
1 | 1.1 | 2.0 | 1.0.1 | 1.0.2 | 1.0.3 | 1.1.1 | 2.0.1 | 2.0.2 | 3.0.0 |
延伸相關外掛（你可能也想知道）
Shortcodes by Angie Makes 》Shortcodes by Angie Makes 外掛為您的 WordPress 主題新增一系列易於使用的短碼，這些短碼與 Angie Makes WordPress 主題 完美搭配。, 範例, 請到此查看這些...。
Tabs Responsive – With WooCommerce Product Tabs Extension 》bs at the same time. This gives users the ability to easily navigate between Tabs and see content without having to constantly switch between them....。
YITH WooCommerce Tab Manager 》直接信息的高效頁面, 為了讓客戶理解清楚，YITH WooCommerce Tab Manager 讓您可以自定義產品頁面上的所有信息：, 可下載的 PDF 檔案、虛擬地圖、視頻教程、...。
Tabby Responsive Tabs 》, 增加一組水平標籤，在較窄的視窗時會變成手風琴, 使用 jQuery 建立標籤和手風琴, 支援同一頁面多組標籤, 使用語意化的標題和內容標記, Aria 屬性和角色有助...。
Simple Side Tab 》在你的網站上增加一個「全域呼籲行動」。 Simple Side Tab 在瀏覽器視窗的左側或右側增加一個垂直標籤，連接到任何頁面。該標籤會隨著訪問者向下滾動頁面而固...。
Tabs – Responsive Tabs with WooCommerce Product Tab Extension 》, 最佳應答式定位標籤（Responsive Tabs）或內容標籤（Content Tabs）或 WooCommerce 自訂標籤外掛程式，適用於 WordPress 或 WooCommerce。, , 標籤 – 擁有 ...。
Responsive Tabs 》這個外掛會在管理面板中增加一個「Tabs」區塊，讓你可以輕鬆地創建分頁內容。你只需快速新增內容到不同分頁，選擇顏色，隨時調整顯示順序，然後透過簡單的短...。
XLTab – Accordions and Tabs for Elementor Page Builder 》使用此外掛可以增強您在Elementor網頁建立中的體驗，讓您能自訂頁籤、手風琴效果。, 示範, 購買進階版本, 🔥 接下來做什麼, 如果您喜歡 Icon Element，也可以...。
TJ Shortcodes 》這個外掛增加了一組短代碼，以提升你的網站。你可以輕鬆地添加按鈕、警告、欄位等等，無需編程知識！, 短代碼包括, , 警告, 按鈕, 欄位, 選項卡, 翻轉, 首字...。
Tab – Accordion, FAQ 》Tab 允許您在 Elementor 和所有佈景主題上建立簡單的分頁、手風琴和常見問題解答，並提供無限的選項和轉換動畫支持。, WordPress Tab & Accordion。, , W...。
Advanced Tabs Gutenberg Block 》Advanced Tabs Block 是一個使用 Gutenberg Native Components 開發的自定義 Gutenberg 區塊。使用這個區塊，您可以輕鬆展示具有選項卡樣式的內容。它提供了...。
WPC Product Tabs for WooCommerce 》WPC Product Tabs for WooCommerce是一個易於使用的外掛程式，可為產品新增自訂標籤，並提供給買家更多的商品細節，增加消費者對商品的信心。使用者可以選用...。
WP Tabs Slides 》這個 WordPress 外掛可以讓你輕鬆地添加內容標籤和/或內容幻燈片。標籤模仿多頁面結構，而幻燈片則模仿手風琴式結構，都可以在單個頁面中使用！, 支援 Easy R...。
Tabs Shortcode and Widget 》這個 WordPress 外掛讓你輕鬆地在你的網站上創建不同種類的標籤，垂直或水平。可以在網站的任意位置插入標籤，包括頁面/文章編輯器、側邊欄、模板檔案等。無...。
Tab Ultimate 》Tab Shortcode Ultimate是一款簡單、響應式、輕量級的jQuery標籤插件，支持無限選項和過渡動畫，可創建響應式標籤面板。, 此插件允許您使用獨特的文章ID通過...。