Come aggiungere il widget jQuery Tabber in WordPress

Avete visto un’area tabber su siti popolari che vi permette di vedere articoli popolari, recenti e in caratteristica con un solo click? Si chiama jQuery tabber widget e permette di salvare spazio sullo schermo dell’utente combinando diversi widget in uno solo. In questo articolo vi mostreremo come aggiungere un widget jQuery Tabber in WordPress.

Perché dovreste aggiungere un widget jQuery Tabber?

Quando si gestisce un sito web WordPress, è possibile aggiungere facilmente elementi alle barre laterali tramite trascina e rilascia widget. Quando il vostro sito cresce, potreste pensare di non avere abbastanza spazio nella barra laterale per mostrare tutti i contenuti utili. È proprio in questo caso che un tabber si rivela utile. Permette di mostrare elementi diversi in una stessa area. Gli utenti possono fare clic su ogni scheda e vedere i contenuti che più interessano. Molti siti di grandi dimensioni lo usano per mostrare gli articoli più popolari di oggi, di questa settimana e di questo mese. In questo tutorial vi mostreremo come creare un widget tabber. Tuttavia, non vi mostreremo cosa aggiungere alle vostre schede. Potete aggiungere praticamente tutto quello che volete.

Nota: questo tutorial è per utenti di livello intermedio e richiede conoscenze di HTML e CSS. Gli utenti principianti possono invece fare riferimento a questo articolo.

Creazione di un widget jQuery Tabber in WordPress

Cominciamo. La prima cosa da fare è creare una cartella sul desktop e nominarla wpbeginner-tabber-widget. Dopodiché, è necessario creare tre file all’interno di questa cartella, utilizzando un editor di testo come Notepad.

Il primo file che creeremo è wpb-tabber-widget.php. Conterrà il codice HTML e PHP per creare le schede e un widget personalizzato di WordPress. Il secondo file che creeremo è wpb-tabber-style.css e conterrà lo stile CSS per il contenitore delle schede. Il terzo e ultimo file che creeremo è wpb-tabber.js, che conterrà lo script jQuery per cambiare scheda e aggiungere animazioni.

Cominciamo con il file wpb-tabber-widget.php. Lo scopo di questo file è creare un plugin che registri un widget. Se è la prima volta che create un widget per WordPress, vi consigliamo di dare un’occhiata alla nostra guida su come creare un widget personalizzato per WordPress o semplicemente di copiare e incollare questo codice nel file wpb-tabber-widget.php:

<?php
/* Plugin Name: WPBeginner jQuery Tabber Widget
Plugin URI: https://www.wpbeginner.com
Description: A simple jquery tabber widget.
Version: 1.0
Author: WPBeginner
Author URI: https://www.wpbeginner.com
License: GPL2
*/

// creating a widget
class WPBTabberWidget extends WP_Widget {

function WPBTabberWidget() {
		$widget_ops = array(
		'classname' => 'WPBTabberWidget',
		'description' => 'Simple jQuery Tabber Widget'
);
$this->WP_Widget(
		'WPBTabberWidget',
		'WPBeginner Tabber Widget',
		$widget_ops
);
}
function widget($args, $instance) { // widget sidebar output

function wpb_tabber() { 

// Now we enqueue our stylesheet and 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-style');
wp_enqueue_script('wpb-tabber-widget-js');

// Creating tabs you will be adding you own code inside each tab
?>

<ul class="tabs">
<li class="active"><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
</ul>

<div class="tab_container">

<div id="tab1" class="tab_content">
<?php 
// Enter code for tab 1 here. 
?>
</div>

<div id="tab2" class="tab_content" style="display:none;">
<?php 
// Enter code for tab 2 here. 
?>
</div>

<div id="tab3" class="tab_content" style="display:none;">
<?php 
// Enter code for tab 3 here. 
?>
</div>

</div>

<div class="tab-clear"></div>

<?php

}

extract($args, EXTR_SKIP);
// pre-widget code from theme
echo $before_widget; 
$tabs = wpb_tabber(); 
// output tabs HTML
echo $tabs; 
// post-widget code from theme
echo $after_widget; 
}
}

// registering and loading widget
add_action(
'widgets_init',
create_function('','return register_widget("WPBTabberWidget");')
);
?>

Nel codice qui sopra, abbiamo prima creato un plugin e poi al suo interno abbiamo creato un widget. Nella sezione di output del widget abbiamo aggiunto script e foglio di stile e poi abbiamo generato l’output HTML per le nostre schede. Infine, abbiamo registrato il widget. Ricordare che è necessario aggiungere il contenuto che si desidera visualizzare su ogni scheda.

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

(function($) {
$(".tab_content").hide();
$("ul.tabs li:first").addClass("active").show();
$(".tab_content:first").show();
$("ul.tabs li").fai clic(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("attivo");
$(".tab_content").hide();
var activeTab = $(this).find("a").attr("href");
//$(activeTab).fadeIn();
se ($.browser.msie) {$(activeTab).show();}
altrimenti {$(activeTab).fadeIn();}
return false;
});
})(jQuery);

Ora il nostro widget è pronto con jQuery, il passo successivo è aggiungere lo stile alle schede. Abbiamo creato un foglio di stile di esempio, da copiare e incollare nel file wpb-tabber-style.css:

ul.tabs { 
position: relative; 
z-index: 1000; 
float: left; 
border-left: 1px solid #C3D4EA; 
}
ul.tabs li {
position: relative; 
overflow: hidden; 
height: 26px; 
float: left; 
margin: 0; 
padding: 0; 
line-height: 26px; 
background-color: #99B2B7;
border: 1px solid #C3D4EA; 
border-left: none; 
}
ul.tabs li  a{ 
display: block; 
padding: 0 10px; 
outline: none; 
text-decoration: none;
}
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; 
width: 100%; 
float: left; 
font-size: 11px; 
background-color: #D5DED9; 
border: 1px solid #C3D4EA;
}
.tab_content { 
padding: 7px 11px 11px 11px;
line-height: 1.5;
}
.tab_content ul { 
margin: 0;
padding: 0; 
list-style: none; 
}
.tab_content li { 
margin: 3px 0;
 }
.tab-clear {
clear:both;
}

Questo è tutto. Ora basta fare l’upload della cartella wpBeginner-tabber-widget nella directory /wp-content/plugins/ del vostro sito WordPress tramite FTP. In alternativa, potete anche aggiungere la cartella a un archivio zip e andare su Plugin ” Aggiungi nuovo nell’area di amministrazione di WordPress. Fate clic sulla scheda uploader per installare il plugin. Una volta attivato il plugin, andare su Aspetto ” Widget, trascina e rilascia WPBeginner Tabber Widget nella barra laterale e il gioco è fatto.

Speriamo che questo tutorial vi abbia aiutato a creare un tabber jQuery per il vostro sito WordPress. Per domande e feedback potete lasciare un commento qui sotto o unirvi a noi su Twitter o Google+.