Nieskończone przewijanie – Infinite Scroll

Mowa tutaj o przewijaniu strony bez paginacji, czyli konieczności klikania na poszczególne cyferki oznaczające kolejne podstrony. Infinite Scroll to taki efekt, kiedy przewijamy stronę do dołu i ciągle nam się wczytują nowe treści. Taki efekt jest na przykład w Facebook. Tam to oczywiście jest już do przesady, bo można tak przewijać nawet kilka dni i nie dojdziemy do końca 🙂

Jednak aby taki efekt uzyskać na stronie dajmy na to postawionej w WordPress to w zasadzie wystarczy zainstalować jedną z dostępnych wtyczek. Ja szczerze mówiąc nie znalazłem wśród darmowych takiej która jest w miarę lekka w działaniu i realizuje tenże efekt. A do tego wszystkie wtyczki posiadają podstawowy błąd moim zdaniem. Po jej uruchomieniu treść na stronie ładuje się przez Ajax czyli JavaScript. I teraz jeśli nastąpi jakaś awaria z powodu skryptów, albo po prostu użytkownik ma wyłączone JavaScript to nie zobaczy tej treści. No i roboty, które indeksują strony także jej nie zobaczą, co bywa dość poważną wadą. Dlatego też powstał ten art aby w dość prosty sposób uruchomić Infinite Scroll bez instalowania wtyczek i dostępną paginacją w razie nie działania JavaScript w przeglądarce.

A więc aby dodać to przewijanie najpierw trzeba przejść do edycji szablonu. Różnie to jest z plikami szablonu w WordPress wiec to już trzeba indywidualnie odszukać gdzie znajduje się pętla wczytująca zawartość strony. Załóżmy że chcemy dodać to na głównej stronie więc patrzymy co ma index.php. Tam się zorientujemy gdzie leży plik szablonu. A może już bezpośrednio w tym pliku będzie pętla wczytująca posty… U mnie był taki kod:

To jest tylko część kodu z pliku index.php, ale ta najważniejsza w naszym przypadku. Jak widać szablon postów ładowanych w pętli znajduje się w katalogu „template-parts” w plliku „content.php”. Ta informacja nam się przyda. Póki co za znakiem końca pętli endwhile dajemy ten kod html:

Do tego div będą wczytywane kolejne treści z pomocą Ajax. I na samym dole także w index dajemy poniższy kod:

Można to także dodać w „header.php” albo w „footer.php”. Chodzi o to, że w tym przypadku paginację zmieniamy tylko dla głównej strony. Następnie w katalogu szablonu tworzymy katalog „js” o ile go nie ma i w nim plik „load.js”. W tym pliku kod taki jak poniżej:

Trzeba jeszcze w tym katalogu „js” utorzyć nowy plik o nazwie „load-post.php” i w nim umieścimy to co znaleźliśmy w swoim pliku szablonu, czyli w tym przypadku wyżej wspomniany „content.php”. Tam jest kod odpowiadający za wygląd jednego postu i powielany w pętli.

W kodzie JavaScrript założyłem, że div w którym znajduje się nawigacja do paginacji ma klasę o nazwie „paginate”. Jeśli będzie inna to poprostu nie ukryje tej nawigacji. I w zasadzie to tyle. Dzięki takiemu rozwiązaniu strona od razu wczytuje tyle postów ile jest ustawione w panelu administracyjnym, a tylko kolejne są wczytywane poprzez Ajax.

Może się zdarzyć, że będzie problem i pomimo przewijania strony posty się nie wczytują, a błędów żadnych nie wyrzuca JavaScript. Wtedy warto się zapoznać z tym artykułem o scrollTop.

Dodaj komentarz

avatar
  Subscribe  
Powiadom o
© 2019 Tworzenie stron www - webmasterstwo - porady | WordPress Theme: Annina Free by CrestaProject.