Hur man tona in den sista sidofältswidgeten i WordPress med jQuery

Nyligen frågade en av våra användare oss om hur man lägger till en fade-in-effekt 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 skrollar ner på sidan, tonar 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 hur du tonar in den sista sidofältswidgeten i WordPress med jQuery.

Nedan finns 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.

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

Först måste du lägga till jQuery-koden i 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å ditt skrivbord 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#secondary');.

Detta är ID:t för div:en som innehåller din sidopanel. Eftersom varje tema kan använda olika sidopanelsbehållare, måste du ta reda på vilket behållar-ID ditt tema använder för sidopanelen.

Du kan ta reda på detta genom att använda verktyget Inspektera element i Google Chrome. Högerklicka helt enkelt på din sidopanel i Google Chrome och välj sedan Inspektera element.

I källkoden kommer du att kunna se din sidofältsbehållares div. Till exempel använder standardtemat Twenty Twelve secondary, och Twenty Thirteen använder tertiary som ID för sidofältsbehållaren. Du behöver ersätta secondary med ID:t för din sidofältsbehållares div.

Därefter behöver du använda en FTP-klient för att ladda upp den här filen till js-mappen inuti 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: Registrera 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 den korrekta metoden för att lägga till javascript i ditt tema, så klistra helt enkelt in följande kod i din 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 lägga till en widget i din sidopanel 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 klistrig efter fade-in-effekten

En ofta önskad funktion med fade in-effekten är att få det sista sidofältswidgeten att rulla med användaren när de scrollar. Detta kallas flytande widget eller klistrig widget.

Om du tittar på jQuery-koden ovan kommer du att märka att vi lade till en CSS-klass wpbstickywidget till widgeten efter fade in-effekten. Du kan använda denna CSS-klass för att göra din sista widget klistrig efter att den tonas 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 fri att ändra CSS för att uppfylla dina behov. Du kan ändra bakgrundsfärgen eller typsnitten för att göra widgeten ännu mer framträdande. Om du vill kan du till och med lägga till en jämn scrollning till toppen-effekt bredvid din sista widget, vilket gör att användarna snabbt kan scrolla tillbaka.

Vi hoppas att den här artikeln hjälpte dig att lägga till en fade-in-effekt till den sista widgeten i ditt WordPress-sidofält. För mer jQuery-godis, kolla in de bästa jQuery-handledningarna för WordPress.

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