內容簡介
Metro Tabs 是一款為 WordPress 的區塊編輯器(Gutenberg)設計的外掛,讓使用者能輕鬆建立標籤式內容。透過 Metro Tabs,您可以創建多組標籤,每個標籤都能包含各種區塊,提升網站的互動性與可讀性。
【主要功能】
• 標籤組區塊:容納一組標籤,可在同一頁面使用多個標籤組
• 標籤項目區塊:可編輯的標籤標題與內容區域
• 無需 JavaScript 函式庫:僅使用原生 JavaScript
• 兼容區塊 API 版本 3:適用於 WordPress 6.3+ 的編輯器
• 輕量化樣式:可自訂主題或 CSS 覆蓋樣式
外掛標籤
開發者團隊
② 後台搜尋「Metro Tabs – Responsive Tabs Block」→ 直接安裝(推薦)
原文外掛簡介
Metro Tabs adds block-editor (Gutenberg) blocks for building tabbed content. You add a Metro Tabs: Tab Group block, then add one or more Metro Tabs: Tab Item blocks inside it. Each tab has a heading (the label visitors click) and a content area where you can add any blocks—paragraphs, images, lists, etc. On the front end, visitors see a simple tab bar and panes; clicking a tab switches the visible content without reloading the page.
Features
Tab Group block – Container for one set of tabs. You can use multiple Tab Group blocks on the same page for different tab sets.
Tab Item block – A single tab: editable heading and a content area that supports any blocks (paragraphs, headings, images, etc.).
No JavaScript libraries – Uses vanilla JavaScript only; no jQuery or jQuery UI.
Block API version 3 – Compatible with the current block editor (WordPress 6.3+ iframe editor).
Lightweight styling – Discrete front-end styles (underline-style active tab); you can override with your theme or custom CSS.
How to use
In the block editor, add a Metro Tabs: Tab Group block (search for “Metro Tabs” or “Tab Group”).
Inside the group, you’ll see placeholder Tab Items (e.g. “Tab 1”, “Tab 2”). Click each Metro Tabs: Tab Item block and:
Edit the tab heading (the text shown on the tab).
Add any blocks in the tab content area (paragraphs, images, etc.).
Add or remove Tab Item blocks as needed. You can add more Tab Groups elsewhere on the page for separate tab sets.
Publish or update. On the front end, the tab bar and panes are built automatically; clicking a tab switches the visible pane.
No settings or configuration are required. The plugin enqueues its script and styles on the front end when the page contains tab blocks.
Compatibility
Requires WordPress 6.0 or higher (block editor).
Requires PHP 8.0 or higher.
Tested with WordPress 6.9.
