Co to jest AJAX i jak go używać w WordPressie (przewodnik krok po kroku)

AJAX to popularna technologia wykorzystywana w tworzeniu stron internetowych, która pozwala na pobieranie danych z backendu i odświeżanie widoku bez konieczności przeładowywania strony internetowej. W związku z tym pomaga poprawić interaktywność, szybkość i użyteczność Twojej witryny. AJAX działa za każdym razem, gdy wykonujesz czynności, takie jak pozostawienie komentarza lub opublikowanie tweeta.

W tym artykule opowiem Ci, czym jest AJAX i jak używać AJAX w WordPressie (znanym również jako WP AJAX). Czytaj dalej!

Co to jest AJAX?

AJAX to skrót od Asynchronous JavaScript And XML, technologii, która umożliwia asynchroniczne wysyłanie żądań do serwera i wprowadzanie zmian na naszych stronach bez konieczności ich ponownego ładowania. Skrypt AJAX żąda od serwera zwrócenia pewnych danych, a następnie modyfikuje strony internetowe za pomocą uzyskanych danych.

Na przykład wyobraź sobie jedno menu rozwijane, w którym wybierasz datę spotkania, a inna lista rozwijana dynamicznie pokazuje godziny dostępne do zarezerwowania. Za pomocą skryptu serwer został zapytany o godziny dostępne na wybór rozwijanego leczenia.

Jak działa AJAX?

Misją AJAX jest służenie jako pomost między Twoją witryną a serwerem. Rdzeniem tej asynchronicznej technologii jest obiekt XMLHttpRequest, który umożliwia wymianę danych. Oto podstawowe kroki do wykonania wywołania AJAX:

– Źródło: W3Schools

• Określ informacje do wysłania
• Skonfiguruj połączenie
• Użyj obiektu XMLHttpRequest do wysłania danych
• Odbierz i przetwórz odpowiedź z serwera

Dobrą rzeczą jest to, że proces ten można uprościć za pomocą biblioteki jQuery.

Jak korzystać z AJAX w WordPressie?

WordPress natywnie obsługuje AJAX. Możesz zobaczyć „admin-ajax.php” w folderze wp-admin.

Pierwotnie został stworzony dla wszystkich funkcji, które wysyłają żądania AJAX od administratora WordPressa. Jest również używany w publicznej części sieci.

Wszystkie żądania WordPress AJAX muszą przejść przez skrypt PHP. Innymi słowy, admin-ajax.php powinien być plikiem PHP, przez który wywoływana jest akcja zwracająca zawartość.

W 2013 roku WordPress wprowadził WordPress Heartbeat API, który zapewniał kilka ważnych funkcji, takich jak funkcja automatycznego zapisywania, wygaśnięcie logowania i ostrzeżenie o blokadzie postu, gdy inny użytkownik pisze lub edytuje post WordPress.

Dwie bardzo ważne cechy interfejsu Heartbeat API to:

1. Autozapis

Gdy zapisujesz wersję roboczą posta lub kontynuujesz nad nią pracę, WordPress automatycznie zapisuje zmiany. Istnieje wyraźna różnica między automatycznym zapisem a ręcznym zapisem wersji roboczej. Sprawdź poniższy zrzut ekranu, który pokazuje oba typy zapisów:

– Autozapis w WordPressie

2. Blokada postu

Gdy spróbujesz edytować post, nad którym inny użytkownik już pracuje, pojawi się wyskakujące okienko z ostrzeżeniem o zaistniałej sytuacji. Widoczne są trzy akcje.

– Blokada postów w WordPress

Powyższe funkcje są możliwe dzięki API WordPress Heartbeat, które tworzy połączenie między serwerem a przeglądarką w celu odpowiedniej komunikacji i odpowiedzi.

WordPress Heartbeat API generuje żądania komunikacji z serwerem i wyzwala zdarzenia po otrzymaniu danych/odpowiedzi. Zwykle zwiększa to obciążenie serwera i ostatecznie spowalnia administratora WordPressa.

Przykład na żywo

Loguję się do mojego pulpitu WordPress i zaczynam pisać post. Następnie zostawiam otwartą zakładkę na kilka minut i zaczynam przeglądać inne zakładki. Pulpit nawigacyjny jest nadal zalogowany i widać, że admin-ajax stale wysyła żądania.

– admin-ajax.php Wysyłanie żądań do serwera

Zgodnie z powyższym zgłoszeniem admin-ajax.php w WordPressie generuje żądania co 15 sekund. Żądaniem może być dowolna komunikacja z serwerem.

Jak wtyczki przeciążają admin-ajax.php?

Większość problemów w admin-ajax.php w WordPressie można przypisać żądaniom wysyłanym przez zainstalowane wtyczki. Wtyczki te spowalniają administratora WordPressa, wysyłając żądania uzyskania określonej funkcjonalności, takie jak uruchamianie wyskakującego okienka lub aktualizowanie licznika udostępniania społecznościowego.

To powiedziawszy, żądania niekoniecznie spowodują zwiększenie pliku admin-ajax.php. Jeśli żądania są obsługiwane prawidłowo, a twórcy wtyczek postępują zgodnie z najlepszymi praktykami w zakresie wykorzystywania wywołań AJAX w swoich wtyczkach, plik admin-ajax.php będzie w porządku. Dlatego ważne jest również, aby zdiagnozować każdą wtyczkę przed jej dezaktywacją.

Jak zdiagnozować wtyczkę w WordPressie?

Ważne jest, aby poprawnie zdiagnozować wtyczkę, aby zidentyfikować jej wpływ na plik admin-ajax.php, co może spowolnić działanie administratora WordPressa. W tym celu użyjemy dwóch narzędzi: GTmetrix i WebPageTest.

W przypadku GTmetrix przejdź do zakładki Wodospad, aby uzyskać pełną listę żądań. Po dokładnym przyjrzeniu się liście, możesz zobaczyć żądania POST wysłane przez plik admin-ajax.php.

– Diagnostyka wtyczek w WordPress

W moim przypadku te prośby zostały wysłane głównie przez wtyczkę do udostępniania społecznościowego. Ta konkretna wtyczka wysyła żądanie ajax do kont mediów społecznościowych za pośrednictwem interfejsu API co 15 sekund, aby pobrać zaktualizowaną liczbę udostępnień.

Rozwiń kartę, aby uzyskać szczegółowe informacje. Zakładka odpowiedzi pokazuje dokładne miejsce, które wywołuje te żądania.

Chrome jest dostarczany z narzędziami dla programistów, które pomagają analizować żądania wysyłane przez różne wtyczki. Aby to sprawdzić, otwórz witrynę w Chrome, kliknij CTRL + Shift + I i kliknij kartę Sieć.

– admix-ajax.php Żądania w Chrome

Odśwież stronę i zobacz, jak lista jest wypełniana zaktualizowanymi prośbami. W polu filtru wpisz ajax lub admin-ajax, aby przefiltrować wymagane pliki. Daje to wgląd w liczbę zapytań, ich częstotliwość oraz źródło zapytania.

Następnie kliknij plik, aby zobaczyć dalsze informacje. W zakładce odpowiedzi daje wskazówkę dotyczącą wtyczki powodującej to żądanie. W moim przypadku tym razem zostało to wywołane przez wtyczkę WP Popular (WPP), która podświetla najpopularniejszy post w określonym czasie.

Aby tego uniknąć, upewnij się, że wtyczka, której używasz, jest zaktualizowana. Jeśli tak nie jest, spróbuj otworzyć zgłoszenie do pomocy technicznej, aby jego programiści mogli rozwiązać problem. Jeśli to możliwe, możesz również zastąpić go inną wtyczką, która jest aktualizowana i nie przeciąża pliku admin-ajax.php.

Przeprowadzenie dokładnej diagnozy jest ważne przed pozbyciem się jakiejkolwiek wtyczki, ponieważ niektóre wtyczki mają kluczowe znaczenie dla Twojej witryny WordPress. Narzędzia te mogą pomóc w znalezieniu podstawowej przyczyny i wybraniu najlepszego możliwego rozwiązania, aby ją naprawić.

W następnej sekcji zobaczymy, jak możemy zredukować te żądania i zapobiec przeciążeniu pliku admin-ajax.php.

Przyspiesz pulpit WordPress

Aby przyspieszyć backend WordPressa, najlepszą praktyką jest wyłączenie interfejsu Heartbeat API lub przynajmniej ustawienie dłuższego interwału czasowego, aby nie trafiał do serwera co kilka sekund.

Zainstaluj wtyczkę Heartbeat API

Zaloguj się do pulpitu administracyjnego WordPress. Przejdź do Wtyczki → Dodaj nowy → wyszukaj Breeze → Zainstaluj i aktywuj.

– Zainstaluj Breeze w WordPress

Skonfiguruj wtyczkę Breeze

Przejdź do Ustawienia → Breeze → Heartbeat API. Znajdziesz tam 4 różne opcje konfiguracji bicia serca.

1. Kontroluj bicie serca: możesz przełączyć przycisk, aby włączyć lub wyłączyć interfejs API bicia serca dla swojego zaplecza, edytora postów i interfejsu.
2. Heartbeat Frontend: pozwoli Ci to zmienić zachowanie Twojego Front-endu lub całkowicie go wyłączyć.
3. Edytor postów Heartbeat: pozwoli ci to zmienić zachowanie edytora postów WP lub całkowicie go wyłączyć.
4. Backend pulsu: pozwoli ci to zmienić zachowanie twojego Backendu lub całkowicie go wyłączyć.

– Ustawienia Heartbeat API w Breeze

Utwórz wiele reguł

Domyślnie otrzymujesz domyślną częstotliwość WordPress Heartbeat API, ale możesz utworzyć wiele reguł na podstawie swoich wymagań. Na przykład możesz chcieć, aby WordPress Backend (Dashboard) był uruchamiany w ciągu 2 minut (120 sekund), ale edytor postów był uruchamiany w ciągu 3 minut (180 sekund). Aby to zrobić, musisz utworzyć dwie reguły: jedną dla pulpitu WordPress, a drugą dla edytora postów. Ustaw ich częstotliwości odpowiednio na 2 i 3 minuty.

Wykryj wtyczki korzystające z interfejsu Heartbeat API

Teraz, gdy już wszystko skonfigurowałeś, nadszedł czas, aby sprawdzić, które wtyczki wykorzystują plik admin-ajax.php i spowalniają witrynę.

Przejdź do GTmetrix i wprowadź adres URL swojej witryny. Analiza witryny zajmie kilka chwil. Po zakończeniu przejdź do zakładki Wodospad, a zobaczysz, ile czasu zajmuje plikowi połączenie i odpowiedź. Przewiń trochę w dół i zobacz, czy istnieje wpis dla POST admin-ajax.php. Jeśli tak, rozwiń go i przejdź do zakładki Opublikuj. Stąd możesz zidentyfikować wtyczkę winowajcy.

W moim przypadku wtyczka „desktop switch” korzysta z pliku admin-ajax.php i stale wysyła żądania do serwera. To jest czas na podjęcie decyzji; albo zastąp go inną wtyczką, albo trzymaj kciuki.

– POST admin-ajax.php

Streszczenie

Biorąc pod uwagę zestaw funkcji, interfejs Heartbeat API jest bardzo przydatny w Twojej witrynie WordPress. Jednakże, jeśli nie jest używany poprawnie, może wydłużyć czas ładowania backendu i frontendu WordPressa, wysyłając żądania WordPress Ajax do i z powrotem.

Są tylko dwa rozwiązania tego problemu. Możesz wyłączyć interfejs API Heartbeat / włączyć go tylko w kilku lokalizacjach - lub - uaktualnić do hostingu zarządzanego, który może obsłużyć obciążenie żądań, a także skrócić czas odpowiedzi serwera.

Często Zadawane Pytania