Haben Sie auf beliebten Websites einen Tabber-Bereich gesehen, in dem Sie beliebte, aktuelle und empfohlene Beiträge mit nur einem Klick anzeigen können? Dies wird als jQuery-Tabber-Widget bezeichnet und ermöglicht es Ihnen, Platz auf dem Benutzerbildschirm 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 sollten Sie ein jQuery Tabber-Widget hinzufügen?
Wenn Sie eine WordPress-Website betreiben, können Sie Ihren Seitenleisten ganz einfach Elemente mithilfe von Drag-and-Drop-Widgets hinzufügen. Wenn Ihre Website wächst, haben Sie möglicherweise nicht genügend Platz in der Seitenleiste, um alle nützlichen Inhalte anzuzeigen. Genau dann ist ein Tabber praktisch. Es ermöglicht Ihnen, verschiedene Elemente in einem Bereich anzuzeigen. Benutzer können auf jede Registerkarte klicken und den Inhalt anzeigen, der sie am meisten interessiert. Viele bekannte Websites verwenden sie, um heute, diese Woche und diesen Monat beliebte Artikel 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 im Grunde alles hinzufügen, was Sie möchten.
Hinweis: Dieses Tutorial richtet sich an Benutzer der Mittelstufe und erfordert HTML- und CSS-Kenntnisse. Für Benutzer mit Anfängerniveau lesen Sie bitte stattdessen diesen Artikel.
jQuery Tabber Widget in WordPress erstellen
Lass uns anfangen. Als erstes müssen Sie einen Ordner auf Ihrem Desktop erstellen und ihn benennen wpbeginner-tabber-widget
. Danach müssen Sie mit einem Nur-Text-Editor wie Notepad drei Dateien in diesem Ordner 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 enthält CSS-Styling für den Tabs-Container. Die dritte und letzte Datei, die wir erstellen, ist wpb-tabber.js
, das das jQuery-Skript zum Wechseln von Registerkarten und zum Hinzufügen von Animationen enthält.
Lass uns beginnen mit wpb-tabber-widget.php
Datei. Der Zweck dieser Datei besteht darin, ein Plugin zu erstellen, das ein Widget registriert. Wenn Sie zum ersten Mal ein WordPress-Widget erstellen, empfehlen wir Ihnen, sich unsere Anleitung zum Erstellen eines benutzerdefinierten WordPress-Widgets anzusehen oder diesen Code einfach zu kopieren und einzufügen wpb-tabber-widget.php
Datei:
<?php /* Plugin Name: Themelocal jQuery Tabber Widget Plugin URI: https://www.wpbeginner.com Description: A simple jquery tabber widget. Version: 1.0 Author: Themelocal 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', 'Themelocal 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 erstellt. Im Abschnitt Widget-Ausgabe haben wir Skripte und Stylesheets hinzugefügt und dann die HTML-Ausgabe für unsere Registerkarten generiert. Zuletzt haben wir das Widget registriert. Denken Sie daran, dass Sie den Inhalt hinzufügen müssen, der auf jeder Registerkarte angezeigt werden soll.
Nachdem wir nun das Widget mit PHP- und HTML-Code erstellt haben, das für unsere Tabs benötigt wird, besteht der nächste Schritt darin, jQuery hinzuzufügen, um sie als Tabs im Tab-Container anzuzeigen. Dazu müssen Sie diesen Code kopieren und einfügen wp-tabber.js
Datei.
(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 besteht darin, den Registerkarten ein Styling hinzuzufügen. Wir haben ein Beispiel-Stylesheet erstellt, das Sie kopieren und einfügen können wpb-tabber-style.css
Datei:
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. Jetzt einfach hochladen wpbeginner-tabber-widget
Ordner in den . Ihrer WordPress-Site /wp-content/plugins/
Verzeichnis über FTP. Alternativ können Sie den Ordner auch zu einem Zip-Archiv hinzufügen und zu gehen Plugins » Neu hinzufügen in Ihrem WordPress-Admin-Bereich. Klicken Sie auf den Upload-Tab, um das Plugin zu installieren. Sobald das Plugin aktiviert ist, gehen Sie zu Aussehen » Widgets, ziehen Sie das Themelocal Tabber Widget per Drag & Drop in Ihre Seitenleiste und das war’s.
Wir hoffen, dass Ihnen dieses Tutorial geholfen hat, einen jQuery-Tabber für Ihre WordPress-Site zu erstellen. Bei Fragen und Feedback können Sie unten einen Kommentar hinterlassen oder uns besuchen Twitter oder Google+.