Hur bleknar jag i den sista sidofÀltwidgeten i WordPress med jQuery

Hur bleknar jag i den sista sidofÀltwidgeten i WordPress med jQuery

Nyligen frÄgade en av vÄra anvÀndare oss om hur man lÀgger till en blekning för den sista widgeten i sidofÀltet. Denna populÀra jQuery-effekt anvÀnds pÄ mÄnga vÀlkÀnda webbplatser och bloggar. NÀr anvÀndaren rullar ner pÄ sidan bleknar den sista widgeten i sidofÀltet in och blir synlig. Animationen gör widgeten iögonfallande och mÀrkbar vilket dramatiskt ökar klickfrekvensen. I den hÀr artikeln visar vi dig hur du bleknar i den sista sidofÀltwidgeten i WordPress med jQuery.

Nedan följer en demo av hur det skulle se ut:

I den hÀr handledningen kommer du att Àndra dina temafiler. Det rekommenderas att du sÀkerhetskopierar ditt tema innan du fortsÀtter vidare.

Steg 1: LÀgga till JavaScript för Fadein-effekt

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


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

Den viktigaste raden i den hĂ€r koden Ă€r var sidebarElement = $ (‘div # sekundĂ€r’) ;.

Detta Àr id för div som innehÄller din sidofÀlt. Eftersom varje tema kan anvÀnda olika sidfÀltbehÄllardivs mÄste du ta reda pÄ behÄllar-id som ditt tema anvÀnder för sidofÀltet.

Du kan ta reda pÄ detta med hjÀlp av verktyget inspekteringselement i Google Chrome. Högerklicka bara pÄ din sidofÀlt i Google Chrome och vÀlj sedan Inspektera element.

Hitta sidfÀltets container-id i kÀllkoden

I kÀllkoden kommer du att kunna se din sidofÀltbehÄllardiv. Till exempel anvÀnder standard Twenty Twelve-temat sekundÀrt, och Twenty Thirteen anvÀnder teritÀr som ID för sidofÀltbehÄllaren. Du mÄste ersÀtta sekundÀrt med ID för din sidofÀltbehÄllardiv.

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 ny katalog” i din FTP-klient.

Steg 2: StÀnga av ditt JavaScript i WordPress-tema

Nu nÀr ditt jQuery-skript Àr klart Àr det dags att lÀgga till det i ditt tema. Vi kommer att anvÀnda rÀtt metod för att lÀgga till javaskriptet i ditt tema, sÄ klistrar du bara in följande kod i 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 sidofÀltet som du vill ska visas med fadein-effekten och sedan besöka din webbplats för att se den i aktion.

Steg 3: Gör den sista widgeten klibbig efter blekningen

En ofta önskad funktion med blekningen Àr att lÄta den sista sidofÀltet rulla nÀr anvÀndaren rullar. Detta kallas flytande widget eller klibbig widget.

Om du tittar pÄ jQuery-koden ovan kommer du att mÀrka att vi har lagt till en wpbstickywidget CSS-klass i widgeten efter att blekningen har trÀtt i kraft. Du kan anvÀnda den hÀr CSS-klassen för att göra din sista widget klibbig efter att den bleknar in. Allt du behöver göra Àr att klistra in den hÀr CSS i temat.


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

Ändra gĂ€rna CSS för att möta dina behov. Du kan Ă€ndra bakgrundsfĂ€rg eller teckensnitt för att göra widgeten Ă€nnu mer framtrĂ€dande. Om du vill kan du till och med lĂ€gga till en smidig rullning till toppeffekt bredvid din senaste widget som gör att anvĂ€ndare kan blĂ€ddra tillbaka snabbt.

Vi hoppas att den hÀr artikeln hjÀlpte dig att lÀgga till en blekning till den sista widgeten i ditt WordPress-sidofÀlt. För mer jQuery godhet, kolla in de bÀsta jQuery tutorials för WordPress.

Om du gillade den hÀr artikeln, prenumerera sedan pÄ vÄr YouTube-kanal för WordPress-sjÀlvstudier. Du kan ocksÄ hitta oss pÄ Twitter och Google+.