Come aggiungere jQuery Tabber Widget in WordPress

Hai visto un'area tabber su siti popolari che ti consente di visualizzare post popolari, recenti e con un solo clic? Questo è chiamato widget jQuery tabber e consente di risparmiare spazio sullo schermo utente combinando diversi widget in uno. In questo articolo, ti mostreremo come aggiungere un jQuery Tabber Widget in WordPress.

Perché dovresti aggiungere un widget di jQuery Tabber?

Quando si esegue un sito Web WordPress, è possibile aggiungere facilmente elementi alle barre laterali utilizzando i widget di trascinamento della selezione. Man mano che il tuo sito cresce, potresti pensare di non avere abbastanza spazio nella barra laterale per mostrare tutti i contenuti utili. Questo è esattamente quando un tabber è utile. Ti permette di mostrare diversi oggetti in una stessa area. Gli utenti possono fare clic su ciascuna scheda e vedere il contenuto a cui sono più interessati. Molti siti di grandi nomi lo utilizzano per mostrare articoli popolari oggi, questa settimana e questo mese. In questo tutorial ti mostreremo come creare un widget tabber. Tuttavia, non ti stiamo mostrando cosa aggiungere nelle schede. Puoi aggiungere praticamente tutto ciò che ti piace.

Nota: questo tutorial è per utenti di livello intermedio e richiede conoscenze HTML e CSS. Per gli utenti principianti, si prega di fare riferimento a questo articolo.

Creazione di jQuery Tabber Widget in WordPress

Iniziamo. La prima cosa che devi fare è creare una cartella sul tuo desktop e nominarla wpbeginner-Tabber-widget di. Successivamente, è necessario creare tre file all'interno di questa cartella utilizzando un editor di testo semplice come Blocco note.

Il primo file che stiamo per creare è WPB-Tabber-widget.php. Conterrà codice HTML e PHP per creare schede e un widget WordPress personalizzato. Il secondo file che creeremo è WPB-Tabber-style.css, e conterrà lo stile CSS per il contenitore di schede. Il terzo e l'ultimo file che creeremo è WPB-tabber.js, che conterrà lo script jQuery per cambiare tab e aggiungere animazione.

Iniziamo con WPB-Tabber-widget.php file. Lo scopo di questo file è creare un plugin che registri un widget. Se è la prima volta che crei un widget WordPress, ti consigliamo di dare un'occhiata al nostro modo di creare una guida personalizzata per i widget di WordPress o semplicemente di copiare e incollare questo codice in WPB-Tabber-widget.php file:

  'WPBTabberWidget', 'description' => 'Simple jQuery Tabber Widget'); $ this-> WP_Widget ('WPBTabberWidget', 'WPBeginner Tabber Widget', $ widget_ops);  widget funzione ($ args, $ istanza) // funzione di output della barra laterale del widget wpb_tabber () // Ora accodiamo il nostro foglio di stile e lo script 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 stile WPB'); wp_enqueue_script ( 'WPB-Tabber-widget di-js'); // Crea schede aggiungerai il tuo codice all'interno di ogni scheda?> 
 
Scheda 1
 
Scheda 2
 
Scheda 3
 
              

Nel codice sopra, abbiamo prima creato un plug-in e poi all'interno di quel plugin abbiamo creato un widget. Nella sezione di output del widget abbiamo aggiunto script e fogli di stile e quindi abbiamo generato l'output HTML per le nostre schede. Infine abbiamo registrato il widget. Ricorda, è necessario aggiungere il contenuto che si desidera visualizzare su ciascuna scheda.

Ora che abbiamo creato il widget con codice PHP e HTML necessario per le nostre schede, il passaggio successivo è aggiungere jQuery per visualizzarle come schede nel contenitore di schede. Per fare ciò è necessario copiare e incollare questo codice wp-tabber.js file.

 (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); 

Ora il nostro widget è pronto con jQuery, l'ultimo passo è quello di aggiungere uno stile alle schede. Abbiamo creato un foglio di stile di esempio che puoi copiare e incollare WPB-Tabber-style.css file:

 ul.tabs position: relativo; z-index: 1000; fluttuare: a sinistra; border-left: 1px solid # C3D4EA;  ul.tabs li position: relativo; overflow: nascosto; altezza: 26px; fluttuare: a sinistra; margine: 0; padding: 0; altezza della linea: 26px; background-color: # 99B2B7; border: 1px solid # C3D4EA; border-left: none;  ul.tabs li a display: block; padding: 0 10px; contorni: nessuno; decorazione del testo: nessuna;  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; larghezza: 100%; fluttuare: a sinistra; font-size: 11px; background-color: # D5DED9; border: 1px solid # C3D4EA;  .tab_content padding: 7px 11px 11px 11px; altezza della linea: 1,5;  .tab_content ul margin: 0; padding: 0; stile elenco: nessuno;  .tab_content li margin: 3px 0;  .tab-clear clear: both;  

È tutto. Adesso basta caricare wpbeginner-Tabber-widget di cartella sul tuo sito WordPress / Wp-content / plugins / directory tramite FTP. In alternativa, puoi anche aggiungere la cartella in un archivio zip e andare a Plugin »Aggiungi nuovo nell'area di amministrazione di WordPress. Fai clic sulla scheda di caricamento per installare il plug-in. Una volta attivato il plugin, vai a Aspetto »Widget, trascina e rilascia WPBeginner Tabber Widget sulla barra laterale e il gioco è fatto.

Speriamo che questo tutorial ti abbia aiutato a creare un tabellatore jQuery per il tuo sito WordPress. Per domande e commenti puoi lasciare un commento qui sotto o unirti a noi su Twitter o Google+.