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….

, , , , , , , , ,

  • feamoignargfaionakfj9ajfopamjv

    Nie lepiej wykorzystać infinitescroll.js? Wtedy przy wyłączonym JS wyświetla się tradycyjna paginacja.

    • To jest całkowicie inne rozwiązanie niż to które przedstawiłem, ale przyjrzę się jak to działa i myślę, że w przyszłości na ten temat też coś napiszę ;)

  • Jak to możliwe, że nie chce mi zadziałać? Głowię się z tym już od dwóch godzin, wszystko robię według instrukcji i nic. Jedynie co udało mi się osiągnąć to to, że wyświetlił mi się animowany gif i komunikat „coś poszło nie tak”.

    • A na konsoli są jakieś błędy? Ciężko mi tak pomóc nie widząc strony, skrypt na pewno działa

      • Żadnych błędów nie zauważyłem prócz tego komunikatu.
        Nie za bardzo rozumiem do którego momentu w index.php powinienem usunąć za komentowany kod, ponieważ w artykule nie został on podany w całości.

        • Tylko ten fragment, który jest zakomentowany w artykule (nic więcej).