Cum se adaugă jQuery Tabber Widget în WordPress

Ați văzut o zonă de tabere pe site-uri populare, care vă permite să vedeți mesaje populare, recente și prezentate cu un singur clic? Acest lucru este numit jQuery tabber widget, și vă permite să economisiți spațiu pe ecranul utilizatorului prin combinarea widget-uri diferite într-una. În acest articol, vă vom arăta cum să adăugați un widget jQuery Tabber în WordPress.

De ce ar trebui să adăugați un widget jQuery Tabber?

Atunci când rulați un site web WordPress, puteți să adăugați cu ușurință elemente la barele laterale folosind widget-uri drag and drop. Pe măsură ce site-ul dvs. crește, ați putea simți că nu aveți suficient spațiu în bara laterală pentru a afișa tot conținutul util. Exact atunci când un taber vine la îndemână. Vă permite să afișați diferite elemente dintr-o zonă identică. Utilizatorii pot face clic pe fiecare filă și pot vedea conținutul pe care îl interesează cel mai mult. O mulțime de site-uri de nume mari o utilizează pentru a afișa un articol popular astăzi, în această săptămână și în această lună. În acest tutorial vă vom arăta cum să creați un widget tabber. Cu toate acestea, nu vă indicăm ce să adăugați în filele dvs. Puteți adăuga, în principiu, orice doriți.

Notă: acest tutorial este pentru utilizatorii de nivel intermediar și va necesita cunoștințe HTML și CSS. Pentru utilizatorii începători, vă rugăm să consultați acest articol.

Crearea jQuery Tabber Widget în WordPress

Să începem. Primul lucru pe care trebuie să-l faceți este să creați un dosar pe desktop și să îl denumiți wpbeginner-tabber-widget. După aceea, trebuie să creați trei fișiere în interiorul acestui folder utilizând un editor de text simplu, cum ar fi Notepad.

Primul fișier pe care îl vom crea este WPB-tabber-widget.php. Acesta va conține cod HTML și PHP pentru a crea file și un widget personalizat WordPress. Al doilea fișier pe care îl vom crea este WPB-tabber-style.css, și va conține stilul CSS pentru containerul filelor. Al treilea și ultimul fișier pe care îl vom crea este WPB-tabber.js, care va conține scriptul jQuery pentru comutarea filelor și adăugarea animației.

Sa incepem cu WPB-tabber-widget.php fişier. Scopul acestui fișier este de a crea un plugin care înregistrează un widget. Dacă aceasta este prima dată când creați un widget WordPress, vă recomandăm să aruncați o privire la modul nostru de a crea un ghid personalizat widget WordPress sau pur și simplu să copiați și să inserați acest cod în WPB-tabber-widget.php fişier:

  'WPBTabberWidget', 'description' => 'Simplă jQuery Tabber Widget'); $ this-> WP_Widget ('WPBTabberWidget', 'WPBeginner Tabber Widget', $ widget_ops);  funcția widget ($ args, $ instanță) // widget sidebar funcția de ieșire wpb_tabber () // Acum enqueue foaia de stil și scriptul jQuery 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 ( '-tabber stil WPB'); wp_enqueue_script ( 'WPB-tabber widget-js'); // Crearea fișierelor pe care le veți adăuga propriul cod în fiecare filă? 
 
Tab. 1
 
Tab 2
 
Tab 3
 
              

În codul de mai sus, am creat mai întâi un plugin și apoi în interiorul acestui plugin am creat un widget. În secțiunea de ieșire widget am adăugat scripturi și stil de foi și apoi am generat ieșirea HTML pentru filele noastre. În sfârșit, am înregistrat widget-ul. Rețineți că trebuie să adăugați conținutul pe care doriți să îl afișați în fiecare filă.

Acum, că am creat widgetul cu PHP și cod HTML necesar pentru filele noastre, următorul pas este să adăugăm jQuery pentru a le afișa ca file în containerul filelor. Pentru a face acest lucru, trebuie să copiați și să inserați acest cod în wp-tabber.js fişier.

 (funcția ($) $ (". tab_content") ascunde (); $ ("ul.tabs li: first"). ("active"); $ (this) .addClass ("active"); "(" ul.tabs li " $ (();) () () () () () (). .msie) $ (activeTab) .show (); altceva $ (activeTab) .fadeIn (); return false;);) (jQuery); 

Acum widget-ul nostru este gata cu jQuery, ultimul pas este sa adaugi styling la file. Am creat o mostră de stiluri pe care o puteți copia și insera WPB-tabber-style.css fişier:

 ul.tabs poziție: relativă; z-index: 1000; plutește la stânga; marginea stângă: 1px solid # C3D4EA;  ul.tabs li poziție: relativă; overflow: ascuns; înălțime: 26px; plutește la stânga; marja: 0; umplutura: 0; line-height: 26px; fundal-culoare: # 99B2B7; frontieră: 1px solid # C3D4EA; frontieră-stânga: niciuna;  ul.tabs li a afișare: bloc; umplutură: 0 10px; contur: nici unul; text-decoration: nici unul;  html ul.tabs li.active, html ul.tabs li.active a: hover fundal-culoare: # D5DED9; frontieră-fund: 1px solid # D5DED9;  .pagina de domiciliu .widget .tabs a color: #FFFFFF;  .tab_container position: relative; top: -1px; z-index: 999; lățime: 100%; plutește la stânga; font-size: 11px; fundal-culoare: # D5DED9; frontieră: 1px solid # C3D4EA;  .tab_content padding: 7px 11px 11px 11px; înălțimea liniei: 1,5;  .tab_content ul margine: 0; umplutura: 0; listă: nu există;  .tab_content li margine: 3px 0;  .tab-clar clar: ambele;  

Asta e tot. Încărcați acum wpbeginner-tabber-widget dosarul site-ului dvs. WordPress / Wp-content / plugins / director prin FTP. Alternativ, puteți adăuga și dosarul într-o arhivă zip și accesați Pluginuri »Adăugați noi în zona de administrare WordPress. Faceți clic pe fila încărcare pentru a instala pluginul. Odată ce plugin-ul este activat, mergeți la Aspect »Widgeturi, trageți și plasați WPBeginner Tabber Widget la bara laterală și asta-i tot.

Sperăm că acest tutorial te-a ajutat să creezi un jubileu jQuery pentru site-ul tău WordPress. Pentru întrebări și feedback, puteți să lăsați un comentariu mai jos sau să vă alăturați pe Twitter sau pe Google+.