Hur att blekna i den senaste Sidebar Widget i WordPress med jQuery

Nyligen frågade en av våra användare om hur man lägger till en blekning för den sista widgeten i sidofältet. Den här populära jQuery-effekten används på många kända webbplatser och bloggar. När användaren rullar ner på sidan, kommer den sista widgeten i sidofältet att dyka in och bli synlig. Animeringen gör widgeten ögonblicklig och märkbar som dramatiskt ökar klickfrekvensen. I den här artikeln kommer vi att visa dig hur du bleknar i den senaste sidofältet i WordPress med jQuery.

Nedan är en demonstration av hur det skulle se ut:

I denna handledning kommer du att ändra dina temafiler. Vi rekommenderar att du säkerhetskopierar ditt tema innan du fortsätter.

Steg 1: Lägga till JavaScript för Fadein Effect

Först måste du lägga till är jQuery-koden till ditt WordPress-tema som en separat JavaScript-fil. Börja med att öppna en tom fil i en textredigerare som Anteckningsblock. Spara sedan den här tomma filen som wpb_fadein_widget.js på skrivbordet och klistra in följande kod inuti den.

 jQuery (dokument) .ready (funktion ($) / ** * Konfiguration * Behållaren till ditt sidofält, t.ex. åt sidan, #sidebar etc. * / var sidebarElement = $ ('div # secondary'); // Kontrollera om sidofältet existerar om ($ (sidebarElement) .length> 0) // Hämta den senaste widgeten i sidofältet och dess position på skärmen var widgetDisplayed = false; var lastWidget = $ ('widget: sista barn', $ (sidebarElement )), var lastWidgetOffset = $ (lastWidgetOffset = $ (lastWidget) .offset (). top -100; // Dölj den senaste widgeten $ (lastWidget) .hide (); // Kontrollera om användarens rullning har nått toppen av den senaste widgeten och visningen det $ (dokument) .scroll (funktion () // Om widgeten har visats behöver vi inte fortsätta göra en kontroll. Om (! widgetDisplayed) if ($ (this) .scrollTop ()> lastWidgetOffset ) $ (lastWidget) .fadeIn ('slow'). addClass ('wpbstickywidget'); widgetDisplayed = true;;)); 

Den viktigaste raden i denna kod är var sidebarElement = $ ('div # secondary');.

Detta är id av div som innehåller ditt sidofält. Eftersom varje tema kan använda olika sidofältbehållardelar måste du ta reda på det container-ID som ditt tema använder för sidofältet.

Du kan hitta det här med hjälp av inspektionselementverktyget i Google Chrome. Högerklicka bara på din sidofält i Google Chrome och välj sedan Inspektera element.

I källkoden kan du se din sidofältcontainer div. Till exempel använder standard Twenty Twelve-temat sekundär, och tjugo tretton användningar tertiär som ID för sidofältbehållaren. Du måste byta ut sekundär med ID för din sidebar container div.

Därefter måste du använda en FTP-klient för att ladda upp den här filen till js-mappen i din WordPress-temakatalog. Om din temakatalog inte har en js-mapp måste du skapa den genom att högerklicka och välja "Skapa nytt katalog" i din FTP-klient.

Steg 2: Enqueuing JavaScript i WordPress Theme

Nu när ditt jQuery-skript är klart är det dags att lägga till det i ditt tema. Vi använder rätt metod för att lägga till javascript i ditt tema, så klistra in följande kod i ditt temas funktioner.php-fil.

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

Det är allt, nu kan du lägga till en widget i ditt sidofält som du vill visas med fadein-effekten och sedan besöka din webbplats för att se den i aktion.

Steg 3: Gör den senaste widgeten klibbig efter blekningen i effekt

En ofta önskad funktion med försvinnande effekt är att göra det sista sidfältet rullning som användaren rullar. Detta kallas flytande widget eller klibbig widget.

Om du tittar på jQuery-koden ovan kommer du att märka att vi lagt till en wpbstickywidget CSS klass till widgeten efter blekningen inverkan. Du kan använda den här CSS-klassen för att göra din senaste widget klibbig efter att den blinkar in. Allt du behöver göra är att klistra in den här CSS-enheten till ditt temas stilark.

 .wpbstickywidget position: fixed; top: 0px;  

Gärna ändra CSS för att möta dina behov. Du kan ändra bakgrundsfärgen eller teckensnittet för att göra widgeten ännu mer framträdande. Om du vill kan du till och med lägga till en smidig bläddring till högerffekten bredvid din senaste widget som gör det möjligt för användare att rulla tillbaka snabbt.

Vi hoppas att den här artikeln har hjälpt dig att lägga till en nyans i effekten till den senaste widgeten i sidfältet i WordPress. För mer jQuery godhet, kolla in de bästa jQuery-handledningarna för WordPress.

Om du gillade den här artikeln kan du prenumerera på vår YouTube-kanal för WordPress-videoinstruktioner. Du kan också hitta oss på Twitter och Google+.