Title: Metro Tabs – Vertical, Responsive & Linkable Tabs Block Author: Ciprian Popescu Published: 12 مارس 2026 Last modified: 9 اکتبر 2026 --- جستجوی افزونه‌ها ![](https://ps.w.org/metro-tabs/assets/banner-772x250.png?rev=3481383) ![](https://ps.w.org/metro-tabs/assets/icon-256x256.png?rev=3481383) # Metro Tabs – Vertical, Responsive & Linkable Tabs Block توسط [Ciprian Popescu](https://profiles.wordpress.org/butterflymedia/) [دانلود](https://downloads.wordpress.org/plugin/metro-tabs.zip) * [جزئیات](https://fa.wordpress.org/plugins/metro-tabs/#description) * [نقد و بررسی‌ها](https://fa.wordpress.org/plugins/metro-tabs/#reviews) * [توسعه](https://fa.wordpress.org/plugins/metro-tabs/#developers) [پشتیبانی](https://wordpress.org/support/plugin/metro-tabs/) ## توضیحات WordPress 7.1 added a basic Tabs block. Metro Tabs uses the same accessible tabs pattern and adds what Core doesn’t do: * **Vertical tabs** – tab list on the side, with Up/Down arrow keys. * **Accordion on mobile** – below a width you choose, the tabs turn into an accordion. * **Shareable links** – optionally update the address bar when a tab opens, so every tab has its own #link. Links work on page load and when the hash changes. * **Remember the last tab** a visitor opened on a page. * **Icons in tab labels** (Dashicons). * **Style presets** – Metro (underline), Pills, Boxed and Segmented, plus Color, Typography and Spacing panels. * **Fade or slide** panel animation, switched off for visitors who prefer reduced motion. * **Style pack for core Tabs** – the same four presets for the core Tabs block. * **No lock-in** – transform Metro Tabs to core Tabs and back. * Tabs are rendered on the server, so there is no flash of unstyled content, and the small script only loads on pages with tabs. Add a **Metro Tabs** block, then edit the **Tab Item** blocks inside it. Each tab has a heading (the label visitors click) and a content area that takes any blocks. #### How to use 1. In the block editor, add a **Metro Tabs** block (search for “Metro Tabs” or “tabs”). 2. Inside it, you’ll see placeholder Tab Items (e.g. “Tab 1”, “Tab 2”). Click each** Metro Tabs: Tab Item** block and: 3. * Edit the **tab heading** (the text shown on the tab) and, optionally, pick an icon in the sidebar. * Add any blocks in the **tab content** area (paragraphs, images, etc.). 4. Select the Metro Tabs block to choose the orientation, accordion breakpoint, animation, links and style. 5. Publish or update. You can use several Metro Tabs blocks on the same page. Explore more [WordPress Plugins](https://getbutterfly.com/wordpress-plugins/). #### Compatibility * Requires WordPress 7.1 or higher. * Requires PHP 8.0 or higher. ### From the same author * [Active Contacts – WordPress CRM & Follow-up Plugin](https://getbutterfly.com/wordpress-plugins/active-contacts/) * [LazyClone – Copy a WordPress Site Without FTP](https://getbutterfly.com/wordpress-plugins/lazyclone/) * [Lighthouse – WordPress Performance & Speed Optimization Plugin](https://getbutterfly.com/wordpress-plugins/lighthouse/) * [Active Analytics – Privacy-Friendly WordPress Analytics Plugin](https://getbutterfly.com/wordpress-plugins/active-analytics/) * [ImagePress – WordPress Image Gallery & Community Photo Plugin](https://getbutterfly.com/wordpress-plugins/imagepress/) * [eCards – WordPress eCard Plugin with Email Designer](https://getbutterfly.com/wordpress-plugins/wordpress-ecards-plugin/) * [Repeater for Gravity Forms – Repeater Field Add-on](https://getbutterfly.com/wordpress-plugins/gravity-forms-repeater-plugin/) * [Fixtures & Results – WordPress Sports League & GAA Club Plugin](https://getbutterfly.com/wordpress-plugins/fixtures-and-results/) * [WP Google Consent Platform (GCP)](https://getbutterfly.com/wordpress-plugins/wp-gcp-a-wordpress-plugin-for-google-consent-mode-v2/) ## عکس‌های صفحه [⌊Front-end tabs⌉⌊Front-end tabs⌉[ Front-end tabs [⌊Front-end tabs⌉⌊Front-end tabs⌉[ Front-end tabs [⌊Front-end tabs⌉⌊Front-end tabs⌉[ Front-end tabs [⌊Back-end block editor with Tab Group and Tab Item blocks⌉⌊Back-end block editor with Tab Group and Tab Item blocks⌉[ Back-end block editor with Tab Group and Tab Item blocks [⌊Back-end block editor with Tab Group and Tab Item blocks⌉⌊Back-end block editor with Tab Group and Tab Item blocks⌉[ Back-end block editor with Tab Group and Tab Item blocks [⌊Source code demonstrating ARIA roles and keyboard navigation attributes⌉⌊Source code demonstrating ARIA roles and keyboard navigation attributes⌉[ Source code demonstrating ARIA roles and keyboard navigation attributes ## نقد و بررسی‌ها نقد و بررسی‌ای برای این افزونه یافت نشد. ## توسعه دهندگان و همکاران “Metro Tabs – Vertical, Responsive & Linkable Tabs Block” نرم افزار متن باز است. افراد زیر در این افزونه مشارکت کرده‌اند. مشارکت کنندگان * [ Ciprian Popescu ](https://profiles.wordpress.org/butterflymedia/) [ترجمه “Metro Tabs – Vertical, Responsive & Linkable Tabs Block” به زبان شما.](https://translate.wordpress.org/projects/wp-plugins/metro-tabs) ### علاقه‌ مند به توسعه هستید؟ [کد را مرور کنید](https://plugins.trac.wordpress.org/browser/metro-tabs/)، [مخزن SVN](https://plugins.svn.wordpress.org/metro-tabs/) را بررسی کنید، یا از طریق [RSS](https://plugins.trac.wordpress.org/log/metro-tabs/?limit=100&mode=stop_on_copy&format=rss) در [گزارش توسعه](https://plugins.trac.wordpress.org/log/metro-tabs/) مشترک شوید. ## گزارش تغییرات #### 1.2.0 * FEATURE: Vertical tabs (Up/Down arrow keys, `aria-orientation="vertical"`) * FEATURE: Accordion below a chosen screen width * FEATURE: Optional address bar update on tab change, and remember the last opened tab * FEATURE: Dashicons in tab labels * FEATURE: Style presets (Metro, Pills, Boxed, Segmented), Color, Typography, Spacing and anchor support * FEATURE: Fade/slide panel animation (respects reduced motion) * FEATURE: Style pack for the core Tabs block, and transforms between Metro Tabs and core Tabs * PERFORMANCE: Tabs are rendered on the server (no layout shift); the script is a small ES module loaded only on pages with tabs; the stylesheet only loads with the block * UPDATE: The tab list is now a `div` of buttons instead of `ul`/`li`. Existing tab links (#metrotabs-g0-…) keep working. Update any custom CSS that targeted`. metro-tabs-block ul li` * UPDATE: Tab items saved outside a tab group (very old content) render as a native disclosure * UPDATE: Requires WordPress 7.1 #### 1.1.7 * UPDATE: Tested up to WordPress 7.1 * DOCS: Add WordPress Plugins directory and donation link #### 1.1.6 * UPDATE: Tested up to WordPress 7.1 * DOCS: Add WordPress Plugins directory and donation link #### 1.1.5 * Add WAI-ARIA Tabs pattern (roles, states, and properties) * Add keyboard navigation (Arrow keys, Home, End) with automatic activation * Add roving tabindex and visible focus styles for keyboard users * Rename .simple-tabs-block CSS class to .metro-tabs-block #### 1.1.4 * Rename all internal references from TabX to Metro Tabs * Rename asset files to use metrotabs prefix * Add docblocks for all PHP functions #### 1.1.3 * Use plugin_dir_path() and plugin_dir_url() for correct path/URL resolution * Remove updater * Shorten readme short description * Add version and $in_footer to enqueued scripts and styles #### 1.1.2 * Fixed plugin name #### 1.1.1 * Fixed block registration #### 1.1.0 * First release ## اطلاعات * نگارش **1.2.0** * آخرین به‌روزرسانی **12 ساعت پیش** * نصب‌های فعال **100+** * نگارش وردپرس ** 7.1 یا بالاتر ** * آزمایش‌شده تا **7.1.3** * نگارش PHP ** 8.0 یا بالاتر ** * زبان * [English (US)](https://wordpress.org/plugins/metro-tabs/) * برچسب * [Accordion](https://fa.wordpress.org/plugins/tags/accordion/)[responsive](https://fa.wordpress.org/plugins/tags/responsive/) [tabs](https://fa.wordpress.org/plugins/tags/tabs/)[tabs block](https://fa.wordpress.org/plugins/tags/tabs-block/) [vertical tabs](https://fa.wordpress.org/plugins/tags/vertical-tabs/) * [نمایش پیشرفته](https://fa.wordpress.org/plugins/metro-tabs/advanced/) ## امتیازها هنوز هیچ نقدی ارسال نشده است. [بررسی شما](https://wordpress.org/support/plugin/metro-tabs/reviews/#new-post) [مشاهدهٔ همهٔ بررسی‌ها](https://wordpress.org/support/plugin/metro-tabs/reviews/) ## مشارکت کنندگان * [ Ciprian Popescu ](https://profiles.wordpress.org/butterflymedia/) ## پشتیبانی چیزی برای گفتن دارید؟ نیاز به کمک دارید؟ [مشاهده انجمن پشتیبانی](https://wordpress.org/support/plugin/metro-tabs/) ## کمک مالی آیا تمایل دارید از پیشرفت این افزونه حمایت کنید؟ [ کمک مالی به این افزونه ](https://buymeacoffee.com/wolffe)