Come dissolvenza nell'ultimo widget della barra laterale in WordPress usando jQuery

Recentemente uno dei nostri utenti ci ha chiesto come aggiungere una dissolvenza all'effetto per l'ultimo widget nella barra laterale. Questo famoso effetto jQuery viene utilizzato su molti siti Web e blog noti. Mentre l'utente scorre la pagina verso il basso, l'ultimo widget nella barra laterale si apre e diventa visibile. L'animazione rende il widget accattivante e visibile che aumenta notevolmente la percentuale di clic. In questo articolo, ti mostreremo come sfumare l'ultimo widget della barra laterale in WordPress usando jQuery.

Di seguito è una demo di come sarebbe:

In questo tutorial, modificherete i file del tema. Si consiglia di eseguire il backup del tema prima di procedere ulteriormente.

Passaggio 1: aggiunta di JavaScript per Fadein Effect

Innanzitutto è necessario aggiungere il codice jQuery al tema WordPress come file JavaScript separato. Inizia aprendo un file vuoto in un editor di testo come Blocco note. Quindi salvare questo file vuoto come wpb_fadein_widget.js sul desktop e incollare il seguente codice al suo interno.

 jQuery (documento) .ready (funzione ($) / ** * Configurazione * Il contenitore per la barra laterale, ad esempio, #sidebar ecc. * / var sidebarElement = $ ('div # secondary'); // Controlla se la barra laterale esiste if ($ (sidebarElement) .length> 0) // Ottieni l'ultimo widget nella barra laterale e la sua posizione sullo schermo var widgetDisplayed = false; var lastWidget = $ ('. widget: last-child', $ (sidebarElement )); var lastWidgetOffset = $ (lastWidget) .offset (). top -100; // Nascondi l'ultimo widget $ (lastWidget) .hide (); // Controlla se lo scroll dell'utente ha raggiunto la parte superiore dell'ultimo widget e visualizza it $ (document) .scroll (function () // Se il widget è stato visualizzato, non è necessario continuare a fare un controllo. if (! widgetDisplayed) if ($ (this) .scrollTop ()> lastWidgetOffset ) $ (lastWidget) .fadeIn ('slow'). addClass ('wpbstickywidget'); widgetDisplayed = true;;); 

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

Questo è l'ID del div contenente la barra laterale. Dal momento che ciascun tema può utilizzare diverse div contenitore della barra laterale, è necessario trovare l'id contenitore che il tema utilizza per la barra laterale.

Puoi scoprirlo utilizzando lo strumento Elemento di ispezione in Google Chrome. Basta fare clic destro sulla barra laterale in Google Chrome, quindi selezionare Ispeziona elemento.

Nel codice sorgente, sarai in grado di vedere il tuo div contenitore della barra laterale. Ad esempio, viene utilizzato il tema predefinito Twenty Twelve secondario, e Twenty Tredici usi teritary come ID per il contenitore della barra laterale. Devi sostituire secondario con l'ID del tuo div contenitore laterale.

Successivamente è necessario utilizzare un client FTP per caricare questo file nella cartella js all'interno della directory dei temi di WordPress. Se la tua directory tematica non ha una cartella js, devi crearla facendo clic con il tasto destro e selezionando "Crea nuova directory" nel tuo client FTP.

Passaggio 2: Accodamento del codice JavaScript in Tema WordPress

Ora che il tuo script jQuery è pronto, è ora di aggiungerlo nel tuo tema. Useremo il metodo corretto per aggiungere il javascript nel tuo tema, quindi basta incollare 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', vero); 

Questo è tutto, ora puoi aggiungere un widget nella barra laterale che desideri visualizzare con l'effetto fadein e quindi visitare il tuo sito Web per vederlo in azione.

Passaggio 3: rendere l'ultimo widget appiccicoso dopo la dissolvenza in vigore

Una funzionalità spesso desiderata con la dissolvenza in effetti consiste nel far scorrere l'ultimo widget della barra laterale mentre l'utente scorre. Questo è chiamato widget mobile o widget appiccicoso.

Se osservi il codice jQuery sopra, noterai che abbiamo aggiunto un wpbstickywidget Classe CSS per il widget dopo la dissolvenza in vigore. Puoi usare questa classe CSS per rendere il tuo ultimo widget appiccicoso dopo la dissolvenza. Tutto ciò che devi fare è incollare questo CSS sul 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 caratteri per rendere il widget ancora più prominente. Se lo desideri, puoi persino aggiungere una scroll scorrevole ad effetto top vicino al tuo ultimo widget che permetterà agli utenti di tornare indietro velocemente.

Speriamo che questo articolo ti abbia aiutato ad aggiungere una dissolvenza all'ultima widget nella barra laterale di WordPress. Per più bontà jQuery, controlla i migliori tutorial di jQuery per WordPress.

Se questo articolo ti è piaciuto, ti preghiamo di iscriverti al nostro canale YouTube per le esercitazioni video di WordPress. Puoi trovarci anche su Twitter e Google+.