AJAX stał się wściekłością w ciągu ostatnich kilku lat i nie bez powodu. AJAX (asynchroniczny JavaScript i XML) to sposób na „rozmowę” z serwerem i wyświetlanie wyników bez przeładowywania strony.

Ta technika pozwala nam odświeżać” podobne ” liczniki, dodawać artykuły do koszyka, tworzyć dynamiczne formularze i wiele więcej – wszystko bez przeładowywania strony.

W tym poście pokażę Ci, jak ładować posty w miejscu z Ajaxem za pomocą domyślnego motywu dwudziestu piętnastu jako naszej bazy.

Przyjrzymy się, dlaczego AJAX jest używany i, zaczynając od prostego przykładu, budowanie funkcji ładowania AJAX do dwudziestu piętnastu.

Uwaga: Jeśli napotkasz jakiekolwiek problemy, próbując skonfigurować AJAX na swojej stronie, możemy Ci pomóc! Nasz zespół wsparcia jest dostępny 24 godziny na dobę, 7 dni w tygodniu, aby pomóc ci w każdym problemie z WordPressem (nie tylko pytania dotyczące naszych własnych wtyczek!), więc niezależnie od tego, czy masz problemy z Ajaxem, czy chcesz porady, jak zrobić poprawki CSS, skontaktuj się z nami! 

Dlaczego warto korzystać z AJAX?

Gdy WordPress ładuje pierwszą stronę postów w witrynie WordPress, żąda ich z bazy danych i używa pętli, aby wyświetlić je za pomocą dodanych przez nas znaczników. Poza tym ładowane są Menu nawigacyjne, widżety, grafika i inne media, pliki javascript, arkusze stylów i wiele innych rzeczy.

Network requests.
Zwróć uwagę, że przy każdym wczytaniu strony wykonywane są 72 żądania.

Jak widać na powyższym obrazku (pobranym z narzędzi programistycznych Chrome), ładowana jest spora liczba zasobów. Jest tu miejsce na optymalizację i niektóre zasoby, takie jak skrypty, będą buforowane, ale nawet wtedy jest to dużo.

Gdy strona druga naszych postów zostanie załadowana, wszystko dzieje się ponownie. WordPress pobiera posty i wyświetla je za pomocą naszych znaczników. Ładuje również wszystkie zewnętrzne elementy strony na nowo. W wielu przypadkach (ale nie we wszystkich) jest to strata przepustowości i szkodliwe dla doświadczenia użytkownika. W końcu nikt nie lubi czekać na załadowanie stron.

Pierwsze kroki: tworzenie motywu potomnego

Zanim zmodyfikujemy Twenty Fifteen powinniśmy stworzyć motyw potomny. Dzięki temu możemy kontynuować aktualizację tematu bez utraty naszych zmian. Możesz przeczytać wszystko o tym, jak zrobić in out Przewodnik Jak stworzyć motyw potomny WordPress.

Witaj AJAX!

Zacznijmy od prostego przykładu, który pokazuje, jak działa AJAX. Będziemy kierować linki wewnątrz paska paginacji na dole strony tak, że po kliknięciu na numer strony będzie dynamicznie załadować tę stronę za pomocą AJAX. Po kliknięciu linku paginacji wyślemy żądanie na serwer i powiadomimy o wyniku.

Pagination
Będziemy kierować linki numeryczne wewnątrz sekcji paginacji.

Zapytanie O Nasz Javascript

Naszym pierwszym portem wywołania jest utworzenie pliku JavaScript i zapytanie go za pomocą funkcji naszego motywu.plik php.

Stworzyłem js folder i a ajax-paginacja.js dopisz do niego. Gdy zrobisz to samo, otwórz plik funkcji i dodaj skrypt do już istniejącego theme_enqueue_assets() funkcja:

Ładowanie gist 5ca270c7c9ddd18e57b4

Jeśli jesteś zdezorientowany zapytaniem, przeczytaj nasz artykuł na temat dodawania skryptów i stylów do WordPressa we właściwy sposób. W skrócie, powiedzieliśmy WordPressowi, co chcielibyśmy nazwać naszym skryptem (parametr pierwszy), gdzie się znajduje (parametr drugi), jakie są wymagania wstępne (parametr trzeci), numer wersji (parametr czwarty) i że chcielibyśmy załadować go w stopce (parametr piąty).

Zwróć uwagę, że przy zapytaniu o arkusz stylów użyłem get_template_directory_uri(). Ta funkcja zawsze wskazuje na katalog motywu nadrzędnego. Pytając o nasz skrypt użyłem get_stylesheet_directory_uri(). Wskazuje to na katalog motywu podrzędnego, jeśli jest używany w motywie podrzędnym.

Ponieważ ładujemy skrypt w stopce możesz wkleić alert ('Script Is Enqueued' ) na ajax-paginacja.js i przeładuj stronę, aby sprawdzić, czy działa. Jeśli tak, tekst powinien być odpowiednio ostrzegany.

Tworzenie wydarzenia

Następnym zadaniem jest utworzenie zdarzenia, które wywoła wywołanie AJAX. W naszym przypadku zdarzeniem jest kliknięcie konkretnego linku. Aby kierować link, musimy dowiedzieć się trochę o klasach elementów i identyfikatorach wokół niego.

Pagination Source
Kod źródłowy paginacji z Chrome Dev Tools.

Jeśli zastanawiasz się, jak to się stało, wcisnąłem Shift + Command + C na moim Macu (Shift + Control + C w systemie Windows), najechałem na element, który chciałem sprawdzić i kliknąłem go.

To mówi mi, że nasze linki paginacji mają klasę numery stron, następny link również posiada klasę następny a wszystko to zawarte jest w nav element z klasą nav-linki. Nie pokazany tutaj jest poprzedni link, który ma klasę poprzedni oprócz regularnych numery stron klasy.

Na razie nie martwmy się tym wszystkim, po prostu skierujmy dowolny link w kontenerze paginacji. Możemy stworzyć prosty alert w ten sposób:

Ładowanie gist 5ca270c7c9ddd18e57b4

Zauważ, że wszystko jest zawinięte w funkcję anonimową. Polecam zrobić to samo. Spójrz na ten wątek, dlaczego jest to pomocne. Utworzyłem Zdarzenie kliknięcia, zapobiegłem uruchomieniu domyślnej funkcjonalności (np. ładowaniu strony) i zaalarmowałem trochę tekstu.

Tworzenie połączenia AJAX

Zamiast pracować z danymi po stronie klienta (alarmując wstępnie ustawiony tekst) powinniśmy pobrać dynamiczne dane ze strony serwera. Musimy trochę popracować. Oto dlaczego: musimy nadać wywołaniu AJAX adres URL do pracy. Nasz plik Javascript nie ma wiedzy o naszym środowisku, więc nie możemy użyć czegoś takiego jak get_stylesheet_directory_uri() tam. Możemy jednak użyć techniki lokalizacji, aby przekazać zmienne do naszego JavaScript. Zróbmy to teraz w naszym Pliku funkcji:

Ładowanie gist 5ca270c7c9ddd18e57b4

Dodając ten kod wewnątrz my_enqueue_assets() funkcja, którą zdefiniujemy ajaxpaginacja obiekt (parametr 2). Obiekt otrzyma swoje elementy zgodnie z tablicą dostarczoną jako trzeci parametr w wp_localize_script() funkcja. Innymi słowy, po dodaniu tego kodu powinniśmy być w stanie użyć ajaxpaginacja.ajaxurl aby zdefiniować adres URL do admin-ajax.php których używamy do obsługi połączeń AJAX.

DziaĹ ’ a to dlatego, Ĺźe funkcja lokalizacji wypisuje definicjÄ ™ tego obiektu przed wczytaniem naszego JavaScript. Wygląda mniej więcej tak:

Ładowanie gist 5ca270c7c9ddd18e57b4

Wracając do naszego pliku JavaScript, mamy teraz wszystko, czego potrzebujemy do zbudowania połączenia AJAX. Oto jak:

Ładowanie gist 5ca270c7c9ddd18e57b4

Jak widać $.ajax() funkcja jest tym, czego tutaj używamy. Istnieją specjalne funkcje dla metod post I get, ale wolę używać tej funkcji ze względu na jej elastyczność. Możesz przeczytać o wszystkich parametrach w dokumentacji jQuery.

Korzystanie z url parametr przekazujemy adres URL skryptu, do którego chcemy wysłać dane. To powinno być admin-ajax.php plik, który można znaleźć w wp-admin katalog. Zdefiniowaliśmy to powyżej poprzez wp_localize_script() funkcja.

Na Typ jest ustawiony na post. Możemy również użyć Pobierz, nasze zapytanie nie jest zbyt wrażliwe, ale wolę publikować dane, chyba że użytkownik potrzebuje dostępu do parametrów.

Na dane parametr jest obiektem, który zawiera dane, które chcesz przekazać. W naszym przypadku będę mógł uzyskać dostęp do $_POST ['akcja'] zmienna, której wartość byłaby ajax_paginacja. Możesz oczywiście przekazać tyle, ile wymaga Twoja aplikacja.

AJAX Call Alert
0 jest zwracane, jeśli nie napisano kodu po stronie serwera.

Wreszcie, the sukcesy parametr jest funkcją, która alarmuje wynik naszego wywołania AJAX. Zrobimy to nieco bardziej fantazyjne poniżej, na razie jest to wystarczające do testowania. Jeśli spróbujesz kliknąć na link teraz to rzeczywiście działa, ale nie będzie bardzo przydatne, ponieważ nie zdefiniowaliśmy kodu po stronie serwera. W rzeczywistości to, co powinieneś zobaczyć, to 0.

Więc dlaczego tak się dzieje? Kiedy powiedziałem „nie zdefiniowaliśmy kodu po stronie serwera”, nie byłem całkowicie szczery. My nie, ale WordPress ma. Jest trochę treści w admin-ajax.php plik, którego używamy. Jeśli spojrzysz na kod źródłowy tego pliku, powinieneś zobaczyć, że skrypt używa die ('0' ) w kilku przypadkach.

Jeśli nie dostarczymy akcji admin-ajax.php skrypt umiera i zwraca 0. Jeśli dostarczymy akcję, ale nie podłączymy do wymaganych hooków WordPress nic się nie dzieje i na samym końcu pliku znowu umieramy, zwracając 0. Podsumowując: are już komunikuje się z serwerem.

Komunikacja Z WordPress

Aby uzyskać sensowną odpowiedź z WordPress musimy zdefiniować pewne działania WordPress. Odbywa się to za pomocą ustalonego wzoru. Zanurzmy się w tym, kontynuując nasz przykład w pliku funkcji naszego motywu:

Ładowanie gist 5ca270c7c9ddd18e57b4

Podłączyłem funkcję do dwóch haków. Haki, które przybierają na wp_ajax_[action_name] format jest wykonywany tylko dla zalogowanych użytkowników. Haki, które przybierają na wp_ajax_norpiv_[action_name] format jest wykonywany tylko dla niezalogowanych użytkowników. Wielką zaletą tego jest to, że można bardzo łatwo oddzielić funkcjonalność.

Nazwy akcji, o których wspomniałem powyżej, odnoszą się do akcji zdefiniowanej w naszym wywołaniu AJAX w Javascript (akcja: 'ajax_paginacja'– muszą pasować. Nazwa funkcji może być dowolna, użyłem my_ajax_paginacja dla jasności.

Sama funkcja może zawierać wszystko, co chcesz. Możesz wylogować użytkowników, pobrać ich dane, opublikować post i tak dalej. Cokolwiek chcesz wrócić do Javascript ty musi echo. W powyższym przykładzie powtórzyłem tytuł bloga, wciągnięty dynamicznie przez get_bloginfo() funkcja.

Ostatnim krokiem jest użycie die (). Jeśli tego nie zdefiniujemy, to funkcja die zdefiniowana w admin-ajax.php na samym końcu pliku będzie kopać i skończy się echem 0ponadto do czegokolwiek innego, co odbija się echem. Jeśli wypróbujesz powyższy kod, powinieneś teraz zobaczyć zwrócony tytuł Twojej witryny.

Przegląd

Na tym kończy się nasz podstawowy przykład! Zanim przejdziemy do ciągnięcia postów za pośrednictwem AJAX, szybko podsumujmy kroki niezbędne do wykonania akcji AJAX:

  • Zapytaj o plik Javascript, jeśli go jeszcze nie masz
  • Użycie wp_localize_script() aby przekazać adres URL swojego admin-ajax.php plik
  • Utwórz wywołanie AJAX w Javascript
  • Hook funkcja wykorzystująca odpowiednią nazwę Hooka
  • Kodowanie funkcji, która może zwracać dane z powrotem do Javascript

Ładowanie postów za pomocą AJAX

A teraz soczyste rzeczy! Rozpocząłem ten projekt od napisania kodu JavaScript dla niego. Bez dalszych ceregieli, oto wersja podstawowa. Wkrótce rozszerzymy go o nieco poprawione wrażenia użytkownika.

Ładowanie gist 5ca270c7c9ddd18e57b4

Jest to tak samo jak nasz podstawowy przykład. Pierwszą rzeczą, którą zauważysz, jest to, że dodałem sposób na wykrycie, którą stronę użytkownik chce zażądać. Każdy link ma rozpiętość element w nim ukryty (jest tam dla czytników ekranu). Robię klon elementu, aby upewnić się, że nie modyfikuję oryginału, usuwam span i analizuję resztę jako liczbę całkowitą. To daje nam potrzebny numer strony.

Będę również musiał znać używane parametry zapytania. Na stronie głównej jest to dość proste, to tylko paged parametr, ponieważ pracujemy z domyślnym zapytaniem. Jeśli zaczniemy od strony archiwum (jak archiwum kategorii), musimy również znać nazwę kategorii.

Prześlemy zmienne zapytania za pomocą metody lokalizacji, której nauczyliśmy się wcześniej. Na razie użyjemy ajaxpaginacja.query_vars nawet jeśli nie jest to jeszcze zdefiniowane. Wreszcie, po sukcesie usuwamy wszystkie artykuł elementy z głównego kontenera, usuwamy element paginacji i dołączamy wartość zwrotną naszego wywołania AJAX do głównego kontenera.

Ta zwracana wartość będzie zawierać posty i nowy element nawigacyjny. Zauważ, że zmieniłem nazwę parametru z odpowiedź na html bo to ma więcej sensu. Aby zakończyć, używamy tablicy lokalizacji, aby przekazać oryginalne parametry zapytania.

Poniższą funkcję należy umieścić w naszym my_enqueue_assets() funkcja zastępująca lokalizację, którą mieliśmy wcześniej:

Ładowanie gist 5ca270c7c9ddd18e57b4

Wszystko, co musimy teraz zrobić, to wyrzeźbić my_ajax_pagination() funkcja. Cokolwiek ta funkcja echoes zastąpi zawartość na naszej stronie. Oto końcowy kod z wyjaśnieniem poniżej:

Ładowanie gist 5ca270c7c9ddd18e57b4

Korzystając z naszych przekazanych parametrów budujemy niestandardowe zapytanie. Polega to zasadniczo na pobraniu zmiennych zapytania, które przekazaliśmy i upewnieniu się, że numer strony, który przekazaliśmy, nadpisuje paged parametr. Następnie używamy naszego końcowego $query_vars tablica do utworzenia nowego zapytania.

Musimy zrobić $GLOBALS ['wp_query'] zmienna równa naszemu nowemu obiektowi posts. Powodem, dla którego musimy to zrobić jest to, że the_posts_pagination() funkcja używa tej zmiennej globalnej.

Następnie zauważ, że dodałem funkcję do edytor_max_image_size filtr i kilka rzędów w dół usuwam go. Pojawiło się coś nieoczekiwanego. I rzeczywiście stworzył bilet Trac WordPress. Możemy zauważyć pewien postęp w tej sprawie! Oto problem:

Gdy obrazy są ładowane w poście, wszystkie wyglądają dobrze. Jeśli jednak ukończysz ten samouczek bez tych filtrów, Twoje obrazy będą węższe, tylko 660px szerokości zamiast niezbędnego 825px. Powodem tego jest to, że funkcja ładująca obrazy ostatecznie wywołuje funkcję o nazwie image_constrain_size_for_editor (). Ta funkcja zapewnia, że obrazy w edytorze postów nie są zbyt szerokie. Aby określić pogodę taką redukcję wielkości należy zastosować is_admin() funkcja. Ponieważ nasz kod działa przez admin-ajax.php który technicznie jest w adminie, WordPress skaluje nasze obrazy w dół, błędnie myśląc, że używamy ich w edytorze.

Na szczęście możemy skorzystać z edytor_max_image_size filtruj, aby określić maksymalny rozmiar edytora. Ponieważ chcemy zostawić wszystko tak, jak jest, z wyjątkiem tego, że podczas naszego wywołania AJAX dodajemy filtr używając naszych własnych wartości (array (825, 510) ), a następnie natychmiast go usunąć, aby upewnić się, że nie powoduje kłopotów nigdzie indziej.

Następnym krokiem jest użycie naszego zapytania do listy naszych postów. Dużo skopiowałem z indeks.php plik w motywie nadrzędnym. jeśli nie ma postów, używamy szablonu, który ma to obsługiwać, w przeciwnym razie przeglądamy posty i używamy szablonu wyświetlania postów. Na koniec używamy tego samego formatu paginacji, który widzimy w pliku indeksu.

Notka o połączeniach AJAX

Ważne jest, aby pamiętać, że połączenia AJAX są zawsze uważane za pochodzące od administratora. Oznacza to, że za pomocą tego wezwania mogą zostać zwrócone stanowiska robocze, zaplanowane i prywatne. Jeśli nie chcesz, aby tak się stało, musisz kontrolować zachowanie za pomocą odpowiednich parametrów, takich jak post_status.

Lepsze Wrażenia Użytkownika

W przypadku takich rozwiązań AJAX niezwykle ważne jest, aby skupić się na doświadczeniu użytkownika. Pracuję w środowisku lokalnym, więc wszystko ładuje się bardzo szybko, ale na serwerze produkcyjnym załadowanie obrazów i innych zasobów może zająć więcej czasu.

W związku z tym należy przynajmniej dodać loader lub ładowanie tekstu i wyłączyć dalsze kliknięcia na elementach nawigacji. Zadbamy o to, sprawiając, że posty i nawigacja znikną zaraz po kliknięciu użytkownika i wyświetleniu tekstu ” ładowanie nowych postów.”Po wywołaniu zdarzenia success usuwamy wczytywany tekst i wyświetlamy posty. Oto nasze zaktualizowane połączenie AJAX:

Ładowanie gist 5ca270c7c9ddd18e57b4

Mamy teraz oddzielny beforeSend oraz sukcesy funkcja. Ten pierwszy jest wykonywany zaraz po kliknięciu łącza, przed wysłaniem połączenia AJAX na serwer. Późniejsze jest wykonywane po otrzymaniu danych z serwera.

Przed wysłaniem połączenia usuwamy artykuły i nawigację. Dzięki temu użytkownicy nie mogą nadal klikać linków nawigacyjnych podczas oczekiwania na załadowanie. Następnie przewijamy do góry dokumentu. Następnie dołączamy powiadomienie o ładowaniu, aby wyjaśnić użytkownikom, co się dzieje. Użyłem tego samego znacznika, co dwadzieścia piętnaście zastosowań na stronach post-not-found. W funkcji success usuwamy loader i ładujemy naszą zawartość, wszystko gotowe!

Pułapki AJAX

AJAX jest niezwykle potężny; oprócz ładowania postów można wykonywać wszelkiego rodzaju działania za pośrednictwem połączeń AJAX. Istnieje wiele niebezpieczeństw i rzeczy, na które należy zwrócić uwagę podczas korzystania z niego, Oto kilka:

Bezpieczeństwo to może być poważny problem. Jeśli chcesz usunąć post przez AJAX, musisz upewnić się, że użytkownik ma zamiar i uprawnienia (używając nonces), na przykład. Podczas korzystania ze zwykłych metod WordPress ma wbudowane zabezpieczenia w niektórych przypadkach, ale z Ajaxem zwykle musisz myśleć o tym samodzielnie.

Pełna wdzięku degradacja jest kolejnym aspektem AJAX, chociaż coś, co staje się mniej ważne. Zasadniczo: bez JavaScript, bez AJAX. Jeśli mocno polegasz na Ajaxie, użytkownicy, którzy mają go wyłączony, nie będą mogli korzystać z naszej aplikacji. Javascript stał się tak wszechobecny, że jest to prawie nieistotne, ale może pojawić się w niektórych sytuacjach. W takim przypadku musisz upewnić się, że kliknięcie na rzeczywisty link również zadziała.

Doświadczenie użytkownika jest bardzo często pomijany. Funkcjonalność AJAX jest rzeczywiście fajna, ale niezawodnie działająca strona internetowa jest fajniejsza. Użytkownicy są przyzwyczajeni do ładowania stron po kliknięciu linków. Musisz zrobić wszystko bardzo przejrzyste, użytkownicy powinni wiedzieć, co się dzieje i dlaczego. Powinieneś użyć AJAX, aby poprawić swoją pracę, a nie wnosić tyle błyskotek, ile możesz do stołu.

Przegląd

Jak widać, implementacja AJAX wymaga trochę przygotowania i praktyki, ale gdy jest to druga natura, przekonasz się, że przychodzi łatwo. Prawdopodobnie zajęło ci to trochę czasu, a zrobienie tego po raz pierwszy zajmie jeszcze więcej czasu, ale zaszyfrowałem cały przykład w około 15 minut.

AJAX jest jedną z tych technik, które mogą być trudne, ponieważ obejmuje prawie wszystkie języki programowania używane w ramach takich jak WordPress. Rzeczy są jeszcze bardziej zaostrzone przez konieczność przestrzegania konwencji, takich jak Hooki i lokalizacja.

Praktyka czyni mistrza. Gwarantuję, że zakochasz się w Ajaxie, jeśli zaczniesz go używać.

Czy zaimplementowałeś AJAX na swojej stronie? Jakie inne zastosowania są tam dla AJAX w WordPress? Daj nam znać, co myślisz w komentarzu poniżej.

Tagi:

You May Also Like

Jak naprawić nieprawidłowy błąd JSON w WordPress (Przewodnik dla początkujących)

W artykule: Co powoduje błąd „nieprawidłowa odpowiedź JSON” w WordPress?1. Sprawdź adresy…

Jak zmienić kolor linku w WordPress (poradnik dla początkujących)

W artykule: Dlaczego Linki Są Ważne?Jak dodawać linki w postach i stronach…

Jak naprawić błąd krytyczny w WordPress (krok po kroku)

W artykule: Co To jest błąd krytyczny w WordPress?Co powoduje krytyczny błąd…

Jak zainstalować WordPress lokalnie na komputerze Mac za pomocą MAMP

W artykule: Jak zainstalować MAMP na komputerze MacInstalacja WordPress na komputerze MacWypróbowanie…