Paginacja w WordPressie, wczytywanie postów w tle (nieskończone przewijanie – infinite scroll)

W poprzednim artykule dotyczącym paginacji dla szablonów WordPress’a opisałem proces tworzenia „paginacji numerycznej” opartej o wyświetlanie poszczególnych numerów stron z naszymi wpisami. Rozwiązanie to dobrze się spisuje na blogach, gdzie czytelnik może mieć potrzebę szybkiego przeskakiwania pomiędzy artykułami opublikowanymi z dużym odstępem czasowym. Czasami jednak taka funkcjonalność nie jest w ogóle potrzebna, a pracując nad motywem możemy pozwolić sobie na nieco bardziej „wyrafinowane” rozwiązania.

Fot: Elliott Cable, CC BY-SA 2.0.

Fot: Elliott Cable, CC BY-SA 2.0.

Paginacja ładująca nowe strony wpisów „w tle” czyli tak zwane nieskończone przewijanie, wiąże ze sobą konieczność obsługi skryptów po stronie klienta (Ajax, JavaScript, jQuery) na co programiści nie mają wpływu oraz należy pamiętać o tym, że pozbywamy się w ten sposób dostępu do tradycyjnej stopki, w której być może zapisane są ważne informacje. Jeżeli jednak pogodziliśmy się z tymi niedogodnościami to pora przejść do najprzyjemniejszej części tego wpisu czyli kodowania.

Wszystkie czynności będziemy wykonywać na bazie motywu Tewnety Fifteen.

Na początek odszukujemy plik index.php (katalog główny szablonu) i usuwamy z niego pętlę odpowiedzialną za wyświetlanie artykułów. Zamiast tego kodu wstawimy zwykły blok div:

Zakomentowany fragment kodu możemy skasować, a w jego miejsce wstawiamy:

Następnie przechodzimy do folderu js i tworzymy dwa nowe pliki o nazwie load-post.php (plik php) i load.js (plik javascript).

Otwieramy plik load-post.php w dowolnym edytorze tekstu i wklejamy poniższy kod:

Jest to kod PHP, który będzie pobierał z bazy danych odpowiednie artykuły.

Następnie przechodzimy do pliku load.js i wklejamy ten kod:

Teraz musimy „podpiąć” nasze skrypty do szablonu. W tym celu otwieramy plik header.php (katalog główny) i w sekcji head wklejamy poniższy kod:

Teraz pozostało stworzyć folder img (w katalogu głównym szablonu) i wrzucić tam animację gif symulującą ładowanie postów (obrazek taki możecie wygenerować w odpowiednim generatorem online: Ajax loading gif generator):

ajax-loader

Wpisy na stronie głównej od teraz będą ładowane w tle. Pamiętajcie, że nie będzie dostępu do stopki (chyba, że wszystkie posty zostaną załadowane).

Brak możliwości ładowania plików przez AJAX na localhost

Jeżeli tak jak ja, natknęliście się przy próbie uruchomienia powyższego skryptu z poziomu lokalnego serwera na poniższy błąd:

XMLHttpRequest cannot load http://127.0.0.1 Origin http://localhost is not allowed by Access-Control-Allow-Origin.

To aby się go pozbyć musicie w pliku konfiguracyjnym serwera Apache (httpd.conf) dopisać poniższy kod:

Przeczytaj również: Nieskończone przewijanie (infinite scroll), a SEO….

Przeczytaj również

, , , , , , , , ,