Så här lägger du till jQuery Tabber Widget i WordPress

Har du sett ett tabberområde på populära webbplatser som gör att du kan se populära, senaste och utvalda inlägg med bara ett klick? Detta kallas jQuery tabber-widgeten, och det låter dig spara utrymme på användarskärmen genom att kombinera olika widgets till en. I den här artikeln visar vi hur du lägger till en jQuery Tabber Widget i WordPress.

Varför bör du lägga till en jQuery Tabber Widget?

När du kör en WordPress-webbplats kan du enkelt lägga till objekt i dina sidfält med hjälp av dra och släpp widgets. När din webbplats växer kanske du känner att du inte har tillräckligt med plats i sidofältet för att visa allt användbart innehåll. Det är precis när en tabber kommer till nytta. Det låter dig visa olika föremål i samma område. Användare kan klicka på varje flik och se det innehåll de är mest intresserade av. Många stora namnplatser använder den för att visa populär artikel idag, den här veckan och den här månaden. I den här handledningen visar vi hur du skapar en tabber-widget. Vi visar emellertid inte vad du ska lägga till i dina flikar. Du kan lägga till i princip allt du vill.

Obs! Denna handledning är för användare med mellannivå och kräver HTML- och CSS-kunskap. För användare av nybörjarnivå hänvisas till den här artikeln istället.

Skapa jQuery Tabber Widget i WordPress

Låt oss börja. Det första du behöver göra är att skapa en mapp på skrivbordet och namnge den wpbeginner-tabber-widget. Därefter måste du skapa tre filer i den här mappen med en vanlig textredigerare som Anteckningsblock.

Den första filen vi ska skapa är WPB-tabber-widget.php. Den kommer att innehålla HTML och PHP-kod för att skapa flikar och en anpassad WordPress-widget. Den andra filen vi kommer att skapa är WPB-tabber-style.css, och det kommer att innehålla CSS-styling för flikbehållaren. Den tredje och sista filen vi kommer att skapa är WPB-tabber.js, som kommer att innehålla jQuery-skriptet för att byta flikar och lägga till animering.

Låt oss börja med WPB-tabber-widget.php fil. Syftet med den här filen är att skapa ett plugin som registrerar en widget. Om det här är första gången du skapar en WordPress-widget rekommenderar vi att du tittar på hur du skapar en anpassad widget för WordPress-widgetar eller helt enkelt kopiera och klistra in den här koden i WPB-tabber-widget.php fil:

  'WPBTabberWidget', 'description' => 'Enkel jQuery Tabber Widget'); $ this-> WP_Widget ('WPBTabberWidget', 'WPBeginner Tabber Widget', $ widget_ops);  funktion widget ($ args, $ instans) // widget sidebar output funktion wpb_tabber () // Nu vi enqueue vårt stylesheet och 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-stil'); wp_enqueue_script ( 'wpb-tabber-widget-js'); // Skapa flikar kommer du att lägga till din egen kod inom varje flik?> 
 
Flik 1
 
Flik 2
 
Flik 3
 
              

I koden ovan skapade vi först ett plugin och sedan inuti det plugin skapade vi en widget. I widgetutmatningssektionen lade vi till skript och stilark och sedan genererade vi HTML-utgången för våra flikar. Slutligen registrerade vi widgeten. Kom ihåg att du måste lägga till det innehåll som du vill visa på varje flik.

Nu när vi har skapat widgeten med PHP och HTML-kod som behövs för våra flikar, är nästa steg att lägga till jQuery för att visa dem som flikar i flikbehållaren. För att göra det måste du kopiera och klistra in den här koden i wp-tabber.js fil.

 (funktion ($) $ (". tab_content"). hide (); $ ("ul.tabs li: first"). addClass ("aktiv"). .show (); $ ("ul.tabs li"). klicka (funktion () $ ("ul.tabs li"). removeClass ("aktiv"); $ (detta) .addClass ("aktiv"); $ (". tab_content"). hide (); var activeTab = $ (detta) .find ("a"). attr ("href"); // $ (activeTab) .fadeIn (); om ($ .browser .msie) $ (activeTab) .show (); else $ (activeTab) .fadeIn (); returnera false;);) (jQuery); 

Nu är vår widget klar med jQuery, det sista steget är att lägga till styling till flikarna. Vi har skapat ett stilark som du kan kopiera och klistra in WPB-tabber-style.css fil:

 ul.tabs position: relative; z-index: 1000; flyta till vänster; gräns vänster: 1px solid # C3D4EA;  ul.tabs li position: relativ; överflöde: gömd; höjd: 26px; flyta till vänster; marginal: 0; vaddering: 0; linjehöjd: 26px; bakgrundsfärg: # 99B2B7; gräns: 1px fast # C3D4EA; border-left: none;  ul.tabs li a display: block; vaddering: 0 10px; kontur: ingen; text-dekoration: ingen;  html ul.tabs li.active, html ul.tabs li.active a: svävar bakgrundsfärg: # D5DED9; gränsbotten: 1px solid # D5DED9;  .widget-area .widget .tabs a color: #FFFFFF;  .tab_container position: relative; topp: -1px; z-index: 999; bredd: 100%; flyta till vänster; typsnittstorlek: 11px; bakgrundsfärg: # D5DED9; gräns: 1px fast # C3D4EA;  .tab_content vaddering: 7px 11px 11px 11px; linjehöjd: 1,5;  .tab_content ul margin: 0; vaddering: 0; listestil: none;  .tab_content li margin: 3px 0;  .tab-clear clear: both;  

Det är allt. Nu bara ladda upp wpbeginner-tabber-widget mapp till din WordPress-webbplats / Wp-content / plugins / katalog genom FTP. Alternativt kan du också lägga till mappen i ett zip-arkiv och gå till Plugins »Lägg till nytt i ditt WordPress-administrativa område. Klicka på uppladdningsfliken för att installera plugin. När pluggen är aktiverad, gå till Utseende »Widgets, Dra och släpp WPBeginner Tabber Widget till ditt sidofält och det är det.

Vi hoppas att denna handledning hjälpte dig att skapa en jQuery tabber för din WordPress-webbplats. För frågor och feedback kan du lämna en kommentar nedan eller gå med på Twitter eller Google+.