Hvordan fade i den siste sidefeltet Widget i WordPress ved hjelp av jQuery

Nylig spurte en av brukerne oss om hvordan du legger til en fade i effekt for den siste widgeten i sidefeltet. Denne populære jQuery-effekten brukes på mange kjente nettsteder og blogger. Når brukeren ruller nedover siden, blir den siste widgeten i sidefeltet fasjonabel og synlig. Animasjonen gjør widgeten iøynefallende og merkbar som dramatisk øker klikkfrekvensen. I denne artikkelen vil vi vise deg hvordan du kan fade i den siste sidebar-widgeten i WordPress ved hjelp av jQuery.

Nedenfor er en demonstrasjon av hvordan det vil se ut:

I denne opplæringen vil du endre temafiler. Det anbefales at du sikkerhetskopierer temaet ditt før du fortsetter videre.

Trinn 1: Legge til JavaScript for Fadein Effect

Først må du legge til er jQuery-koden til WordPress-temaet ditt som en egen JavaScript-fil. Start med å åpne en tom fil i et tekstredigeringsprogram som Notisblokk. Neste lagre denne tomme filen som wpb_fadein_widget.js på skrivebordet ditt og lim inn følgende kode i den.

 jQuery (dokument) .ready (funksjon ($) / ** * Konfigurasjon * Beholderen til sidebjørnet ditt, f.eks. sideord, #sidebar etc. * / var sidebarElement = $ ('div # sekundær'); // Sjekk om sidebjelken eksisterer hvis ($ (sidebarElement) .length> 0) // Få den siste widgeten i sidelinjen, og dens posisjon på skjermen var widgetDisplayed = false; var lastWidget = $ ('. widget: sist barn', $ (sidebarElement )), var lastWidgetOffset = $ (lastWidget) .offset (). topp -100; // Skjul den siste widgeten $ (lastWidget) .hide (); // Sjekk om brukerrollen har nådd toppen av den siste widgeten og visningen det $ (dokument) .scroll (funksjon () // Hvis widgeten har blitt vist, behøver vi ikke fortsette å gjøre en sjekk. Hvis (! widgetDisplayed) if ($ (this) .scrollTop ()> lastWidgetOffset ) $ (lastWidget) .fadeIn ('slow'). addClass ('wpbstickywidget'); widgetDisplayed = true;;;); 

Den viktigste linjen i denne koden er var sidebarElement = $ ('div # sekundær');.

Dette er id av div som inneholder sidebjelken. Siden hvert tema kan bruke forskjellige sidebar container divs, må du finne ut den container ID som temaet ditt bruker for sidebjellet.

Du kan finne ut dette ved hjelp av inspeksjonselementverktøyet i Google Chrome. Bare høyreklikk på sidelinjen din i Google Chrome, og velg deretter Inspiser element.

I kildekoden kan du se sidebar container div. For eksempel bruker standard Twenty Twelve tema sekundær, og tjue tretten bruk tertiær som ID for sidebarbeholderen. Du må bytte ut sekundær med ID på sidebar container div.

Deretter må du bruke en FTP-klient for å laste opp denne filen til js-mappen i WordPress-temakatalogen. Hvis temakatalogen din ikke har en js-mappe, må du opprette den ved å høyreklikke og velge "Opprett ny katalog" i FTP-klienten din.

Trinn 2: Enqueuing JavaScript i WordPress Theme

Nå som jQuery-skriptet ditt er klart, er det på tide å legge det til i temaet ditt. Vi vil bruke riktig metode for å legge til javascript i temaet ditt, så rett og slett lim inn følgende kode i temaets funksjoner.php-fil.

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

Det er alt, nå kan du legge til en widget i sidebjelken du vil se med fadein-effekten, og deretter besøke nettstedet ditt for å se det i aksjon.

Trinn 3: Gjør den siste widgeten klebrig etter Fade in Effect

En ofte ønsket funksjon med fade i effekt er å gjøre den siste sidebar-widgeten rulle mens brukeren ruller. Dette kalles flytende widget eller klebrig widget.

Hvis du ser på jQuery-koden ovenfor, vil du legge merke til at vi la til en wpbstickywidget CSS klasse til widgeten etter fading i effekt. Du kan bruke denne CSS-klassen til å gjøre den siste widgeten din klebrig etter at den forsvinner. Alt du trenger å gjøre er å lime dette CSS til temaets stilark.

 .wpbstickywidget posisjon: fast; top: 0px;  

Du er velkommen til å endre CSS for å dekke dine behov. Du kan endre bakgrunnsfarge eller skrifttyper for å gjøre widgeten enda mer fremtredende. Hvis du vil, kan du til og med legge til en jevn rulle til øverste effekt ved siden av den siste widgeten, slik at brukerne kan rulle tilbake raskt.

Vi håper denne artikkelen hjalp deg med å legge til en fading i effekt til den siste widgeten i WordPress sidebjelke. For mer jQuery godhet, sjekk ut de beste jQuery-opplæringene for WordPress.

Hvis du likte denne artikkelen, vennligst abonner på vår YouTube Channel for WordPress-videoopplæringsprogrammer. Du kan også finne oss på Twitter og Google+.