你是否在一些热门网站上看过一个可以通过点击查看热门、最近和推荐文章的标签区？这叫做jQuery Tabber Widget，它可以通过将不同的部件组合在一起来节省用户屏幕空间。在本文中，我们将向你展示如何在WordPress中添加jQuery Tabber Widget。
为什么要添加jQuery Tabber Widget？
当运营一个WordPress网站时，你可以通过拖放部件轻松地将项目添加到侧边栏。随着你网站的增长，你可能会觉得侧边栏的空间不够用，无法展示所有的有用内容。这时，Tabber 就派上用场了。它允许你在同一区域显示不同的项目。用户可以点击每个标签，查看他们最感兴趣的内容。很多大网站都用它来展示当日、本周和本月的热门文章。在本教程中，我们将向你展示如何创建一个Tabber 容器，但不会详细介绍该显示什么内容。你可以添加任何你想要的内容。
创建jQuery Tabber Widget
让我们开始吧。首先，你需要在桌面上创建一个文件夹，命名为wpbpressize-me-tabber-widget。接着，用纯文本编辑器（如Notepad）在该文件夹中创建三个文件。
第一个要创建的文件是wpb-tabber-widget.php。它将包含创建标签和自定义WordPress小工具的HTML和PHP代码。第二个文件是wpb-tabber-style.css，它将包含标签容器的CSS样式。第三个文件是wpb-tabber.js，它将包含用于切换标签和添加动画的jQuery脚本。
让我们从wpb-tabber-widget.php文件开始。此文件的目的是创建一个注册小工具的插件。如果这是你第一次创建WordPress小工具，我们建议你先查看我们的如何创建自定义WordPress小工具的指南，或者直接将以下代码复制粘贴到wpb-tabber-widget.php文件中：
<?php
/* Plugin Name: WPressize Me jQuery Tabber Widget
Plugin URI: https://www.wpressizeme.com
Description: A simple jquery tabber widget.
Version: 1.0
Author: WPressize Me
Author URI: https://www.wpressizeme.com
License: GPL2
*/
// creating a widget
class WPBTabberWidget extends WP_Widget {
function WPBTabberWidget() {
$widget_ops = array(
'classname' => 'WPBTabberWidget',
'description' => 'Simple jQuery Tabber Widget'
);
$this->WP_Widget(
'WPBTabberWidget',
'WPressize Me Tabber Widget',
$widget_ops
);
}
function widget($args, $instance) { // widget sidebar output
function wpb_tabber() {
// Now we enqueue our stylesheet and jQuery script
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-tabber-style');
wp_enqueue_script('wpb-tabber-widget-js');
// Creating tabs you will be adding you own code inside each tab
?>
<?php
// Enter code for tab 1 here.
?>
<?php
// Enter code for tab 2 here.
?>
<?php
// Enter code for tab 3 here.
?>
<?php
}
extract($args, EXTR_SKIP);
// pre-widget code from theme
echo $before_widget;
$tabs = wpb_tabber();
// output tabs HTML
echo $tabs;
// post-widget code from theme
echo $after_widget;
}
}
// registering and loading widget
add_action(
'widgets_init',
create_function('','return register_widget("WPBTabberWidget");')
);
?>
在上面的代码中，我们首先创建了一个插件，然后在该插件中创建了一个小工具。在小工具的输出部分，我们添加了脚本和样式表，然后生成了标签的HTML输出。最后我们注册了这个小工具。你还需要添加你希望显示在每个标签中的内容。
现在我们已经使用PHP和HTML代码创建了标签小工具，下一步是添加jQuery以在标签容器中显示它们。为此，你需要将以下代码复制并粘贴到wp-tabber.js文件中。
(function($) {
$(".tab_content").hide();
$("ul.tabs li:first").addClass("active").show();
$(".tab_content:first").show();
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).find("a").attr("href");
//$(activeTab).fadeIn();
if ($.browser.msie) {$(activeTab).show();}
else {$(activeTab).fadeIn();}
return false;
});
})(jQuery);
现在我们的小工具已经准备好了，最后一步是为标签添加样式。我们已经创建了一个示例样式表，你可以将其复制到wpb-tabber-style.css文件中。
ul.tabs {
position: relative;
z-index: 1000;
float: left;
border-left: 1px solid #C3D4EA;
}
ul.tabs li {
position: relative;
overflow: hidden;
height: 26px;
float: left;
margin: 0;
padding: 0;
line-height: 26px;
background-color: #99B2B7;
border: 1px solid #C3D4EA;
border-left: none;
}
ul.tabs li a {
display: block;
padding: 0 10px;
outline: none;
text-decoration: none;
}
html ul.tabs li.active, html ul.tabs li.active a:hover {
background-color: #D5DED9;
border-bottom: 1px solid #D5DED9;
}
.widget-area .widget .tabs a {
color: #FFFFFF;
}
.tab_container {
position: relative;
top: -1px;
z-index: 999;
width: 100%;
float: left;
font-size: 11px;
background-color: #D5DED9;
border: 1px solid #C3D4EA;
}
.tab_content {
padding: 7px 11px 11px 11px;
line-height: 1.5;
}
.tab_content ul {
margin: 0;
padding: 0;
list-style: none;
}
.tab_content li {
margin: 3px 0;
}
.tab-clear {
clear: both;
}
这就是全部了。现在，只需通过FTP将wpressize-me-tabber-widget文件夹上传到你WordPress网站的/wp-content/plugins/目录。或者，你也可以将该文件夹添加到一个压缩档，并进入WordPress后台的插件»添加新插件页面，然后点击上传标签来安装插件。插件激活后，进入外观»小工具页面，拖放WPressize Me Tabber Widget到你的侧边栏即可。
我们希望本教程能帮助你为WordPress网站创建一个jQuery Tabber。如有问题和反馈，可以在下面留言或在Twitter或Google+上与我们互动。
