在设计网站时，在内容和用户体验之间建立平衡是最终目标。内容可以使用户参与其中，但是如果太多的话，可能会令人不知所措。用户可能会感到困惑，如果找不到想要的东西，他们将离开您的网站。

在满意客户和向他们提供所需的所有信息之间找到平衡可能很困难。尽管如此，还有各种各样的方法可以提供帮助，网站选项卡是其中之一。

选项卡是一种用于对内容进行排序的导航系统，使用户更容易浏览您的网站。幸运的是，WordPress用户可以访问各种WordPress插件so they don’t need to code this feature from scratch.

While there are numerous high-quality tab plugins available, there’s beauty in simplicity. Below is a list of 14 basic WordPress tab plugins that anyone can use. They’re straightforward and perfect for those looking to simply make their site look cleaner with no distractions.

1.WP Tab Widget

This easy-to-use plugin offers a variety of advanced features, allowing you to customize tabs to your liking. The download includes 21 pre-defined templates for tabs, like ‘Related Posts,’ ‘Popular Posts,’ and ‘Recent Comments,’ which makes it perfect for those looking to use tabs to drive user engagement. You can further customize the 21 templates, and no coding knowledge is necessary to do so.

最适合：websites that need a highly customizable, popular, flexible WordPress tabs plugin.

2.Responsive Tabs（由WP Darko撰写）

响应式选项卡是一个简约的插件，非常适合简单，以内容为中心的标签。Tab Editor允许在您的网站上重新安排选项卡，并使用首选的重音颜色进行自定义。

The tab also has a breakpoint feature, meaning that you can decide when your users will see your tabs. The download also allows you to create shortcodes so that tabs can be inserted into HTML and placed on your website pages.

最适合：简单，免费的标签布局，并具有一些基本样式设置。

3.Tabby Responsive Tabs

Tabby Responsive Tabs is highly rated by its users for its semantic headers feature. Semantic headers allow you to denote important content within your tabs with heading markers, like

and

. This gives your readers a clear picture of what content is essential and helps your site rank in search engines.

就格式而言，该插件使用响应式水平选项卡。可以在网站CSS或通过Tabby响应选项卡自定义插件。

最适合：site owners who want a lightweight tabs plugin and are comfortable using CSS to apply styling to their tab sections.

4.Ultimate Blocks

Ultimate Blocks is a one-size-fits-all plugin. The download comes with 19 pre-made templates, including ‘Click to Tweet,’ ‘Content Filter,’ and ‘Star Rating.’ The tab can be made horizontal or vertical, and all further customizations are done individually.

Note that the Ultimate Blocks tab plugin can only be used if the entire Ultimate Blog plugin is downloaded.

最适合：those in need of a comprehensive blocks plugin with a library of engaging page elements, including a block for tabbed content.

5.Wonder Tabs

Wonder Tabs is an essential tab plugin, perfect for adding tabs with no additional functions. The download allows you to choose between vertical or horizontal tabs, and all further customizations must be done by the developer within the HTML.

最适合：对HTML和CSS感到满意的开发人员。

6.Xpert Tabs

XPERT选项卡是一个快捷代码构建器，允许您创建选项卡式内容以在多个页面上显示。五个预设样式可以创建无限量的选项卡，并在哪个页面上显示它们。可以在CSS中进行自定义。

最适合：creating Bootstrap-CSS-based tabbed content sections for free.

7.Squelch Tabs and Accordions Shortcodes

Squelch Tabs is another shortcode tool builder. Tabs can be made vertical or horizontal, and all are accordion style, meaning that they grow and shrink depending on mouse-over input. This can help declutter the website interface without cutting down on your content. The plugin also allows for customizations.

最适合：customizable horizontal accordions, vertical accordions, and tabs placed with shortcodes.

8.Tabs Pro

WP Shopmart tabs download comes with 20 pre-set designs and 30 interactive animation features, giving your users a unique experience. Further customizations can be made to the layout, colors, and fonts if desired. All tabs can feature text, images, and video.

最适合：unlimited, codeless, customizable tabs for a small one-time payment.

9.Responsive Tabs(by Oxilab)

响应式标签非常适合那些在确定选项卡格式之前想评估选项的人。“实时预览”功能使您可以进行自定义并在它们上线之前预览它们。它带有22个预制布局，所有选项卡都具有手风琴功能。

最适合：modern, professional-looking, mobile-friendly tabs and accordions, with pre-built layouts so you won’t need to start from scratch.

10。简单的侧面选项卡

Easy Slide Tab is for those looking to increase user engagement. You can create individual tabs and use them to encourage your users to take a specific action, like signing up for a newsletter, downloading a photo, or purchasing a product. You can also customize the colors and add more tabs.

最适合：free, simple side tabs with basic customization options.

11.Responsive Tabs(by I Thirteen Web Solution)

Responsive Tabs are perfect for those with minimal coding knowledge. You can use the admin tab to create the shortcode, edit the layout, and customize colors and fonts. You can preview changes before they’re live and all tabs have the accordion feature.

最适合：带有简单的无编码自定义的免费水平，垂直和手风琴选项卡。

12.快速代码终极

快捷代码Ultimate是带有标签功能的WordPress插件的集合。它拥有带有实时预览的一键式快捷代码插入，并且可以在CSS中进行编辑。可以自定义颜色，字体和图标，所有选项卡都可以包含图像和视频。

最适合：通过短代码实现数十个页面元素，包括标签内容功能。

13.Custom Product Tabs for WooCommerce

This tab is perfect for sites usingWooCommerce功能. Tabs can be added to products to provide further information to users, like product descriptions and customer reviews. Customizations can be made within the HTML.

最适合：WooCommerce sites with tabbed product pages.

14.Side Tabs

The Side Tabs plugin is unique in that its tabs are displayed as popups. You can place them on the side of any website window, vertically or horizontally, and they appear when a user clicks on them. This is perfect for those wanting users to dictate their own experience on your site. You can customize tabs within the CSS.

请注意，此选项卡需要您下载Green Popups Plugin.

最适合：premium side tabs that trigger popups, lightboxes, or modals.

How can I create WordPress tabs without a plugin?

A WordPress plugin is by far the easiest, most efficient way to put tabs on your website. However, if you’d rather not install a new plugin to implement tabs, your second best bet is to utilize a WordPress page builder plugging that you already have installed. If you utilize one of these plugins, there may not be a need to install another tab plugin on top.

If you use a popular page builder plugin, chances are you can add tabs this way. For example, Elementor has atabs widgetthat’s easy to customize and arrange content tabs horizontally or vertically.

Image Source

相似地，Divi Builder有一个标签模块that can be added and toggled inside the visual builder interface.

Image Source

最后，WPBakery用户可以购买并安装内容选项卡WPBakery附加组件to add responsive, customizable tabs to their websites.

WordPress选项卡示例

For design inspiration, let’s look at some examples of well-executed tabs on WordPress websites. First,Toyota Braziladds tabs to distinguish between its models. Each tab contains asliderwith clickable product cards.

Image Source

For a more unique application of tabs,Nalgene’s WordPress site具有定制器，客户可以在其中设计瓶子。它包括垂直选项卡，使用户可以在左侧选择其瓶类型。

Image Source

Plugin demos are also good sources of inspiration for how tabs could work on your website — here’s the demo page for theTabs Proplugin, which has numerous examples of the plugin in action. Here’s just one example:

Image Source

WordPress插件标签来组织你的网站

总而言之，标签旨在使网站的用户体验更轻松。您可以向用户显示所有必要的内容，而无需承受压倒它们并让他们离开网站的风险。反过来，您的标签不应分散您的内容，而简约的设计可以帮助确保这一点。

Editor's note: This post was originally published in September 2020 and has been updated for comprehensiveness.