You are here:  Home » PHP » 如何在WordPress中添加jQuery Tabber小部件

您是否在热门网站上看到了一个标签区,只需点击一下即可查看热门,近期和精选帖​​子?这称为jQuery tabber小部件,它允许您通过将不同的小部件合并为一个来节省用户屏幕上的空间。在本文中,我们将向您展示如何在WordPress添加jQuery Tabber Widget。

A jQuery powered tabber widget in WordPress

为什么要添加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脚本。

让我们从 wpb-tabber-widget.php 文件开始。此文件的目的是创建一个注册窗口小部件的插件。如果这是您第一次创建WordPress小部件,那么我们建议您查看我们如何创建自定义WordPress小部件指南,或者只是复制并粘贴此代码在 wpb-tabber-widget.php中文件:

<?php
/* Plugin Name: WPBeginner jQuery Tabber Widget
Plugin URI: https://www.wpbeginner.com
Description: A simple jquery tabber widget.
Version: 1.0
Author: WPBeginner
Author URI: https://www.wpbeginner.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",
		"WPBeginner 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
?>

<ul class="tabs">
<li class="active"><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
</ul>

<div class="tab_container">

<div id="tab1" class="tab_content">
<?php 
// Enter code for tab 1 here. 
?>
</div>

<div id="tab2" class="tab_content" style="display:none;">
<?php 
// Enter code for tab 2 here. 
?>
</div>

<div id="tab3" class="tab_content" style="display:none;">
<?php 
// Enter code for tab 3 here. 
?>
</div>

</div>

<div class="tab-clear"></div>

<?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);

现在,我们的小部件已准备好使用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将 wpbeginner-tabber-widget 文件夹上传到您的WordPress网站的 / wp-content / plugins / 目录。或者,您也可以将文件夹添加到zip存档并转到插件»在WordPress管理区域添加新的。单击上载选项卡以安装插件。一旦插件被激活,转到外观»Widgets ,将WPBeginner Tabber Widget拖放到侧边栏,就是这样。

Drag and drop WPBeginner Tabber Widget into your Sidebar

我们希望本教程能帮到你为您的WordPress网站创建一个jQuery tabber。如有问题和反馈,您可以在下方发表评论或在Twitter或Google+上加入我们。

评论被关闭。