Come sfumare l’ultimo widget della barra laterale di WordPress usando jQuery

Recentemente uno dei nostri utenti ci ha chiesto come aggiungere un effetto di dissolvenza per l’ultimo widget della barra laterale. Questo popolare effetto jQuery è utilizzato in molti siti web e blog famosi. Quando l’utente scorre la pagina verso il basso, l’ultimo widget della barra laterale entra in dissolvenza e diventa visibile. L’animazione rende il widget accattivante e visibile, aumentando notevolmente il tasso di clic. In questo articolo vi mostreremo come sfumare l’ultimo widget della barra laterale in WordPress utilizzando jQuery.

Di seguito è riportata una dimostrazione di come apparirebbe:

In questa esercitazione si modificheranno i file del tema. Si consiglia di eseguire un backup del tema prima di procedere oltre.

Passo 1: Aggiunta di JavaScript per l’effetto dissolvenza

Per prima cosa è necessario aggiungere il codice jQuery al tema WordPress come file JavaScript separato. Iniziate aprendo un file vuoto in un editor di testo come Notepad. Quindi salvate questo file vuoto come wpb_fadein_widget.js sul desktop e incollate il seguente codice al suo interno.

jQuery(document).ready(function($) {
/**
* Configurazione
* Il contenitore per la sidebar, ad esempio aside, #sidebar ecc.
*/

var sidebarElement = $('div#secondary');


// Controllare se la barra laterale esiste
se ($(sidebarElement).length > 0) {

// Ottenere l'ultimo widget della barra laterale e la sua posizione sullo schermo

var widgetDisplayed = false;
var lastWidget = $('.widget:last-child', $(sidebarElement));
var lastWidgetOffset = $(lastWidget).offset().top -100;
	
// Nascondere l'ultimo widget
$(lastWidget).hide();
	
// Controlla se lo scroll dell'utente ha raggiunto la parte superiore dell'ultimo widget e lo visualizza
$(document).scroll(function() {

// Se il widget è stato visualizzato, non è necessario continuare a controllare.

if (!widgetDisplayed) {
if($(this).scrollTop() > lastWidgetOffset) {
$(lastWidget).fadeIn('slow').addClass('wpbstickywidget');
widgetDisplayed = true;  
}
}
});
}
});

La riga più importante di questo codice è var sidebarElement = $('div#secondary');.

Si tratta dell’id del div che contiene la barra laterale. Poiché ogni tema può utilizzare div contenitori diversi per la barra laterale, è necessario scoprire l’id del contenitore che il tema utilizza per la barra laterale.

È possibile scoprirlo utilizzando lo strumento Ispeziona elemento di Google Chrome. È sufficiente fare clic con il pulsante destro del mouse sulla barra laterale in Google Chrome e selezionare Ispeziona elemento.

Nel codice sorgente sarà possibile vedere il div contenitore della sidebar. Ad esempio, il tema predefinito Twenty Twelve utilizza secondary e Twenty Thirteen utilizza teritary come ID per il contenitore della barra laterale. È necessario sostituire secondary con l’ID del div contenitore della barra laterale.

Successivamente, è necessario utilizzare un client FTP per caricare questo file nella cartella js all’interno della directory del tema di WordPress. Se la cartella del tema non ha una cartella js, è necessario crearla facendo clic con il pulsante destro del mouse e selezionando “Crea nuova cartella” nel client FTP.

Fase 2: inserimento di JavaScript nel tema di WordPress

Ora che il vostro script jQuery è pronto, è il momento di aggiungerlo al vostro tema. Utilizzeremo il metodo corretto per aggiungere il JavaScript nel tema, quindi basterà incollare il seguente codice nel file functions.php del vostro tema.

wp_enqueue_script( 'stickywidget', get_template_directory_uri() . '/js/wpb-fadein-widget.js', array('jquery'), '1.0.0', true );

Questo è tutto, ora potete aggiungere un widget nella vostra barra laterale che volete far apparire con l’effetto fadein e poi visitare il vostro sito web per vederlo in azione.

Fase 3: Rendere l’ultimo widget fisso dopo l’effetto dissolvenza

Una funzione spesso desiderata con l’effetto dissolvenza è quella di far scorrere l’ultimo widget della barra laterale mentre l’utente scorre. Si tratta del cosiddetto widget fluttuante o sticky widget.

Se si osserva il codice jQuery qui sopra, si noterà che abbiamo aggiunto una classe CSS wpbstickywidget al widget dopo l’effetto dissolvenza. Potete usare questa classe CSS per rendere il vostro ultimo widget appiccicoso dopo la dissolvenza. Tutto quello che dovete fare è incollare questo CSS nel foglio di stile del vostro tema.

.wpbstickywidget { 
position:fixed;
top:0px; 
}

Sentitevi liberi di modificare il CSS per soddisfare le vostre esigenze. Potete cambiare il colore dello sfondo o i caratteri per rendere il widget ancora più evidente. Se volete, potete anche aggiungere un effetto di scorrimento graduale verso l’alto accanto all’ultimo widget, per consentire agli utenti di tornare indietro rapidamente.

Speriamo che questo articolo vi abbia aiutato ad aggiungere un effetto di dissolvenza all’ultimo widget della vostra barra laterale di WordPress. Per ulteriori informazioni su jQuery, date un’occhiata ai migliori tutorial su jQuery per WordPress.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per i video tutorial su WordPress. Potete trovarci anche su Twitter e Google+.