Wie man jQuery Tabber Widget in WordPress hinzufügt

Haben Sie einen Tabber-Bereich auf beliebten Websites gesehen, mit dem Sie beliebte, aktuelle und vorgestellte Beiträge mit nur einem Klick sehen können? Dies wird als jQuery-Tabber-Widget bezeichnet und ermöglicht es Ihnen, auf dem Benutzerbildschirm Platz zu sparen, indem Sie verschiedene Widgets zu einem kombinieren. In diesem Artikel zeigen wir Ihnen, wie Sie ein jQuery Tabber Widget in WordPress hinzufügen.

Warum Sie ein jQuery Tabber-Widget hinzufügen sollten?

Wenn Sie eine WordPress-Website ausführen, können Sie ganz einfach Elemente mit Drag & Drop-Widgets in Ihre Seitenleisten einfügen. Wenn Ihre Website wächst, haben Sie möglicherweise das Gefühl, dass Sie nicht genügend Platz in der Seitenleiste haben, um alle nützlichen Inhalte anzuzeigen. Das ist genau dann der Fall, wenn ein Tabber nützlich ist. Damit können Sie verschiedene Elemente in einem Bereich anzeigen. Benutzer können auf jede Registerkarte klicken und die Inhalte anzeigen, an denen sie am meisten interessiert sind. Viele namhafte Websites zeigen sie an, um beliebte Artikel heute, diese Woche und diesen Monat anzuzeigen. In diesem Tutorial zeigen wir Ihnen, wie Sie ein Tabber-Widget erstellen. Wir zeigen Ihnen jedoch nicht, was Sie in Ihren Registerkarten hinzufügen müssen. Sie können grundsätzlich alles hinzufügen, was Sie möchten.

Hinweis: Dieses Tutorial richtet sich an Benutzer der mittleren Ebene und erfordert HTML- und CSS-Kenntnisse. Informationen für Anfänger finden Sie stattdessen in diesem Artikel.

JQuery Tabber Widget in WordPress erstellen

Lass uns anfangen. Zuerst müssen Sie einen Ordner auf Ihrem Desktop erstellen und ihm einen Namen geben wpbeginner-tabber-widget. Danach müssen Sie drei Dateien in diesem Ordner mit einem Texteditor wie Notepad erstellen.

Die erste Datei, die wir erstellen werden, ist wpb-tabber-widget.php. Es enthält HTML- und PHP-Code zum Erstellen von Registerkarten und ein benutzerdefiniertes WordPress-Widget. Die zweite Datei, die wir erstellen werden, ist wpb-tabber-style.css, und es wird CSS-Stil für den Tabs-Container enthalten. Die dritte und letzte Datei, die wir erstellen werden, ist wpb-tabber.js, Dieses enthält das jQuery-Skript zum Wechseln der Registerkarten und zum Hinzufügen von Animationen.

Lass uns beginnen mit wpb-tabber-widget.php Datei. Der Zweck dieser Datei ist das Erstellen eines Plugins, das ein Widget registriert. Wenn Sie zum ersten Mal ein WordPress-Widget erstellen, empfehlen wir Ihnen, wie Sie ein benutzerdefiniertes WordPress-Widget-Handbuch erstellen oder diesen Code einfach kopieren und einfügen wpb-tabber-widget.php Datei:

  'WPBTabberWidget', 'description' => 'Simple jQuery Tabber Widget'); $ this-> WP_Widget ('WPBTabberWidget', 'WPBeginner Tabber Widget', $ widget_ops);  function widget ($ args, $ instance) // Widget-Sidebar-Ausgabefunktion wpb_tabber () // Nun werden unser Stylesheet und das jQuery-Skript wp_register_style ('wpb-tabber-style'), plugins_url ('wpb-tabber-style) in die Warteschlange aufgenommen. 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'); // Erstellen von Registerkarten Sie fügen Ihren eigenen Code in jede Registerkarte ein?> 
 
Tab 1
 
Tab 2
 
Tab 3
 
              

Im obigen Code haben wir zuerst ein Plugin erstellt, und dann haben wir in diesem Plugin ein Widget erstellt. Im Widgetausgabeabschnitt haben wir Skripts und Stylesheet hinzugefügt und dann die HTML-Ausgabe für unsere Registerkarten generiert. Zuletzt haben wir das Widget registriert. Denken Sie daran, Sie müssen den Inhalt hinzufügen, den Sie auf jeder Registerkarte anzeigen möchten.

Nachdem wir nun das Widget mit PHP und HTML-Code erstellt haben, das für unsere Registerkarten erforderlich ist, müssen Sie als Nächstes jQuery hinzufügen, um sie als Registerkarten im Registerkartencontainer anzuzeigen. Dazu müssen Sie diesen Code kopieren und einfügen wp-tabber.js Datei.

 (Funktion ($) $ (". 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 besteht darin, den Registerkarten Styling hinzuzufügen. Wir haben ein Beispiel-Stylesheet erstellt, in das Sie kopieren und einfügen können wpb-tabber-style.css Datei:

 ul.tabs position: relativ; z-Index: 1000; Schwimmer: links; Rahmen links: 1px fest # C3D4EA;  ul.tabs li position: relativ; Überlauf versteckt; Höhe: 26px; Schwimmer: links; Marge: 0; Polsterung: 0; Zeilenhöhe: 26px; Hintergrundfarbe: # 99B2B7; Grenze: 1px fest # C3D4EA; links: keine;  ul.tabs li a display: block; Polsterung: 0 10px; Umriss: keine; Textdekoration: keine;  html ul.tabs li.active, html ul.tabs li.active a: hover Hintergrundfarbe: # D5DED9; Rahmen unten: 1px fest # D5DED9;  .widget-area .widget .tabs a color: #FFFFFF;  .tab_container position: relativ; oben: -1px; z-Index: 999; Breite: 100%; Schwimmer: links; Schriftgröße: 11px; Hintergrundfarbe: # D5DED9; Grenze: 1px fest # C3D4EA;  .tab_content padding: 7px 11px 11px 11px; Zeilenhöhe: 1,5;  .tab_content ul margin: 0; Polsterung: 0; Listenstil: keine;  .tab_content li margin: 3px 0;  .tab-clear clear: beide;  

Das ist alles. Jetzt einfach hochladen wpbeginner-tabber-widget Ordner auf Ihre WordPress-Site / wp-content / plugins / Verzeichnis über FTP. Alternativ können Sie den Ordner auch einem ZIP-Archiv hinzufügen und zu gehen Plugins »Neu hinzufügen in Ihrem WordPress-Adminbereich. Klicken Sie auf die Upload-Registerkarte, um das Plugin zu installieren. Sobald das Plugin aktiviert ist, gehe zu Aussehen »Widgets, Ziehen Sie das WPBeginner Tabber Widget in die Seitenleiste, und fertig.

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