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 niektórych 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, aby wykonać wywołanie 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.

Został pierwotnie 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 zapisaniem 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 stosują najlepsze praktyki 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 wykorzystamy dwa narzędzia: 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 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 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, najlepszym rozwiązaniem 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ę kontroli bicia serca

– Wtyczka kontroli bicia serca

Zaloguj się do pulpitu administracyjnego WordPress. Przejdź do Wtyczki → Dodaj nowy. Wyszukaj kontrolę bicia serca. Zainstaluj i aktywuj.

– Zainstaluj Heartbeat Control w WordPress

Skonfiguruj wtyczkę kontroli pulsu

Przejdź do Ustawienia → Ustawienia kontroli bicia serca. Znajdziesz tam trzy rozwijane menu do konfiguracji wtyczki.

1. Zezwól na bicie serca

Możesz wybrać obszary, w których będzie działać Heartbeat API. Do wyboru są trzy opcje:

• Pulpit nawigacyjny WordPress: Włącza interfejs Heartbeat API dla pulpitu nawigacyjnego WordPress.
• Frontend: To umożliwi API na frontendzie.
• Edytor postów : zaznacz to pole wyboru, jeśli chcesz, aby interfejs Heartbeat API był włączony w funkcjach automatycznego zapisywania i blokowania postów.

– Zezwól na bicie serca kontroli bicia serca

2. Wyłącz bicie serca

Wybierz tę opcję, jeśli chcesz, aby WordPress Heartbeat API wyłączał określone lokalizacje. Zachowaj ostrożność podczas wybierania lokalizacji, ponieważ inne wtyczki mogą również korzystać z API WordPress Heartbeat. Jeśli jesteś jedynym użytkownikiem backendu WordPress, sugerowałbym wyłączenie go wszędzie, a następnie sprawdzenie, czy nie psuje strony.

Jeśli jednak Twoja witryna ma więcej niż jednego użytkownika, który regularnie wnosi swój wkład, proponuję, abyś zezwolił na API Heartbeat tylko na stronach edycji postów.

– Wyłącz bicie serca w kontroli bicia serca

3. Zmodyfikuj bicie serca

To menu rozwijane umożliwia ustawienie przedziału czasowego od 0 do 300 sekund na wykonanie żądań admin-ajax. Ustawiając go na 120 sekund, żądanie będzie generowane co 120 sekund. To drastycznie zmniejszy obciążenie serwera. Dostosuj go do swoich potrzeb.

– Modyfikuj bicie serca w kontroli bicia serca

Utwórz wiele reguł

Możesz utworzyć wiele reguł na podstawie swoich wymagań. Na przykład możesz chcieć, aby panel WordPress był uruchamiany w 120 sekund, a edytor postów w 60 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 120 i 60.

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 sprawdź, czy jest 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.