Hur man tonar in widgeten Last Sidebar i WordPress med hjälp av jQuery

Senast frågade en av våra användare oss om hur man addar en fade in effekt för den sista widgeten i sidebaren. Denna populära jQuery-effekt används på många välkända websites och bloggar. När användaren rullar ner på sidan tonas den sista widgeten i sidebaren in och blir synlig. Animationen gör widgeten iögonfallande och notice vilket dramatiskt ökar click through rate. I den här artikeln visar vi you hur man tonar in den sista widgeten i sidebar i WordPress med hjälp av jQuery.

Under är en demo av hur det skulle gilla att se ut:

I denna tutorial kommer du att ändra dina theme-filer. Vi rekommenderar att du gör en backup av ditt theme innan du går vidare.

Step-by-Step 1: Lägga till JavaScript för Fadein-effekt

Det första du behöver add to är jQuery-koden till ditt WordPress theme som en separat JavaScript-fil. Börja med att öppna en tom fil i en textredigerare som gillar Notepad. Spara sedan denna tomma fil som wpb_fadein_widget.js på ditt skrivbord och klistra in följande kod i den.

jQuery(document).ready(function($) {
/**
* Konfigurera
* Containern för din sidebar, t.ex. notis, #sidebar etc.
*/

var sidebarElement = $('div#secondary');


// Kontrollera om sidebaren finns
if ($(sidebarElement).length > 0) {

// Hämta det sista widgetet i sidebaren och dess position på vyn

var widgetDisplayed = false;
var lastWidget = $('.widget:last-child', $(sidebarElement));
var lastWidgetOffset = $(lastWidget).förskjutning().högst upp -100;
	
// Dölj den sista widgeten
$(lastWidget).dölj();
	
// Kontrollera om användarens rulla har nått högst upp i den sista widgeten och visa den
$(document).scroll(function() {

// Om widgeten har displayed, behöver vi inte fortsätta att kontrollera.

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#secondary');.

Detta är ID:n för div:en som innehåller din sidebar. Eftersom varje theme kan använda olika sidebar container divs, måste you ta reda på container ID:n som your theme använder för sidebar.

Du kan ta reda på detta genom att använda inspect element tool i Google Chrome. Högerklicka helt enkelt på din sidebar i Google Chrome och välj sedan Inspect Element.

I källkoden kommer du att kunna se din sidebar container div. Till exempel använder standardtemat Twenty Twelve secondary, och Twenty Thirteen använder teritary som ID:n för sidebarens container. You need to replace secondary with the ID:n för din sidebar container div.

Därefter måste du använda en FTP-klient för att uploada den här filen till mappen js i din WordPress theme directory. Om din theme directory inte har en js folder, då måste du skapa den genom att högerklicka och välja ”Create New Directory” i din FTP-klient.

Step 2: Lägga in ditt JavaScript i kö i WordPress Theme

Nu när ditt jQuery-skript är klart är det dags att add to det i ditt theme. Vi kommer att använda den korrekta metoden för att lägga till JavaScript i ditt tema, så klistra bara in följande kod i ditt temas functions.php-fil.

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

Det var allt, nu kan du add to en widget i din sidebar som du vill ska visas med fadein-effekten och sedan besöka din website för att se den i action.

Step 3: Göra den sista widgeten sticky efter fade in-effekten

En ofta önskad funktion med fade in-effekten är att få den sista sidebar-widgeten att rulla när användaren rullar. Detta anropas flytande widget eller sticky widget.

Om du tittar på jQuery-koden ovan kommer du att notera att vi adderade en wpbstickywidget CSS-klass till widgeten efter fade in-effekten. Du kan använda den här CSS-klassen för att göra din sista widget sticky efter att den har tonat in. Allt du behöver göra är att klistra in denna CSS i ditt temas stylesheet.

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

Känn dig gratis att ändra CSS för att möta dina behov. Du kan ändra bakgrundsfärg eller font för att göra widgeten ännu mer framträdande. Om du vill kan du även add to en smooth scroll to top-effekt bredvid din sista widget som tillåter användare att rulla tillbaka snabbt.

Vi hoppas att den här artikeln hjälpte dig att add to en fade in-effekt till den sista widgeten i ditt sidebar i WordPress. För mer jQuery-godis, kontrollera de bästa jQuery tutorials för WordPress.

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