W artykule:
Ostatnio jeden z naszych użytkowników zapytał nas o to, 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 widget przyciąga wzrok i jest zauważalny, co znacznie zwiększa szybkość klikania. W tym artykule pokażemy, jak zanikać w ostatnim widżecie paska bocznego w WordPress za pomocą jQuery.
Poniżej demo jak by to wyglądało:
W tym samouczku będziesz modyfikować pliki motywów. Zaleca się wykonanie kopii zapasowej motywu przed kontynuowaniem.
Krok 1: dodanie JavaScript dla efektu Fadein
Najpierw musisz dodać kod jQuery do 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 poniższy kod wewnątrz niego.
jQuery (dokument).ready (function ($) {
/**
* Konfiguracja
* Pojemnik na pasku bocznym np. bok, # sidebar itp.
*/
var sidebarElement = $('div#secondary');
// Sprawdź czy pasek boczny istnieje
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;
// Ukryj ostatni widget
$(lastWidget).hide();
// Sprawdź, czy przewijanie użytkownika dotarło do góry ostatniego widżetu i wyświetli go
$(dokument).scroll (function () {
// Jeśli widżet został wyświetlony, nie musimy sprawdzać.
jeśli (!widgetDisplayed) {
if($(this).scrollTop () > lastWidgetOffset) {
$(lastWidget).fadeIn ("wolny").addClass ('wpbstickywidget');
widgetDisplayed = true,;
}
}
});
}
});
Najważniejszą linijką w tym kodzie jest var sidebarElement = $('div#secondary');.
Jest to identyfikator div zawierający twój pasek boczny. Ponieważ każdy motyw może używać różnych div kontenerów paska bocznego, musisz znaleźć identyfikator kontenera, którego używa Twój motyw na pasku bocznym.
Możesz to sprawdzić za pomocą narzędzia inspect element w Google Chrome. Po prostu kliknij prawym przyciskiem myszy pasek boczny w Google Chrome, a następnie wybierz Inspect Element.
W kodzie źródłowym będzie można zobaczyć div kontenera paska bocznego. Na przykład domyślny motyw Twenty Twelve używa drugorzędne, oraz dwadzieścia trzynaście zastosowań teritary jako identyfikator kontenera paska bocznego. Musisz wymienić drugorzędne z identyfikatorem div kontenera paska bocznego.
Następnie musisz użyć klienta FTP, aby przesłać ten plik do folderu js w katalogu motywów WordPress. Jeśli twój katalog motywów nie ma folderu js, musisz go utworzyć, klikając prawym przyciskiem myszy i wybierając „Utwórz nowy katalog” w kliencie FTP.
Krok 2: Zapytanie o Twój JavaScript w WordPress Theme
Teraz, gdy skrypt jQuery jest gotowy, nadszedł czas, aby dodać go do motywu. Użyjemy odpowiedniej metody dodawania javascript do Twojego motywu, więc po prostu wklej następujący kod w funkcjach twojego motywu.plik php.
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 na pasku bocznym, który chcesz wyświetlić z efektem fadein, a następnie odwiedzić witrynę, aby zobaczyć go w akcji.
Krok 3: sprawianie, że ostatni widżet jest lepki po zaniku w efekcie
Często pożądaną funkcją z efektem zanikania jest przewijanie ostatniego widżetu paska bocznego podczas przewijania użytkownika. Nazywa się to pływającym widżetem lub lepkim widżetem.
Jeśli spojrzysz na powyższy kod jQuery, zauważysz, że dodaliśmy wpbstickywidget Klasa CSS do widżetu po zaniku w efekcie. Możesz użyć tej klasy CSS, aby twój ostatni widget był lepki po jego zaniku. Wszystko, co musisz zrobić, to wkleić ten CSS do arkusza stylów szablonu.
.wpbstickywidget {
pozycja: stała;
top:0px;
}
Możesz modyfikować CSS, aby spełnić swoje potrzeby. Możesz zmienić kolor tła lub czcionki, aby widżet był jeszcze bardziej widoczny. Jeśli chcesz, możesz nawet dodać płynne przewijanie do efektu top obok ostatniego widżetu, który pozwoli użytkownikom szybko przewijać wstecz.
Mamy nadzieję, że ten artykuł pomógł Ci dodać efekt zanikania do ostatniego widżetu na pasku bocznym WordPress. Aby uzyskać więcej dobroci jQuery, sprawdź najlepsze samouczki jQuery dla WordPress.
Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Możesz nas również znaleźć na Twitterze i Google+.
