Jak zniknąć w ostatnim panelu bocznym widżetu w WordPress przy użyciu jQuery

Niedawno jeden z naszych użytkowników zapytał nas o to, jak dodać efekt zanikania dla ostatniego widżetu w panelu bocznym. Ten popularny efekt jQuery jest używany na wielu znanych witrynach internetowych i blogach. Gdy użytkownik przewija stronę w dół, ostatni widżet w panelu bocznym zanika i staje się widoczny. Animacja sprawia, że widżet przyciąga wzrok i daje się powiadomić, co znacznie zwiększa współczynnik klikalności. W tym artykule pokażemy, jak wygasić ostatni panel boczny w WordPressie za pomocą jQuery.

Poniżej znajduje się demonstracja tego, jak to wygląda:

W tym poradniku będziesz modyfikował pliki twojego motywu. Zaleca się wykonanie kopii zapasowej twojego motywu przed przejściem dalej.

Krok 1: Dodanie JavaScript dla efektu Fadein

Najpierw musisz dodać kod jQuery do twojego motywu WordPress jako osobny plik JavaScript. Zacznij od otwarcia pustego pliku w edytorze tekstu, takim jak Notatnik. Następnie zapisz ten pusty plik jako wpb_fadein_widget.js na twoim pulpicie i wklej do niego następujący kod.

.
jQuery(document).ready(function($) {
/**
* Konfiguracja
* Kontener dla twojego panelu bocznego, np. aside, #sidebar itp.
*/

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


// Sprawdź, czy panel boczny istnieje
if ($(sidebarElement).length > 0) {

// Pobierz ostatni widżet w panelu bocznym i jego pozycję na ekranie

var widgetDisplayed = false;
var lastWidget = $('.widget:last-child', $(sidebarElement));
var lastWidgetOffset = $(lastWidget).offset().top -100;
	
// Ukryj ostatni widżet
$(lastWidget).hide();
	
// Sprawdź, czy przewijanie użytkownika osiągnęło górę ostatniego widżetu i wyświetl go
$(document).scroll(function() {

// Jeśli widżet został wyświetlony, nie musimy kontynuować sprawdzania.

if (!widgetDisplayed) {
if($(this).scrollTop() > lastWidgetOffset) {
$(lastWidget).fadeIn('slow').addClass('wpbstickywidget');
widgetDisplayed = true;  
}
}
});
}
});

.

Najbardziej importowaną linią w tym kodzie jest var sidebarElement = $('div#secondary');.

Jest to identyfikator elementu div zawierającego twój panel boczny. Ponieważ każdy motyw może używać różnych divów kontenera paska bocznego, musisz znaleźć identyfikator kontenera, którego twój motyw używa dla paska bocznego.

Można to sprawdzić za pomocą narzędzia inspect element w przeglądarce Google Chrome. Wystarczy kliknąć prawym przyciskiem myszy na twój panel boczny w Google Chrome, a następnie wybrać Inspect Element.

W kodzie źródłowym będziesz mógł zobaczyć twój panel boczny. Na przykład domyślny motyw Twenty Twelve używa secondary, a Twenty Thirteen używa teritary jako identyfikatora panelu bocznego. Musisz zastąpić secondary identyfikatorem twojego panelu bocznego.

Następnie musisz użyć klienta FTP, aby przesłać ten plik do katalogu js w twoim katalogu motywu WordPress. Jeśli twój katalog motywu nie ma folderu js, musisz go utworzyć, klikając prawym przyciskiem myszy i wybierając opcję „Utwórz nowy katalog” w kliencie FTP.

Krok 2: Zapisanie twojego skryptu JavaScript w motywie WordPress

Teraz, gdy twój skrypt jQuery jest gotowy, nadszedł czas, aby dodać go do twojego motywu. Użyjemy właściwej metody dodawania javascript do twojego motywu, więc po prostu wklej następujący kod do pliku functions.php twojego motywu.

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

.

To wszystko, teraz możesz dodać widżet w panelu bocznym, który ma się wyświetlać z efektem fadein, a następnie przejdź na twoją witrynę internetową, aby zobaczyć go w działaniu.

Krok 3: Przypięty ostatni widżet po efekcie fade in

Często pożądaną funkcją efektu zanikania jest przewijanie ostatniego widżetu panelu bocznego podczas przewijania strony przez użytkownika. Nazywa się to pływającym widżetem lub przypiętym widżetem.

Jeśli spojrzysz na powyższy kod jQuery, zauważysz, że dodaliśmy klasę CSS wpbstickywidget do widżetu po efekcie zanikania. Możesz użyć tej klasy CSS, aby twój ostatni widżet był przypięty po zaniku. Wszystko, co musisz zrobić, to wkleić ten CSS do arkusza stylów twojego motywu.

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

.

Możesz dowolnie modyfikować CSS, aby dostosować go do twoich potrzeb. Możesz zmienić kolor tła lub krój pisma, aby widżet był jeszcze bardziej widoczny. Jeśli chcesz, możesz nawet dodać efekt płynnego przewijania do góry obok twojego ostatniego widżetu, co pozwoli użytkownikom na szybkie przewijanie do tyłu.

Mamy nadzieję, że ten artykuł pomógł ci dodać efekt zanikania do ostatniego widżetu na twoim panelu bocznym WordPress. Aby dowiedzieć się więcej o jQuery, sprawdź najlepsze poradniki jQuery dla WordPress.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube, aby zobaczyć poradniki dotyczące filmów WordPress. Możesz nas również znaleźć na Twitterze i Google+.