Cum să fade în ultima Widget Sidebar în WordPress folosind jQuery

Recent, unul dintre utilizatorii noștri ne-a întrebat cum să adăugăm un efect de estompare în vigoare pentru ultimul widget din bara laterală. Acest efect popular jQuery este folosit pe multe site-uri și bloguri bine-cunoscute. Pe măsură ce utilizatorul scroll în jos pagina, ultimul widget din bara laterală se estompează și devine vizibil. Animația face widgetul atractiv și vizibil, ceea ce duce la o creștere drastică a ratei de clic. În acest articol, vă vom arăta cum să se estompeze în widgetul ultima bara laterală din WordPress utilizând jQuery.

Mai jos este un demo a ceea ce ar arata:

În acest tutorial, veți modifica fișierele tematice. Se recomandă să vă copiați tema înainte de a continua.

Pasul 1: Adăugarea JavaScript pentru Fadein Effect

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

 jQuery (document) .ready (functie ($) / ** * Configurare * Containerul pentru bara laterala de exemplu, deoparte, #sidebar etc * / var sidebarElement = $ ('div # secundar' există dacă ($ (sidebarElement) .length> 0) // Obțineți ultimul widget din bara laterală și poziția sa pe ecran var widgetDisplayed = false; var lastWidget = $ ('widget: last-child', $ )); var lastWidgetOffset = $ (lastWidget) .offset () top -100; // Ascunde ultimul widget $ (lastWidget) .hide (); // Verificați dacă scroll-ul utilizatorului a ajuns în vârful ultimului widget $ (document) .scroll (function () // Daca widget-ul a fost afisat, nu trebuie sa continuam sa facem cecul daca (widgetDisplayed) if ($ (this) .scrollTop ()> lastWidgetOffset ) $ (lastWidget) .fadeIn ('lent') addClass ('wpbstickywidget'); widgetDisplayed = true;);); 

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

Acesta este id-ul divului care conține bara laterală. Deoarece fiecare temă poate folosi diferite divs de contacte pentru bara laterală, trebuie să aflați idul containerului pe care tema dvs. îl folosește pentru bara laterală.

Puteți afla acest lucru utilizând instrumentul Element de inspectare în Google Chrome. Faceți clic dreapta pe bara laterală în Google Chrome și apoi selectați Inspectați elementul.

În codul sursă, veți putea vedea bara laterală a containerului div. De exemplu, implicit Twenty Twelve utilizări tematice secundar, și douăzeci și treisprezece utilizări terțiar ca ID pentru containerul bara laterală. Trebuie să înlocuiți secundar cu ID-ul containerului bara laterală div.

Apoi trebuie să utilizați un client FTP pentru a încărca acest fișier în directorul js din directorul tematic WordPress. Dacă directorul de teme nu are un dosar JS, atunci trebuie să-l creați făcând clic dreapta și selectând "Crearea unui nou director" în clientul dvs. FTP.

Pasul 2: Includerea JavaScript în 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 javascript-ului în tema dvs., așa că pur și simplu lipiți următorul cod în fișierul functions.php al temei.

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

Asta e tot, acum puteți adăuga un widget în bara laterală pe care doriți să apară cu efectul fadein și apoi vizitați site-ul dvs. web pentru ao vedea în acțiune.

Pasul 3: Efectuarea ultimei aplicații widget după ce efectul se estompează

O caracteristică adesea dorită cu efectul de estompare este de a face ultima widget-ul lateral al barei laterale pe măsură ce derulează utilizatorul. Acesta este numit widget plutitor sau widget lipicios.

Dacă te uiți la codul jQuery de mai sus, vei observa că am adăugat a wpbstickywidget Clasa CSS pentru widget după ce efectul de estompare a fost în vigoare. Puteți folosi această clasă CSS pentru a face ca ultimul dvs. widget să rămână lipicios după ce acesta se estompează. Tot ce trebuie să faceți este să inserați acest CSS în foaia de stil a temei.

 .wpbstickywidget poziție: fix; top: 0px;  

Nu ezitați să modificați CSS pentru a vă satisface nevoile. Puteți modifica culoarea sau fonturile de fundal pentru a face widget-ul chiar mai proeminent. Dacă doriți, puteți adăuga chiar și o derulare netedă la efectul de top alături de ultimul dvs. widget, ceea ce va permite utilizatorilor să se deplaseze rapid înapoi.

Sperăm că acest articol v-a ajutat să adăugați un efect de estompare în ultimul widget din bara laterală dvs. WordPress. Pentru mai multă bunătate jQuery, verificați cele mai bune tutoriale ale jQuery pentru WordPress.

Dacă v-ați plăcut acest articol, vă rugăm să vă abonați la tutorialele video YouTube pentru canalul YouTube pentru WordPress. Ne puteți găsi pe Twitter și pe Google+.