跳到主要内容

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

如何在wordpress中添加jquery Tabber Widget
如何在wordpress中添加jquery Tabber Widget

为什么要添加jQuery Tabber小部件?

在运行WordPress网站时,您可以使用拖放小部件轻松地将项目添加到侧栏中。随着网站的发展,您可能会觉得侧边栏中没有足够的空间来显示所有有用的内容。正是在这样的情况下,开瓶器才派上用场。它允许您在同一区域显示不同的项目。用户可以单击每个选项卡,查看他们最感兴趣的内容。许多知名网站都使用它来显示今天,本周和本月的热门文章。在本教程中,我们将向您展示如何创建Tabber小部件。但是,我们没有向您显示在选项卡中添加的内容。您基本上可以添加任何您喜欢的东西。

注意:本教程适用于中级用户,并且需要HTML和CSS知识。对于初学者级别的用户,请参阅本文。

在WordPress中创建jQuery Tabber Widget

让我们开始吧。您需要做的第一件事是在桌面上创建一个文件夹并命名wpbeginner-tabber-widget。之后,您需要使用纯文本编辑器(如记事本)在此文件夹中创建三个文件。

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

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

<?php/* Plugin Name: WPBeginner jQuery Tabber WidgetPlugin URI: https://www.wpbeginner.comDescription: A simple jquery tabber widget.Version: 1.0Author: WPBeginnerAuthor URI: https://www.wpbeginner.comLicense: GPL2*/
// creating a widgetclassWPBTabberWidget extendsWP_Widget {
functionWPBTabberWidget() {        $widget_ops= array(        'classname'=> 'WPBTabberWidget',        'description'=> 'Simple jQuery Tabber Widget');$this->WP_Widget(        'WPBTabberWidget',        'WPBeginner Tabber Widget',        $widget_ops);}functionwidget($args, $instance) { // widget sidebar output
functionwpb_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 themeecho$before_widget; $tabs= wpb_tabber(); // output tabs HTMLecho$tabs; // post-widget code from themeecho$after_widget; }}
// registering and loading widgetadd_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();varactiveTab = $(this).find("a").attr("href");//$(activeTab).fadeIn();if($.browser.msie) {$(activeTab).show();}else{$(activeTab).fadeIn();}returnfalse;});})(jQuery);

现在我们的小部件已经可以使用jQuery,最后一步是向选项卡添加样式。我们创建了一个示例样式表,您可以将其复制并粘贴到wpb-tabber-style.css文件中:

ul.tabs { position: relative; z-index: 1000; float: left; border-left: 1pxsolid#C3D4EA; }ul.tabs li {position: relative; overflow: hidden; height: 26px; float: left; margin: 0; padding: 0; line-height: 26px; background-color: #99B2B7;border: 1pxsolid#C3D4EA; border-left: none; }ul.tabs li  a{ display: block; padding: 010px; outline: none; text-decoration: none;}html ul.tabs li.active, html ul.tabs li.active a:hover { background-color: #D5DED9; border-bottom: 1pxsolid#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: 1pxsolid#C3D4EA;}.tab_content { padding: 7px11px11px11px;line-height: 1.5;}.tab_content ul { margin: 0;padding: 0; list-style: none; }.tab_content li { margin: 3px0; }.tab-clear {clear:both;}

就这样。现在,只需通过FTP将wpbeginner-tabber-widget文件夹上传到您的WordPress网站/wp-content/plugins/目录即可。或者,您也可以将该文件夹添加到zip存档中,然后在WordPress管理区域中转到“插件”»“添加新内容”。单击上载选项卡以安装插件。激活插件后,转到外观»窗口小部件,将WPBeginner Tabber窗口小部件拖放到侧边栏,仅此而已。

在wordpress中创建jquery Tabber Widget
在wordpress中创建jquery Tabber Widget

我们希望本教程可以帮助您为WordPress网站创建jQuery tabber。

回到顶部