Hoe jQuery Tabber Widget toe te voegen in WordPress

Heb je een tabbergebied op populaire sites gezien waarmee je populaire, recente en aanbevolen berichten kunt bekijken met slechts één klik? Dit wordt de jbery tabber-widget genoemd en u kunt hiermee ruimte besparen op het gebruikersscherm door verschillende widgets in één te combineren. In dit artikel laten we u zien hoe u een jQuery Tabber Widget toevoegt in WordPress.

Waarom u een jQuery-tabbrowagget zou moeten toevoegen?

Wanneer u een WordPress-website gebruikt, kunt u gemakkelijk items aan uw zijbalken toevoegen met behulp van slepen en neerzetten-widgets. Naarmate uw site groeit, is het mogelijk dat u onvoldoende ruimte in de zijbalk heeft om alle nuttige inhoud te tonen. Dat is precies wanneer een tabber van pas komt. Hiermee kunt u verschillende items in hetzelfde gebied weergeven. Gebruikers kunnen op elk tabblad klikken en de inhoud bekijken waarin ze het meest geïnteresseerd zijn. Veel grote namen gebruiken het om populair artikel vandaag, deze week en deze maand weer te geven. In deze zelfstudie laten we u zien hoe u een tabber-widget kunt maken. We laten u echter niet zien wat u in uw tabbladen moet toevoegen. U kunt in principe alles toevoegen wat u maar wilt.

Opmerking: deze tutorial is bedoeld voor gebruikers op gemiddeld niveau en vereist kennis van HTML en CSS. Voor gebruikers op beginnersniveau, raadpleegt u dit artikel.

Het maken van jQuery Tabber Widget in WordPress

Laten we beginnen. Het eerste wat u hoeft te doen is een map op uw bureaublad maken en deze een naam geven wpbeginner-tabber-widget. Daarna moet je drie bestanden in deze map maken met een gewone teksteditor zoals Kladblok.

Het eerste bestand dat we gaan maken is PVDA-tabber-widget.php. Het bevat HTML- en PHP-code om tabbladen en een aangepaste WordPress-widget te maken. Het tweede bestand dat we zullen maken is PVDA-tabber-style.css, en het bevat CSS-styling voor de tabbladencontainer. Het derde en laatste bestand dat we zullen maken is PVDA-tabber.js, die het jQuery-script bevat om van tab te wisselen en animaties toe te voegen.

Laten we beginnen met PVDA-tabber-widget.php het dossier. Het doel van dit bestand is om een ​​plug-in te maken die een widget registreert. Als dit de eerste keer is dat u een WordPress-widget maakt, raden we u aan naar onze aangepaste WordPress-widgethandleiding te kijken of deze code simpelweg te kopiëren en in deze te plakken. PVDA-tabber-widget.php het dossier:

  'WPBTabberWidget', 'description' => 'Eenvoudige jQuery-tabber-widget'); $ this-> WP_Widget ('WPBTabberWidget', 'WPBeginner Tabber Widget', $ widget_ops);  functiewidget ($ args, $ instance) // widget zijbalk uitvoerfunctie wpb_tabber () // Nu zetten we ons stylesheet en jQuery-script in wacht 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 '); // Tabbladen maken, u voegt uw eigen code toe aan elk tabblad?> 
 
Tab 1
 
Tab 2
 
Tab 3
 
              

In de bovenstaande code hebben we eerst een plug-in gemaakt en vervolgens in die plug-in een widget gemaakt. In de widget-uitvoersectie hebben we scripts en stylesheet toegevoegd en vervolgens hebben we de HTML-uitvoer gegenereerd voor onze tabbladen. Ten slotte registreerden we de widget. Let op: u moet de inhoud toevoegen die u op elk tabblad wilt weergeven.

Nu we de widget hebben gemaakt met PHP en HTML-code die nodig is voor onze tabbladen, is de volgende stap om jQuery toe te voegen om ze weer te geven als tabbladen in de tab-container. Om dit te doen, moet je deze code kopiëren en plakken in wp-tabber.js het dossier.

 (functie ($) $ (". tab_content"). hide (); $ ("ul.tabs li: first"). addClass ("active"). show (); $ (". tab_content: first") .show (); $ ("ul.tabs li"). klik (functie () $ ("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); 

Nu is onze widget klaar met jQuery, de laatste stap is het toevoegen van styling aan de tabbladen. We hebben een voorbeeldstijlblad gemaakt dat u kunt kopiëren en plakken PVDA-tabber-style.css het dossier:

 ul.tabs positie: relatief; z-index: 1000; zweven: links; border-left: 1px solid # C3D4EA;  ul.tabs li positie: relatief; overloop verborgen; hoogte: 26px; zweven: links; marge: 0; opvulling: 0; regelhoogte: 26px; achtergrondkleur: # 99B2B7; rand: 1px vast # C3D4EA; border-left: none;  ul.tabs li a display: block; opvulling: 0 10px; overzicht: geen; tekstdecoratie: geen;  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; breedte: 100%; zweven: links; font-size: 11px; achtergrondkleur: # D5DED9; rand: 1px vast # C3D4EA;  .tab_content opvulling: 7px 11px 11px 11px; regelhoogte: 1,5;  .tab_content ul margin: 0; opvulling: 0; lijststijl: geen;  .tab_content li margin: 3px 0;  .tab-clear clear: beide;  

Dat is alles. Nu gewoon uploaden wpbeginner-tabber-widget map naar uw WordPress-site / Wp-content / plugins / map via FTP. Als alternatief kunt u de map ook toevoegen aan een zip-archief en naar Plug-ins »Nieuw toevoegen in uw WordPress-beheerdersgebied. Klik op het tabblad Uploaden om de plug-in te installeren. Zodra de plug-in is geactiveerd, gaat u naar Uiterlijk »Widgets, sleep WPBeginner Tabber Widget naar je zijbalk en dat is alles.

We hopen dat deze zelfstudie u heeft geholpen bij het maken van een jQuery-tabber voor uw WordPress-site. Voor vragen en feedback kunt u hieronder een opmerking achterlaten of bij ons terecht op Twitter of Google+.