Wie man jQuery Tabber Widget in WordPress hinzufügt

Kennen Sie den Tabber-Bereich auf beliebten Websites, der es Ihnen ermöglicht, mit nur einem Klick beliebte, aktuelle und vorgestellte Beiträge anzuzeigen? Dies wird jQuery Tabber Widget genannt und ermöglicht es Ihnen, Platz auf dem Benutzerbildschirm zu sparen, indem Sie verschiedene Widgets in einem einzigen zusammenfassen. In diesem Artikel zeigen wir Ihnen, wie Sie ein jQuery Tabber Widget in WordPress hinzufügen können.

Warum sollten Sie ein jQuery Tabber Widget hinzufügen?

Wenn Sie eine WordPress-Website betreiben, können Sie mit Hilfe von Drag-and-Drop-Widgets ganz einfach Elemente zu Ihren Seitenleisten hinzufügen. Wenn Ihre Website wächst, haben Sie vielleicht das Gefühl, dass Sie nicht genug Platz in der Seitenleiste haben, um alle nützlichen Inhalte zu zeigen. Genau in diesem Fall ist ein Tabber sehr nützlich. Er ermöglicht es Ihnen, verschiedene Elemente in einem Bereich zu zeigen. Die Benutzer können auf jeden Tab klicken und den Inhalt sehen, der sie am meisten interessiert. Viele bekannte Websites verwenden ihn, um beliebte Artikel von heute, dieser Woche und diesem Monat anzuzeigen. In diesem Tutorial zeigen wir Ihnen, wie Sie ein Tabber-Widget erstellen. Wir zeigen Ihnen jedoch nicht, was Sie in Ihre Tabs einfügen sollen. Sie können im Grunde alles hinzufügen, was Sie möchten.

Hinweis: Dieses Tutorial richtet sich an fortgeschrittene Benutzer und setzt HTML- und CSS-Kenntnisse voraus. Für Anfänger lesen Sie bitte stattdessen diesen Artikel.

Erstellen von jQuery Tabber Widget in WordPress

Fangen wir an. Als erstes müssen Sie einen Ordner auf Ihrem Desktop erstellen und ihn wpbeginner-tabber-widget nennen. Danach müssen Sie drei Dateien innerhalb dieses Ordners mit einem einfachen Texteditor wie Notepad erstellen.

Die erste Datei, die wir erstellen werden, ist wpb-tabber-widget.php. Sie enthält HTML- und PHP-Code zur Erstellung von Registerkarten und eines benutzerdefinierten WordPress-Widgets. Die zweite Datei, die wir erstellen werden, heißt wpb-tabber-style.css und enthält das CSS-Styling für den Tabs-Container. Die dritte und letzte Datei, die wir erstellen werden, ist wpb-tabber.js, die das jQuery-Skript für das Umschalten der Registerkarten und das Hinzufügen von Animationen enthalten wird.

Lassen Sie uns mit der Datei wpb-tabber-widget.php beginnen. Der Zweck dieser Datei ist es, ein Plugin zu erstellen, das ein Widget registriert. Wenn Sie zum ersten Mal ein WordPress-Widget erstellen, empfehlen wir Ihnen, einen Blick in unsere Anleitung zur Erstellung eines benutzerdefinierten WordPress-Widgets zu werfen oder einfach diesen Code zu kopieren und in die Datei wpb-tabber-widget.php einzufügen:

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

Im obigen Code haben wir zuerst ein Plugin und dann innerhalb dieses Plugins ein Widget erstellt. Im Abschnitt für die Widget-Ausgabe haben wir Skripte und Stylesheets hinzugefügt und dann die HTML-Ausgabe für unsere Registerkarten generiert. Zum Schluss haben wir das Widget registriert. Denken Sie daran, dass Sie den Inhalt, den Sie auf jeder Registerkarte anzeigen möchten, hinzufügen müssen.

Nachdem wir nun das Widget mit dem PHP- und HTML-Code für unsere Registerkarten erstellt haben, müssen wir im nächsten Schritt jQuery hinzufügen, um sie als Registerkarten im Registerkarten-Container anzuzeigen. Dazu müssen Sie diesen Code kopieren und in die Datei wp-tabber.js einfügen.

(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("aktiv");
$(".tab_content").hide();
var activeTab = $(this).find("a").attr("href");
//$(activeTab).fadeIn();
if ($.browser.msie) {$(activeTab).show();}
sonst {$(activeTab).fadeIn();}
return false;
});
})(jQuery);

Jetzt ist unser Widget mit jQuery fertig, der letzte Schritt ist das Hinzufügen von Styling zu den Tabs. Wir haben ein Beispiel-Stylesheet erstellt, das Sie kopieren und in die Datei wpb-tabber-style.css einfügen können:

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;
}

Das war’s schon. Laden Sie nun einfach den Ordner wpbeginner-tabber-widget per FTP in das Verzeichnis /wp-content/plugins/ Ihrer WordPress-Website hoch. Alternativ können Sie den Ordner auch in ein Zip-Archiv packen und in Ihrem WordPress-Adminbereich auf Plugins “ Neu hinzufügen gehen. Klicken Sie auf die Registerkarte Upload, um das Plugin zu installieren. Sobald das Plugin aktiviert ist, gehen Sie zu Erscheinungsbild “ Widgets, ziehen Sie das WPBeginner Tabber Widget in Ihre Seitenleiste und das war’s.

Wir hoffen, dass dieses Tutorial Ihnen geholfen hat, einen jQuery Tabber für Ihre WordPress Seite zu erstellen. Für Fragen und Feedback können Sie unten einen Kommentar hinterlassen oder uns auf Twitter oder Google+ folgen.