Hoe de laatste zijbalk-widget in WordPress Fade met behulp van jQuery

Onlangs vroeg een van onze gebruikers ons hoe een fade in effect toe te voegen voor de laatste widget in de zijbalk. Dit populaire jQuery-effect wordt gebruikt op veel bekende websites en blogs. Terwijl de gebruiker de pagina afrolt, verdwijnt de laatste widget in de zijbalk en wordt zichtbaar. De animatie maakt de widget eye-catchy en merkbaar, waardoor de klikfrequentie aanzienlijk wordt verhoogd. In dit artikel laten we je zien hoe je de laatste zijbalk-widget in WordPress vervaagt met jQuery.

Hieronder is een demo van hoe het eruit zou zien:

In deze tutorial zal je je themabestanden aanpassen. We raden u aan een back-up van uw thema te maken voordat u verder gaat.

Stap 1: JavaScript toevoegen voor Fadein-effect

Eerst moet u de jQuery-code toevoegen aan uw WordPress-thema als een apart JavaScript-bestand. Begin met het openen van een leeg bestand in een teksteditor zoals Kladblok. Sla dit lege bestand vervolgens op als wpb_fadein_widget.js op je bureaublad en plak de volgende code erin.

 jQuery (document) .ready (function ($) / ** * Configuratie * De container voor uw zijbalk, bijv. opzij, #sidebar etc. * / var sidebarElement = $ ('div # secondary'); // Controleer of de zijbalk bestaat als ($ (sidebarElement) .length> 0) // Haal de laatste widget in de zijbalk en de positie op het scherm var widgetDisplayed = false; var lastWidget = $ ('. widget: last-child', $ (sidebarElement )); var lastWidgetOffset = $ (lastWidget) .offset (). top -100; // Verberg de laatste widget $ (lastWidget) .hide (); // Controleer of de scroll van de gebruiker de top van de laatste widget heeft bereikt en weergeven it $ (document) .scroll (function () // Als de widget is weergegeven, hoeven we geen controle uit te voeren. if (! widgetDisplayed) if ($ (this) .scrollTop ()> lastWidgetOffset ) $ (lastWidget) .fadeIn ('langzaam'). addClass ('wpbstickywidget'); widgetDisplayed = true;);); 

De belangrijkste regel in deze code is var sidebarElement = $ ('div # secondary');.

Dit is de id van de div die je zijbalk bevat. Aangezien elk thema verschillende sidebar-container-divs kan gebruiken, moet je de container-ID achterhalen die je thema gebruikt voor de zijbalk.

U kunt dit achterhalen met de tool voor het inspecteren van elementen in Google Chrome. Klik met de rechtermuisknop op uw zijbalk in Google Chrome en selecteer Inspect Element.

In de broncode kun je je sidebar-container-div zien. Het standaard Twenty Twelve-thema wordt bijvoorbeeld gebruikt tweede, en Twenty Thirteen uses tertiaire als de ID voor de sidebar-container. Je moet vervangen tweede met de ID van uw sidebar-container div.

Vervolgens moet u een FTP-client gebruiken om dit bestand te uploaden naar de js-map in uw WordPress themabestand. Als je themadirectory geen js-map heeft, moet je deze maken door met de rechtermuisknop te klikken en 'Nieuwe directory maken' te selecteren in je FTP-client..

Stap 2: uw JavaScript in het WordPress-thema plaatsen

Nu je jQuery-script klaar is, is het tijd om het toe te voegen aan je thema. We zullen de juiste methode gebruiken om het javascript in uw thema toe te voegen, dus u plakt gewoon de volgende code in het function.php bestand van uw thema..

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

Dat is alles, nu kunt u een widget in uw zijbalk toevoegen die u met het fadeïne-effect wilt weergeven en vervolgens uw website bezoeken om deze in actie te zien.

Stap 3: De laatste widget kleverig maken na de Fade in Effect

Een vaak gewenste functie met het fade-in effect is om de laatste sidebar-widget te laten scrollen terwijl de gebruiker scrolt. Dit wordt een zwevende widget of een sticky-widget genoemd.

Als je de bovenstaande jQuery-code bekijkt, zul je merken dat we een wpbstickywidget CSS-klasse naar de widget na het fade-in-effect. U kunt deze CSS-klasse gebruiken om uw laatste widget plakkerig te maken nadat deze is doorgevoerd. U hoeft deze CSS alleen in de stylesheet van uw thema te plakken..

 .wpbstickywidget position: fixed; top: 0px;  

U kunt de CSS aanpassen aan uw behoeften. U kunt de achtergrondkleur of -lettertypen wijzigen om de widget nog prominenter te maken. Als u wilt, kunt u zelfs een vloeiend schuiven toevoegen aan het topeffect naast uw laatste widget, zodat gebruikers snel terug kunnen bladeren.

We hopen dat dit artikel je heeft geholpen om een ​​vervaging toe te voegen aan de laatste widget in je WordPress zijbalk. Voor meer goedheid jQuery, bekijk de beste jQuery-tutorials voor WordPress.

Als je dit artikel leuk vond, meld je dan aan voor onze YouTube-video-tutorials over WordPress. U kunt ons ook vinden op Twitter en Google+.