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+.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Roger Perkin says
I am trying to implement this on my site but it’s not working
2 Questions
are you able to check my site and verify the sidebar div id?
Also should the enqueue script be get_stylesheet_directory_uri() . and not get_template_directory
Thanks – would love to get this working
Roger
Jonathan says
I was wondering can this be done instead off fade in to fade out an sticky widget??
WPBeginner Support says
Try replacing fadeIn with fadeOut in the JavaScript.
Administrator
Johnny says
Hi I’m trying to implement this on my page and can’t seem to get it working. Added the .js file to my theme directory’s js folder and added it to my functions.php and no fade is showing. Where exactly should I be adding it in my functions.php as it’s a big file.
I’m using twenty fourteen, and my sidebar ID is „content-sidebar” which I have changed in the .js file. I have a few other widgets in the sidebar so perhaps something is conflicting?
Any help is appreciated! Thanks.
Johnny says
Here is my .JS Code
jQuery(document).ready(function($) {
/**
* Configuration
* The container for your sidebar e.g. aside, #sidebar etc.
*/
var sidebarElement = $(’div#content-sidebar’);
// 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;
}
}
});
}
});
WPBeginner Support says
Try deactivating all your plugins and see if it works. You can also use inspect element to see if there are any errors.
Administrator
bb says
Hi wpbeginner, I love this tweak and the solution you’ve been giving to the community, thanks a million! I have a question, please, how can I integrate or if there’s a plugin/solution that can be use to query application forms submitted by applicants and the result show come up in the admin dashboard, for instance; how many applicant are below 25yrs? and the plugin should fetch the result from the database and show the relevant details in a nice table format that can be exported to excel. Possible? Please advise. Thanks
Jean Gérard Bousiquot says
You can check Gravity forms for that, but you’ll need to know some PHP. Otherwise you’ll have to pay a developer to help you achieve what you need.
Derek Price says
Isn’t this a bit off topic? Did you do this on purpose? If you have a question for WP staff, why not use the contact feature so you don’t take the blog post off topic?