Come far apparire l'ultimo widget della barra laterale in WordPress usando jQuery

Recentemente uno dei nostri utenti ci ha chiesto come aggiungere un effetto di dissolvenza in entrata per l'ultimo widget nella barra laterale. Questo popolare effetto jQuery è utilizzato su molti siti web e blog conosciuti. Mentre l'utente scorre la pagina, l'ultimo widget nella barra laterale appare gradualmente e diventa visibile. L'animazione rende il widget accattivante e notevole, aumentando drasticamente il tasso di clic. In questo articolo, ti mostreremo come far apparire gradualmente l'ultimo widget della barra laterale in WordPress usando jQuery.

Di seguito una demo di come apparirebbe:

In questo tutorial, modificherai i file del tuo tema. Si raccomanda di eseguire il backup del tuo tema prima di procedere ulteriormente.

Passaggio 1: Aggiungere JavaScript per l'effetto di dissolvenza in entrata

Per prima cosa devi aggiungere il codice jQuery al tuo tema WordPress come file JavaScript separato. Inizia aprendo un file vuoto in un editor di testo come Blocco note. Successivamente, salva questo file vuoto come wpb_fadein_widget.js sul tuo desktop e incolla il seguente codice al suo interno.

jQuery(document).ready(function($) {
/**
* Configuration
* The container for your sidebar e.g. aside, #sidebar etc.
*/

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


// Check if the sidebar exists
if ($(sidebarElement).length > 0) {

// Get the last widget in the sidebar, and its position on screen

var widgetDisplayed = false;
var lastWidget = $('.widget:last-child', $(sidebarElement));
var lastWidgetOffset = $(lastWidget).offset().top -100;
	
// Hide the last widget
$(lastWidget).hide();
	
// Check if user scroll have reached the top of the last widget and display it
$(document).scroll(function() {

// If the widget has been displayed, we don't need to keep doing a check.

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

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

Questo è l'id del div che contiene la tua barra laterale. Poiché ogni tema può utilizzare div contenitori della barra laterale diversi, devi scoprire l'id del contenitore che il tuo tema sta utilizzando per la barra laterale.

Puoi scoprirlo utilizzando lo strumento di ispezione elemento in Google Chrome. Fai semplicemente clic destro sulla tua barra laterale in Google Chrome e seleziona Ispeziona elemento.

Nel codice sorgente, sarai in grado di vedere il tuo div contenitore della barra laterale. Ad esempio, il tema predefinito Twenty Twelve utilizza secondary, mentre Twenty Thirteen utilizza tertiary come ID per il contenitore della barra laterale. Devi sostituire secondary con l'ID del tuo div contenitore della barra laterale.

Successivamente, devi utilizzare un Client FTP per caricare questo file nella cartella js all'interno della directory del tuo tema WordPress. Se la directory del tuo tema non ha una cartella js, devi crearla facendo clic con il pulsante destro del mouse e selezionando 'Crea nuova directory' nel tuo client FTP.

Passaggio 2: Accodare il tuo JavaScript nel tema WordPress

Ora che il tuo script jQuery è pronto, è ora di aggiungerlo al tuo tema. Utilizzeremo il metodo corretto per aggiungere il javascript nel tuo tema, quindi incolla semplicemente il seguente codice nel file functions.php del tuo tema.

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

Tutto qui, ora puoi aggiungere un widget nella tua barra laterale che desideri appaia con l'effetto fade-in, quindi visita il tuo sito web per vederlo in azione.

Passaggio 3: Rendere l'ultimo widget fisso dopo l'effetto fade-in

Una funzionalità spesso desiderata con l'effetto fade-in è rendere l'ultimo widget della barra laterale fisso mentre l'utente scorre. Questo è chiamato widget fluttuante o widget fisso.

Se guardi il codice jQuery sopra, noterai che abbiamo aggiunto una classe CSS wpbstickywidget al widget dopo l'effetto fade-in. Puoi usare questa classe CSS per rendere il tuo ultimo widget fisso dopo che è svanito. Tutto ciò che devi fare è incollare questo CSS nel foglio di stile del tuo tema.

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

Sentiti libero di modificare il CSS per soddisfare le tue esigenze. Puoi cambiare il colore di sfondo o i font per rendere il widget ancora più evidente. Se vuoi, puoi persino aggiungere un effetto di scorrimento fluido verso l'alto accanto al tuo ultimo widget, che permetterà agli utenti di tornare rapidamente indietro.

Speriamo che questo articolo ti abbia aiutato ad aggiungere un effetto di dissolvenza all'ultimo widget nella barra laterale del tuo WordPress. Per altre chicche jQuery, dai un'occhiata ai migliori tutorial jQuery per WordPress.

Se ti è piaciuto questo articolo, iscriviti al nostro Canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Google+.