如何在 WordPress 中添加 jQuery Tabber 小部件

[Mostafa044]

您是否知道热门网站上的 Tabber 部分，只需单击一下即可查看热门、最近和精选帖子？这称为 jQuery Tabber Widget，允许您通过将不同的小部件组合成一个小部件来节省用户屏幕空间。在本文中，我们将向您展示如何在 WordPress 中添加 jQuery Tabber 小部件。

WordPress 中由 jQuery 提供支持的 tabber 小部件

为什么要添加 jQuery Tabber 小部件？
如果您运行 WordPress 网站，则可以使用拖放小部件轻松将元素添 人力资源副总裁电子邮件列表 加到侧边栏。随着您网站的发展，您可能会觉得没有足够的侧边栏空间来显示所有有用的内容。这正是 tabber 派上用场的地方。它允许您在一个区域中显示不同的元素。用户可以单击任何选项卡并查看他们最感兴趣的内容。许多热门网站使用它来显示今天、本周和本月的热门文章。在本教程中，我们将向您展示如何创建 Tabber 小部件。但是，我们不会向您展示要在选项卡中放入的内容。基本上你可以添加任何你想要的东西。

注意：本教程面向高级用户，并假设您了解 HTML 和 CSS。对于初学者，请阅读这篇文章。

在 WordPress 中创建 jQuery Tabber 小部件
让我们开始吧。您需要做的第一件事是在桌面上创建一个文件夹并wpbeginner-tabber-widget为其命名。之后，您需要使用记事本等简单的文本编辑器在此文件夹中创建三个文件。

我们将创建的第一个文件是wpb-tabber-widget.php.它包括用于创建选项卡和自定义 WordPress 小部件的 HTML 和 PHP 代码。我们将创建的第二个文件名为wpb-tabber-style.css，其中包含选项卡容器的 CSS 样式。我们将创建的第三个也是最后一个文件是wpb-tabber.js，它将包含用于切换选项卡和添加动画的 jQuery 脚本。