你有没有在热门网站上看到一个tabber区域，让你只需点击一下就可以看到流行的，最近的和精选的帖子？ 这被称为jQuery tabber小部件，它允许您通过将不同的小部件组合到一个中来节省用户屏幕上的空间。 在本文中，我们将向您展示如何在WordPress中添加一个jQuery Tabber Widget。
为什么你应该添加一个jQuery Tabber控件？
运行WordPress网站时，可以使用拖放小部件轻松地将项目添加到侧边栏。 随着网站的增长，您可能会觉得在侧边栏没有足够的空间来显示所有有用的内容。 这正好是一个tabber派上用场的时候。 它可以让你在同一个区域显示不同的项目。 用户可以点击每个标签，看到他们最感兴趣的内容。许多大牌网站使用它来显示今天，本周和本月流行的文章。 在本教程中，我们将向您展示如何创建一个tabber小部件。 但是，我们没有向您显示在标签中添加什么内容。 你可以添加任何你喜欢的东西。
注意：本教程适用于中级用户，需要HTML和CSS知识。 对于初学者级别的用户请参考这篇文章。
在WordPress中创建jQuery Tabber Widget
让我们开始吧。 首先你需要在桌面上创建一个文件夹并命名 站点焊接设备的小部件 。 之后，您需要使用记事本等纯文本编辑器在此文件夹内创建三个文件。
我们要创建的第一个文件是 WPB-焊接设备，widget.php 。 它将包含HTML和PHP代码来创建标签和一个自定义的WordPress小部件。 我们将创建的第二个文件是 WPB-焊接设备，style.css文件 ，它将包含标签容器的CSS样式。 我们将创建的第三个和最后一个文件是 WPB-tabber.js ，其中将包含切换标签和添加动画的jQuery脚本。
我们开始吧 WPB-焊接设备，widget.php 文件。 这个文件的目的是创建一个插件来注册一个小部件。 如果这是您第一次创建WordPress小部件，那么我们建议您查看我们如何创建自定义WordPress小部件指南，或者直接复制并粘贴此代码 WPB-焊接设备，widget.php 文件：
现场
插件URI：http://www.site.com
描述：一个简单的jquery tabber小部件。
版本：1.0
作者：网站
作者URI：http://www.site.com
许可证：GPL2
* /
//创建一个小部件
WPBTabberWidget类扩展了WP_Widget {
函数WPBTabberWidget（）{
$ widget_ops = array（
'classname'=>'WPBTabberWidget'，
'description'=>'简单的jQuery Tabber Widget'
）;
$这个 - > WP_Widget（
'WPBTabberWidget'，
'站点Tabber Widget'，
$ widget_ops
）;
}
函数小部件（$ args，$ instance）{//小部件边栏输出
函数wpb_tabber（）{
//现在我们排队我们的样式表和jQuery脚本
wp_register_style（'wpb-tabber-style'，plugins_url（'wpb-tabber-style.css'，__FILE__））;
wp_register_script（'wpb-tabber-widget-js'，plugins_url（'wpb-tabber.js'，__FILE__），array（'jquery'））;
wp_enqueue_style（ 'WPB-焊接设备风格'）;
wp_enqueue_script（ 'WPB-焊接设备的小部件-JS'）;
//创建选项卡，您将在每个选项卡中添加自己的代码
？>
- 选项卡1
- 标签2
- Tab 3
在上面的代码中，我们首先创建了一个插件，然后在该插件中创建了一个小部件。 在小部件输出部分，我们添加了脚本和样式表，然后我们为我们的标签生成了HTML输出。 最后我们注册了这个小部件。 请记住，您需要添加要在每个选项卡上显示的内容。
现在我们已经创建了使用我们的标签页所需的PHP和HTML代码的小部件，下一步是添加jQuery将它们显示为标签容器中的标签页。 要做到这一点，你需要复制和粘贴这个代码 WP-tabber.js 文件。
（function（$）{
$（ “tab_content”）隐藏（）。
$（“ul.tabs li：first”）。addClass（“active”）。show（）;
$（ “tab_content：第一”）显示（）。
$（“ul.tabs li”）。click（function（）{
$（“ul.tabs li”）。removeClass（“active”）;
$（本）.addClass（ “活动”）;
$（ “tab_content”）隐藏（）。
var activeTab = $（this）.find（“a”）。attr（“href”）;
// $（activeTab）.fadeIn（）;
if（$ .browser.msie）{$（activeTab）.show（）;}
else {$（activeTab）.fadeIn（）;}
返回false;
}）;
}）（jQuery的）;
现在我们的小部件已经准备好了jQuery，最后一步是添加样式到标签。 我们已经创建了一个样本样式表，您可以复制并粘贴 WPB-焊接设备，style.css文件 文件：
ul.tabs {
位置：相对;
z-index：1000;
向左飘浮;
border-left：1px solid＃C3D4EA;
}
ul.tabs li {
位置：相对;
溢出：隐藏;
身高：26px;
向左飘浮;
保证金：0;
填充：0;
line-height：26px;
背景颜色：＃99B2B7;
border：1px solid＃C3D4EA;
border-left：none;
}
ul.tabs li a {
显示：块;
填充：0 10px;
大纲：无;
文字修饰：无;
}
html ul.tabs li.active，
html ul.tabs li.active a：hover {
背景颜色：＃D5DED9;
border-bottom：1px solid＃D5DED9;
}
.widget-area .widget .tabs a {
颜色：#FFFFFF;
}
.tab_container {
位置：相对;
top：-1px;
z-index：999;
宽度：100％;
向左飘浮;
font-size：11px;
背景颜色：＃D5DED9;
border：1px solid＃C3D4EA;
}
.tab_content {
padding：7px 11px 11px 11px;
行高：1.5;
}
.tab_content ul {
保证金：0;
填充：0;
list-style：none;
}
.tab_content li {
margin：3px 0;
}
.tab-clear {
明确：两者;
}
现场
现场
我们希望这个教程帮助你为你的WordPress站点创建一个jQuery tabber。 对于问题和反馈，您可以在下面留言或加入我们的Twitter或Google+。