Cum să faci ca ultimul widget din bara laterală din WordPress să apară treptat folosind jQuery

Recent, unul dintre utilizatorii noștri ne-a întrebat cum să adăugăm un efect de fade-in pentru ultimul widget din bara laterală. Acest efect popular jQuery este folosit pe multe site-uri și bloguri cunoscute. Pe măsură ce utilizatorul derulează pagina în jos, ultimul widget din bara laterală apare treptat și devine vizibil. Animația face widgetul atrăgător și vizibil, ceea ce crește dramatic rata de clic. În acest articol, vă vom arăta cum să faceți ca ultimul widget din bara laterală să apară treptat în WordPress folosind jQuery.

Mai jos este o demonstrație a cum ar arăta:

În acest tutorial, veți modifica fișierele temei dvs. Se recomandă să faceți backup temei dvs. înainte de a continua.

Pasul 1: Adăugarea JavaScript pentru efectul de estompare

Mai întâi, trebuie să adăugați codul jQuery la tema WordPress ca un fișier JavaScript separat. Începeți prin a deschide un fișier gol într-un editor de text precum Notepad. Apoi salvați acest fișier gol ca wpb_fadein_widget.js pe desktop și lipiți următorul cod în el.

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

Cea mai importantă linie din acest cod este var sidebarElement = $('div#secondary');.

Acesta este ID-ul div-ului care conține bara laterală. Deoarece fiecare temă poate folosi diferite div-uri de container pentru bara laterală, trebuie să aflați ID-ul containerului pe care tema dvs. îl folosește pentru bara laterală.

Puteți afla acest lucru folosind instrumentul Inspect Element din Google Chrome. Pur și simplu faceți clic dreapta pe bara laterală în Google Chrome, apoi selectați Inspect Element.

În codul sursă, veți putea vedea div-ul containerului barei laterale. De exemplu, tema implicită Twenty Twelve folosește secondary, iar Twenty Thirteen folosește tertiary ca ID pentru containerul barei laterale. Trebuie să înlocuiți secondary cu ID-ul div-ului containerului barei laterale.

Apoi, trebuie să folosiți un Client FTP pentru a încărca acest fișier în folderul js din directorul temei WordPress. Dacă directorul temei nu are un folder js, atunci trebuie să îl creați făcând clic dreapta și selectând „Create New Directory” în clientul FTP.

Pasul 2: Înregistrarea JavaScript-ului în Tema WordPress

Acum că scriptul dvs. jQuery este gata, este timpul să îl adăugați în tema dvs. Vom folosi metoda corectă de adăugare a javascriptului în tema dvs., așa că pur și simplu lipiți următorul cod în fișierul functions.php al temei dvs.

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

Acesta este totul, acum puteți adăuga un widget în bara laterală pe care doriți să apară cu efectul de estompare și apoi vizitați site-ul dvs. pentru a-l vedea în acțiune.

Pasul 3: Faceți ultimul widget lipicios după efectul de estompare

O caracteristică dorită adesea odată cu efectul de estompare este de a face ultimul widget din bara laterală să se deruleze pe măsură ce utilizatorul derulează. Aceasta se numește widget plutitor sau widget fix.

Dacă priviți codul jQuery de mai sus, veți observa că am adăugat o clasă CSS wpbstickywidget widget-ului după efectul de estompare. Puteți folosi această clasă CSS pentru a face ultimul widget lipicios după ce acesta dispare. Tot ce trebuie să faceți este să lipiți acest CSS în foaia de stil a temei dvs.

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

Simțiți-vă liber să modificați CSS-ul pentru a corespunde nevoilor dumneavoastră. Puteți schimba culoarea de fundal sau fonturile pentru a face widgetul și mai proeminent. Dacă doriți, puteți chiar adăuga un efect de derulare lină în sus lângă ultimul widget, care va permite utilizatorilor să deruleze rapid înapoi.

Sperăm că acest articol v-a ajutat să adăugați un efect de fade-in ultimului widget din bara laterală WordPress. Pentru mai multe informații despre jQuery, consultați cele mai bune tutoriale jQuery pentru WordPress.

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Google+.