Haben Sie schon einmal einen Tab-Bereich auf beliebten Websites gesehen, der es Ihnen ermöglicht, beliebte, aktuelle und vorgestellte Beiträge mit nur einem Klick anzuzeigen? Dies wird als jQuery-Tabber-Widget bezeichnet und ermöglicht es Ihnen, Platz auf dem Bildschirm des Benutzers zu sparen, indem verschiedene Widgets zu einem kombiniert werden. In diesem Artikel zeigen wir Ihnen, wie Sie ein jQuery-Tabber-Widget in WordPress hinzufügen.
Warum Sie ein jQuery-Tab-Widget hinzufügen sollten?
Wenn Sie eine WordPress-Website betreiben, können Sie mit Drag-and-Drop-Widgets ganz einfach Elemente zu Ihren Seitenleisten hinzufügen. Wenn Ihre Website wächst, stellen Sie möglicherweise fest, dass Sie nicht genügend Platz in der Seitenleiste haben, um alle nützlichen Inhalte anzuzeigen. Genau dann ist ein Tabber nützlich. Er ermöglicht es Ihnen, verschiedene Elemente im selben Bereich anzuzeigen. Benutzer können auf jeden Tab klicken und die Inhalte sehen, die sie am meisten interessieren. Viele bekannte Websites nutzen ihn, um beliebte Artikel des Tages, der Woche und des Monats 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 Benutzer mit mittleren Kenntnissen und erfordert Kenntnisse in HTML und CSS. Anfänger sollten stattdessen diesen Artikel lesen.
Erstellen eines jQuery-Tabber-Widgets in WordPress
Lassen Sie uns beginnen. Als Erstes müssen Sie einen Ordner auf Ihrem Desktop erstellen und ihn wpbeginner-tabber-widget nennen. Danach müssen Sie drei Dateien in diesem Ordner mit einem einfachen Texteditor wie Notepad erstellen.
Die erste Datei, die wir erstellen werden, ist wpb-tabber-widget.php. Sie wird HTML- und PHP-Code zum Erstellen von Tabs und einem benutzerdefinierten WordPress-Widget enthalten. Die zweite Datei, die wir erstellen werden, ist wpb-tabber-style.css, und sie wird CSS-Styling für den Tab-Container enthalten. Die dritte und letzte Datei, die wir erstellen werden, ist wpb-tabber.js, die das jQuery-Skript zum Wechseln von Tabs und Hinzufügen von Animationen enthalten wird.
Beginnen wir mit der Datei wpb-tabber-widget.php. Der Zweck dieser Datei ist es, ein Plugin zu erstellen, das ein Widget registriert. Wenn dies deine erste WordPress-Widget-Erstellung ist, empfehlen wir dir, einen Blick auf unsere Anleitung zum Erstellen eines benutzerdefinierten WordPress-Widgets zu werfen oder einfach diesen Code in die Datei wpb-tabber-widget.php zu kopieren und 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 erstellt und dann innerhalb dieses Plugins ein Widget. Im Widget-Ausgabebereich haben wir Skripte und Stylesheets hinzugefügt und dann die HTML-Ausgabe für unsere Tabs generiert. Schließlich haben wir das Widget registriert. Denken Sie daran, dass Sie den Inhalt hinzufügen müssen, den Sie in jedem Tab anzeigen möchten.
Jetzt, da wir das Widget mit dem benötigten PHP- und HTML-Code für unsere Tabs erstellt haben, ist der nächste Schritt das Hinzufügen von jQuery, um sie als Tabs im Tab-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("active");
$(".tab_content").hide();
var activeTab = $(this).find("a").attr("href");
//$(activeTab).fadeIn();
if ($.browser.msie) {$(activeTab).show();}
else {$(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 eine Beispiel-Stylesheet erstellt, die Sie in die Datei wpb-tabber-style.css kopieren und 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 ist alles. Laden Sie nun den Ordner wpbeginner-tabber-widget über FTP in das Verzeichnis /wp-content/plugins/ Ihrer WordPress-Site hoch. Alternativ können Sie den Ordner auch in ein ZIP-Archiv packen und im WordPress-Adminbereich zu Plugins » Neu hinzufügen gehen. Klicken Sie auf den Upload-Tab, um das Plugin zu installieren. Sobald das Plugin aktiviert ist, gehen Sie zu Darstellung » Widgets, ziehen Sie das WPBeginner Tabber Widget per Drag & Drop in Ihre Seitenleiste und das war's.
Wir hoffen, dass dieses Tutorial Ihnen geholfen hat, einen jQuery-Tabber für Ihre WordPress-Website zu erstellen. Für Fragen und Feedback können Sie unten einen Kommentar hinterlassen oder uns auf Twitter oder Google+ beitreten.
Nitish Chauhan
Hallo,
Mein Plugin ist aktiviert, aber im Widget-Bereich wird die Meldung „Es gibt keine Optionen für dieses Widget.“ angezeigt. Bitte sagen Sie mir, wie ich alle Funktionen aktivieren kann, und ich möchte ein Plugin wie dieses erstellen:
“jQuery(document).ready(function() {
var wrapper = jQuery(“.input_fields_wrap”); //Fields wrapper
var add_button = jQuery(“.add_field_button”); //Add button ID
//Anfang der Textfeldanzahl
jQuery(add_button).click(function(e){ //beim Klick auf den Hinzufügen-Button
e.preventDefault();
//maximal erlaubte Textfelder
//Textfeld-Inkrement
jQuery(wrapper).prepend(‘×’); //Textfeld hinzufügen
jQuery(‘.input_fields_wrap’).sortable();
jQuery(‘.input_fields_wrap’).disableSelection();
});
jQuery(wrapper).on(“click”,”.remove_field”, function(e){ //Benutzer klickt auf Text entfernen
e.preventDefault(); jQuery(this).parent(‘div’).remove();
});
});”
Mein JavaScript-Code. Bitte geben Sie Vorschläge, wenn Sie eine Lösung haben.
Danke
Nabam Rikam
Ich habe die Plugins in die Seitenleiste eingefügt, aber wenn ich versuche, darauf zu klicken, heißt es, es gibt keine Option für dieses Plugin. Und nachdem wir es auf der Website durchsuchen, sehen wir drei leere Tabs. Führen Sie mich hier ein wenig, Bruder.
goutham
Ich bekomme keine Tabs oder Widgets auf meiner Website. Ich habe denselben Code kopiert und eingefügt. Es funktioniert nicht.
Kunle
Ich möchte das gerade erstellte Plugin an einer Stelle auf meiner Seite platzieren und nicht in den Seitenleisten oder im Footer.
Wie mache ich das, um es irgendwo auf meiner Webseite zu platzieren?
Zadius
Dies ist das zweite Tutorial, das ich ausprobiert habe, und aus irgendeinem Grund wird die Plugin-Datei nicht im Plugin-Verzeichnis meiner Website angezeigt. Ich lade die Datei direkt per FTP hoch, aber wenn ich mich in meinem WordPress-Adminbereich anmelde, erscheint nichts unter dem Tab "Plugins". Bitte um Rat. Vielen Dank.
Update: Ich habe die Datei gezippt und über die WordPress-Plugin-Oberfläche hochgeladen. Die Datei erscheint nicht in meinem Plugin-Ordner auf meiner FTP-Oberfläche, daher habe ich keine Ahnung, wo sie angezeigt wird. Aber ich habe sie installiert, also danke!
John
Vielen Dank für das Tutorial. Mir ist jedoch aufgefallen, dass der Titel fehlt, wenn ich das Widget zum Widget-Bereich hinzufüge. Wie kann ich den Titelbereich hinzufügen, um einen Titel einzugeben?
Drazen
Hallo
Danke dafür. Ich habe mich gerade gefragt, wie ich eine Option hinzufügen kann, damit ich beim Betrachten des Widgets einfach Links darin einfügen kann, in jedem Tab?
Zum Beispiel:
Tab 1 (Option zum Umbenennen in den Widget-Optionen)
– Textfeld darunter in den Widget-Optionen (damit ich Text, Links usw. hinzufügen kann)
Registerkarte 2 (Option zum Umbenennen in den Widget-Optionen)
– Textfeld darunter in den Widget-Optionen (damit ich Text, Links usw. hinzufügen kann)
Tab 3 (Option, ihn in den Widget-Optionen umzubenennen)
– Textfeld darunter in den Widget-Optionen (damit ich Text, Links usw. hinzufügen kann)
Danke
Gavin Wilshen
Brillantes Tutorial. Danke, Leute!
Grant
Es gibt mir immer wieder diesen Fehler:
Plugin konnte nicht aktiviert werden, da es einen fatalen Fehler ausgelöst hat.
Parse error: syntax error, unexpected T_NS_SEPARATOR, expecting T_STRING in /home/content/11/10826211/html/wp-content/plugins/wpbeginner-tabber-widget/wpb-tabber-widget.php on line 16
WPBeginner Support
Grant, wir haben den Code gerade noch einmal überprüft. Das Plugin wurde bei uns problemlos aktiviert.
Admin
Rahul
Danke Mann, du bist ein Genie. Ich wollte gerade ein Premium-Plugin von CodeCanyon kaufen und habe dann diese Anleitung gefunden.
Jonathan
Warum wird bei der Installation dieses Plugins angezeigt, dass es aktualisiert werden muss, und die Aktualisierung stammt von einem anderen Entwickler & ist über 3 Jahre alt?
WPBeginner Support
Das sollte nicht passieren. Wenn Sie den Plugin-Namen geändert haben und er mit einem anderen Plugin übereinstimmt, würde WordPress ihn mit dem anderen Plugin verwechseln.
Admin
Jonathan
Ich habe nichts geändert; ich habe nur genau das getan, was Sie oben gezeigt haben.
Jonathan
Dies ist das Plugin, für das WordPress es hält und das es aktualisieren möchte. http://wordpress.org/plugins/tabber-widget/
Ich habe gerade das Plugin auf Version 2.0 aktualisiert, und das hat (aus welchem Grund auch immer) dazu geführt, dass es nicht mehr nach dem Update auf das andere Plugin fragt. Ich würde versuchen, das andere Plugin umzubenennen und seine Informationen zu ändern, aber das war das Einzige, was zu funktionieren schien.
WPBeginner Support
The only reason we can think of is that you probably named the plugin file or folder to tabber-widget.php instead of wpb-tabber-widget.php which caused WordPress to confuse the plugin with this other one. The version trick is ok too until this other plugin releases 2.0+
so its bed to clear the confusion.
WPBeginner Support
Wir konnten dies nicht reproduzieren. Haben Sie Zugriff auf eine andere WordPress-Seite, auf der Sie dies ausprobieren können, nur um zu testen, ob bei Ihnen alles in Ordnung ist?
Doris
Das widerspricht doch dem Sinn von WordPress, dynamisch zu sein, oder? Text fest in ein Widget einbauen? Gibt es eine Möglichkeit, dynamische Inhalte aus der Datenbank abzurufen? Wir Noobs haben nicht viel Programmiererfahrung, wisst ihr... Man sollte meinen, es gäbe ein Plugin, das das kann...
WPBeginner Support
Dieses Tutorial richtet sich an Benutzer mit mittleren Kenntnissen und das Ziel ist es, ihnen zu zeigen, wie man ein Tabber-Widget erstellt. Für Anfänger gibt es mehrere integrierte Vorlagen-Tags, die dynamisch Inhalte innerhalb jedes Tabs generieren können. Zum Beispiel:
Zeigen Sie eine Liste Ihrer WordPress-Seiten an:
<ul> <?php wp_list_pages('title_li='); ?> </ul>1-click Use in WordPress
Zufällige Beiträge anzeigen:
<ul> <?php $posts = get_posts('orderby=rand&numberposts=5'); foreach($posts as $post) { ?> <li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a> </li> <?php } ?> </ul>1-click Use in WordPress
Neueste Kommentare anzeigen:
1-click Use in WordPress
Und viele mehr.
Admin
manoj sakhwar
Schöner Artikel. Danke...
Grant
Was ich nicht verstehe, ist, wohin ich den Code einfügen soll. In welche Art von Dokument füge ich den Code ein? (Ich habe einen Mac).
WPBeginner Support
Verwenden Sie TextEdit, um diese Dateien zu erstellen.
Admin
Keith Davis
Liebe diesen hier, Leute.
Ich suche immer nach Wegen, um begrenzten Platz besser zu nutzen.
Jim Davis
Habe die Dateien installiert und das Widget aktiviert. Es wird wie erwartet angezeigt, aber das Klicken auf die Tabs 2 und 3 ändert den Inhalt nicht. Der Inhalt bleibt der Inhalt unter Tab 1. Habe ich etwas übersehen? Sehen Sie meine Testseite unter http://jimdavis.org/blog/
Jim
WPBeginner Support
Jim, du hast nichts verpasst. Dies ist ein Beispiel-Widget, das du bearbeiten kannst. Gib deinen eigenen Code und Inhalt in jeden Tab ein, indem du die Plugin-Datei wpb-tabber-widget.php bearbeitest.
Admin