Slik legger du til jQuery Tabber Widget i WordPress

Har du sett et tabber-område på populære nettsteder som gjør det mulig å se populære, nylig og populære innlegg med bare ett klikk? Dette kalles jQuery tabber-widgeten, og lar deg lagre plass på brukerskjermen ved å kombinere forskjellige widgets til en. I denne artikkelen vil vi vise deg hvordan du legger til en jQuery Tabber Widget i WordPress.

Hvorfor du bør legge til en jQuery Tabber Widget?

Når du kjører et WordPress-nettsted, kan du enkelt legge til elementer i sidebjørene dine ved å dra og slippe widgets. Etter hvert som nettstedet ditt vokser, kan du føle at du ikke har nok plass i sidefeltet for å vise alt nyttig innhold. Det er akkurat når en tabber kommer til nytte. Det lar deg vise forskjellige elementer i samme område. Brukere kan klikke på hver kategori og se innholdet de er mest interessert i. Mange store navnesider bruker den til å vise populær artikkel i dag, denne uken og denne måneden. I denne opplæringen vil vi vise deg hvordan du lager en tabber-widget. Vi viser imidlertid ikke deg hva du skal legge til i kategoriene dine. Du kan legge til i utgangspunktet alt du liker.

Merk: denne veiledningen er for brukere med mellomnivå og vil kreve HTML og CSS kunnskap. For brukere av nybegynnernivå, vennligst se denne artikkelen i stedet.

Opprette jQuery Tabber Widget i WordPress

La oss komme i gang. Første ting du trenger å gjøre er å lage en mappe på skrivebordet ditt og gi den navnet wpbeginner-tabber-widget. Etter det må du opprette tre filer i denne mappen ved hjelp av et vanlig tekstredigeringsprogram som Notisblokk.

Den første filen vi skal lage er WPB-tabber-widget.php. Den vil inneholde HTML- og PHP-kode for å lage faner og en egendefinert WordPress-widget. Den andre filen vi skal lage er WPB-tabber-style.css, og den vil inneholde CSS-styling for flikbeholderen. Den tredje og siste filen vi skal lage er WPB-tabber.js, som vil inneholde jQuery-skriptet for å bytte faner og legge til animasjon.

La oss begynne med WPB-tabber-widget.php fil. Formålet med denne filen er å lage et plugin som registrerer en widget. Hvis dette er første gang du oppretter en WordPress-widget, anbefaler vi at du tar en titt på hvordan du lager en egendefinert WordPress-widget-guide eller bare kopier og lim inn denne koden i WPB-tabber-widget.php fil:

  'WPBTabberWidget', 'description' => 'Enkel jQuery Tabber Widget'); $ this-> WP_Widget ('WPBTabberWidget', 'WPBeginner Tabber Widget', $ widget_ops);  funksjon widget ($ args, $ instance) // widget sidebar output funksjon wpb_tabber () // Nå vi enqueue vårt stilark og 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'); // Opprette faner vil du legge til din egen kode i hver kategori?> 
 
Fane 1
 
Tab 2
 
Tab 3
 
              

I koden ovenfor opprettet vi først et plugin og deretter i det pluginet vi opprettet en widget. I widgetutgangsseksjonen la vi til skript og stilark og deretter genererte vi HTML-utdataene for våre faner. Til slutt registrerte vi widgeten. Husk at du må legge til innholdet du vil vise på hver kategori.

Nå som vi har opprettet widgeten med PHP og HTML-koden som er nødvendig for våre faner, er neste trinn å legge til jQuery for å vise dem som faner i faneboksen. For å gjøre det må du kopiere og lime inn denne koden i wp-tabber.js fil.

 (funksjon ($) $ ("tab_content"). skjul (); $ ("ul.tabs li: first"). addClass ("aktiv"). .show (); $ ("ul.tabs li"). klikk (funksjon () $ ("ul.tabs li"). removeClass ("aktiv"); $ (dette) .addClass ("aktiv"); $ (". tab_content"). Hide (); var activeTab = $ (dette) .find ("a"). Attr ("href"); // $ (activeTab) .fadeIn (); hvis ($ .browser .msie) $ (activeTab) .show (); else $ (activeTab) .fadeIn (); return false;);) (jQuery); 

Nå er vår widget klar med jQuery, det siste trinnet er å legge til styling i kategoriene. Vi har opprettet et utvalg stilark som du kan kopiere og lime inn WPB-tabber-style.css fil:

 ul.tabs posisjon: relative; z-indeks: 1000; flyte: venstre; border-left: 1px solid # C3D4EA;  ul.tabs li posisjon: relativ; overløp: skjult; høyde: 26px; flyte: venstre; margin: 0; polstring: 0; linjehøyde: 26px; bakgrunnsfarge: # 99B2B7; grense: 1px solid # C3D4EA; border-left: none;  ul.tabs li a display: block; polstring: 0 10px; oversikt: ingen; tekst-dekorasjon: ingen;  html ul.tabs li.active, html ul.tabs li.active a: hover bakgrunnsfarge: # D5DED9; grensebunn: 1px solid # D5DED9;  .widget-området .widget .tabs a color: #FFFFFF;  .tab_container posisjon: relative; topp: -1px; z-indeks: 999; bredde: 100%; flyte: venstre; skriftstørrelse: 11px; bakgrunnsfarge: # D5DED9; grense: 1px solid # C3D4EA;  .tab_content polstring: 7px 11px 11px 11px; linjehøyde: 1,5;  .tab_content ul margin: 0; polstring: 0; listestil: none;  .tab_content li margin: 3px 0;  .tab-clear clear: both;  

Det er alt. Last opp nå wpbeginner-tabber-widget mappe til ditt WordPress-nettsted / Wp-content / plugins / katalog gjennom FTP. Alternativt kan du også legge til mappen til et zip-arkiv og gå til Plugins »Legg til nytt i ditt WordPress admin-område. Klikk på opplastingsfanen for å installere plugin. Når plugin er aktivert, gå til Utseende »Widgets, dra og slipp WPBeginner Tabber Widget til sidebjell, og det er det.

Vi håper at denne opplæringen hjalp deg med å opprette en jQuery-tabber for ditt WordPress-nettsted. For spørsmål og tilbakemelding kan du legge igjen en kommentar nedenfor eller bli med oss ​​på Twitter eller Google+.