Jak dodać efekt zanikania do ostatniego widżetu paska bocznego w WordPress przy użyciu jQuery

Ostatnio jeden z naszych użytkowników zapytał nas, jak dodać efekt zanikania dla ostatniego widżetu na pasku bocznym. Ten popularny efekt jQuery jest używany na wielu znanych stronach internetowych i blogach. Gdy użytkownik przewija stronę w dół, ostatni widżet na pasku bocznym zanika i staje się widoczny. Animacja sprawia, że widżet przyciąga wzrok i jest zauważalny, co znacznie zwiększa współczynnik klikalności. W tym artykule pokażemy, jak dodać efekt zanikania do ostatniego widżetu na pasku bocznym w WordPress przy użyciu jQuery.

Poniżej znajduje się demo tego, jak to będzie wyglądać:

W tym samouczku będziesz modyfikować pliki swojego motywu. Zaleca się wykonanie kopii zapasowej motywu przed dalszymi działaniami.

Krok 1: Dodawanie kodu JavaScript dla efektu zanikania

Najpierw musisz dodać kod jQuery do swojego motywu WordPress jako oddzielny 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 pulpicie i wklej do niego poniższy kod.

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

Najważniejsza linia w tym kodzie to var sidebarElement = $('div#secondary');.

To jest identyfikator elementu div zawierającego Twój pasek boczny. Ponieważ każdy motyw może używać różnych kontenerów paska bocznego, musisz znaleźć identyfikator kontenera, którego Twój motyw używa dla paska bocznego.

Możesz to sprawdzić, używając narzędzia „Zbadaj element” w Google Chrome. Kliknij prawym przyciskiem myszy na swoim pasku bocznym w Google Chrome, a następnie wybierz „Zbadaj element”.

W kodzie źródłowym będziesz mógł zobaczyć swój kontener bocznego paska. Na przykład, domyślny motyw Twenty Twelve używa secondary, a Twenty Thirteen używa tertiary jako identyfikatora dla kontenera bocznego paska. Musisz zastąpić secondary identyfikatorem swojego kontenera bocznego paska.

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

Krok 2: Dodawanie skryptów JavaScript w motywie WordPress

Teraz, gdy twój skrypt jQuery jest gotowy, czas dodać go do swojego motywu. Użyjemy właściwej metody dodawania javascriptu do swojego motywu, więc po prostu wklej poniższy kod do pliku functions.php swojego 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 do swojego paska bocznego, który chcesz, aby pojawił się z efektem zanikania, a następnie odwiedź swoją stronę internetową, aby zobaczyć go w akcji.

Krok 3: Sprawienie, by ostatni widżet był lepki po efekcie zanikania

Często pożądaną funkcją z efektem zanikania jest sprawienie, aby ostatni widżet paska bocznego przewijał się wraz z przewijaniem przez użytkownika. Nazywa się to pływającym widżetem lub przyklejonym 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 ostatni widżet był przyklejony po jego zaniknięciu. Wystarczy wkleić ten kod CSS do arkusza stylów Twojego motywu.

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

Zachęcamy do modyfikacji CSS, aby spełnić Twoje potrzeby. Możesz zmienić kolor tła lub czcionki, aby widżet był jeszcze bardziej widoczny. Jeśli chcesz, możesz nawet dodać efekt płynnego przewijania do góry obok ostatniego widżetu, co pozwoli użytkownikom szybko przewinąć z powrotem.

Mamy nadzieję, że ten artykuł pomógł Ci dodać efekt zanikania do ostatniego widżetu na pasku bocznym WordPress. Więcej poradników jQuery znajdziesz w najlepszych samouczkach jQuery dla WordPress.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube z samouczkami wideo dotyczącymi WordPressa. Możesz nas również znaleźć na Twitterze i Google+.