Was ist AJAX und wie wird es in WordPress verwendet (eine Schritt-für-Schritt-Anleitung)

Veröffentlicht: 2021-05-27
WordPress-Ajax
Folgen Sie @Cloudways

AJAX ist eine beliebte Technologie, die in der Website-Entwicklung verwendet wird und es Ihnen ermöglicht, Daten aus dem Backend abzurufen und die Ansicht zu aktualisieren, ohne die Webseite neu laden zu müssen. Daher hilft es Ihnen, die Interaktivität, Geschwindigkeit und Benutzerfreundlichkeit Ihrer Website zu verbessern. AJAX ist jedes Mal funktionsfähig, wenn Sie Aktionen wie das Hinterlassen eines Kommentars oder das Posten eines Tweets ausführen.

In diesem Artikel erkläre ich Ihnen, was AJAX ist und wie Sie AJAX in WordPress (auch bekannt als WP AJAX) verwenden. Lesen wir weiter!

  • Was ist AJAX?
  • Wie funktioniert AJAX?
  • Wie verwende ich AJAX in WordPress?
  • Wie überladen Plugins admin-ajax.php?
  • Beschleunigen Sie das WordPress-Dashboard
  • Plugins erkennen, die die Heartbeat-API verwenden

Was ist AJAX?

AJAX steht für Asynchronous JavaScript And XML, eine Technologie, die es Ihnen ermöglicht, asynchron Anfragen an den Server zu stellen und Änderungen an unseren Seiten vorzunehmen, ohne diese neu laden zu müssen. Das AJAX-Skript fordert den Server auf, einige Daten zurückzugeben und modifiziert dann die Webseiten mit den erhaltenen Daten.

Stellen Sie sich zum Beispiel ein Dropdown-Menü vor, in dem Sie Ihr Termindatum auswählen, und eine andere Dropdown-Liste zeigt Ihnen dynamisch die verfügbaren Stunden an. Über ein Skript wurde der Server nach den verfügbaren Stunden für die Auswahl des Behandlungs-Dropdowns gefragt.

Wie funktioniert AJAX?

Die Mission von AJAX ist es, als Brücke zwischen Ihrer Website und dem Server zu dienen. Kern dieser asynchronen Technologie ist das XMLHttpRequest-Objekt, das den Datenaustausch ermöglicht. Dies sind die grundlegenden Schritte, um einen AJAX-Aufruf zu tätigen:

wie funktioniert ajax

– Quelle: W3Schools

  • Geben Sie die zu sendenden Informationen an
  • Anruf einrichten
  • Verwenden Sie das XMLHttpRequest-Objekt, um die Daten zu senden
  • Empfangen und Verarbeiten der Antwort vom Server

Das Gute daran ist, dass dieser Prozess mit der jQuery-Bibliothek vereinfacht werden kann.

Wie verwende ich AJAX in WordPress?

WordPress unterstützt AJAX nativ. Sie können „admin-ajax.php“ im Ordner wp-admin sehen.

Es wurde ursprünglich für alle Funktionen erstellt, die AJAX-Anfragen vom WordPress-Administrator stellen. Es wird auch für den öffentlichen Teil des Webs verwendet.

Alle WordPress AJAX-Anfragen müssen ein PHP-Skript durchlaufen. Mit anderen Worten, admin-ajax.php sollte die PHP-Datei sein, über die eine Aktion aufgerufen wird, die Inhalt zurückgibt.

Im Jahr 2013 führte WordPress die WordPress Heartbeat API ein, die mehrere wichtige Funktionen bereitstellte, wie die automatische Speicherfunktion, das Login-Ablaufen und die Warnung nach der Sperrung, während ein anderer Benutzer einen WordPress-Beitrag schreibt oder bearbeitet.

Zwei sehr herausragende Funktionen der Heartbeat-API sind:

1. Automatisches Speichern

Wenn Sie einen Entwurf eines Beitrags speichern oder weiter daran arbeiten, speichert WordPress automatisch die Änderungen. Es gibt einen deutlichen Unterschied zwischen dem automatischen Speichern und dem manuellen Speichern des Entwurfs. Sehen Sie sich den folgenden Screenshot an, der beide Arten von Speichern zeigt:

Beitrag zuletzt bearbeitet in WordPress

– Automatisches Speichern in WordPress

2. Postsperre

Wenn Sie versuchen, einen Beitrag zu bearbeiten, an dem ein anderer Benutzer bereits arbeitet, wird eine Popup-Warnung zu dieser Situation angezeigt. Es sind drei Aktionen für Sie sichtbar.

Nachbearbeitung in WordPress

– Post-Sperre in WordPress

Möglich werden die oben genannten Funktionen durch die WordPress Heartbeat API, die eine Verbindung zwischen Server und Browser für entsprechende Kommunikation und Antworten herstellt.

Die WordPress Heartbeat API generiert Anfragen zur Kommunikation mit dem Server und löst Ereignisse beim Empfangen von Daten/Antworten aus. Dies erhöht normalerweise die Last auf dem Server und verlangsamt schließlich den WordPress-Admin.

Ein Live-Beispiel

Ich logge mich in mein WordPress-Dashboard ein und beginne mit dem Verfassen eines Beitrags. Als nächstes lasse ich den Tab für einige Minuten geöffnet und beginne, andere Tabs zu durchsuchen. Das Dashboard ist immer noch angemeldet und Sie können sehen, dass admin-ajax kontinuierlich Anfragen sendet.

admin-ajax.php sendet Anfragen an den Server

– admin-ajax.php Senden von Anfragen an den Server

Gemäß dem oben genannten Ticket generiert admin-ajax.php in WordPress alle 15 Sekunden Anfragen. Die Anforderung kann eine beliebige Kommunikation mit dem Server sein.

WordPress-Admin-Dashboards sind auf Cloudways schneller

Beginnen Sie mit einer 3-tägigen kostenlosen Testversion

VERSUCH'S JETZT

Wie überladen Plugins admin-ajax.php?

Die meisten Probleme in der admin-ajax.php in WordPress sind auf die Anfragen installierter Plugins zurückzuführen. Diese Plugins verlangsamen den WordPress-Administrator, indem sie Anfragen senden, um eine bestimmte Funktionalität zu erreichen, z.

Das heißt, Anfragen werden nicht unbedingt die Datei admin-ajax.php aufstocken. Wenn die Anfragen richtig behandelt werden und Plugin-Entwickler die Best Practices bei der Verwendung der AJAX-Aufrufe in ihren Plugins befolgen, ist die Datei admin-ajax.php in Ordnung. Daher ist es auch wichtig, jedes Plugin zu diagnostizieren, bevor Sie es deaktivieren.

Wie diagnostiziere ich ein Plugin in WordPress?

Es ist wichtig, das Plugin richtig zu diagnostizieren, um seine Auswirkungen auf die Datei admin-ajax.php zu identifizieren, die möglicherweise den WordPress-Admin verlangsamen kann. Dazu verwenden wir zwei Tools: GTmetrix und WebPageTest.

Navigieren Sie im Fall von GTmetrix zur Registerkarte Wasserfall, um eine vollständige Liste der Anfragen zu erhalten. Wenn Sie sich die Liste genau ansehen, können Sie die POST-Anfragen der Datei admin-ajax.php sehen.

Plugin-Diagnose in WordPress

– Plugin-Diagnose in WordPress

In meinem Fall wurden diese Anfragen hauptsächlich von einem Social-Sharing-Plugin gestellt. Dieses spezielle Plugin sendet alle 15 Sekunden eine Ajax-Anfrage über die API an Social-Media-Konten, um eine aktualisierte Anzahl der Freigaben abzurufen.

Erweitern Sie die Registerkarte für detaillierte Informationen. Die Registerkarte "Antwort" zeigt die genaue Stelle an, die diese Anfragen auslöst.

Chrome enthält Entwicklertools, mit denen die Anfragen verschiedener Plugins analysiert werden können. Um dies zu überprüfen, öffnen Sie die Website in Chrome, klicken Sie auf STRG + Umschalt + I und klicken Sie auf die Registerkarte Netzwerk.

admix-ajax.php-Anfragen in Chrome

– admix-ajax.php-Anfragen in Chrome

Laden Sie die Seite neu und sehen Sie, wie die Liste mit aktualisierten Anforderungen gefüllt wird. Geben Sie im Filterfeld ajax oder admin-ajax ein, um die erforderlichen Dateien zu filtern. Dadurch erhalten Sie einen Einblick in die Anzahl der Anfragen sowie deren Häufigkeit und die Quelle der Anfrage.

Klicken Sie anschließend auf die Datei, um weitere Informationen anzuzeigen. Auf der Registerkarte "Antwort" erhalten Sie einen Hinweis auf das Plugin, das diese Anfrage verursacht. In meinem Fall wurde es diesmal durch das WP Popular Plugin (WPP) ausgelöst, ein Plugin, das den beliebtesten Beitrag über einen bestimmten Zeitraum hervorhebt.

Um dies zu vermeiden, stellen Sie sicher, dass das von Ihnen verwendete Plugin aktualisiert wird. Wenn dies nicht der Fall ist, versuchen Sie, ein Support-Ticket zu öffnen, damit die Entwickler das Problem beheben können. Wenn möglich, können Sie es auch durch ein anderes Plugin ersetzen, das aktualisiert wird und die Datei admin-ajax.php nicht überlastet.

Es ist wichtig, eine gründliche Diagnose durchzuführen, bevor Sie ein Plugin entfernen, da einige Plugins für Ihre WordPress-Site von entscheidender Bedeutung sind. Diese Tools können Ihnen helfen, die Ursache zu finden und die bestmögliche Lösung zu finden, um sie zu beheben.

Im nächsten Abschnitt werden wir sehen, wie wir diese Anfragen reduzieren und verhindern können, dass die Datei admin-ajax.php überlastet wird.

Beschleunigen Sie das WordPress-Dashboard

Um das WordPress-Backend zu beschleunigen, ist es am besten, die Heartbeat-API zu deaktivieren oder zumindest ein längeres Zeitintervall einzustellen, damit es nicht alle paar Sekunden auf dem Server landet.

Heartbeat Control-Plugin installieren

Herzschlag-Steuerungs-Plugin

– Heartbeat Control-Plugin

Melden Sie sich bei Ihrem WordPress-Admin-Dashboard an. Navigieren Sie zu Plugins → Neu hinzufügen. Suchen Sie nach Heartbeat Control. Installieren und aktivieren Sie es.

Heartbeat Control-Plugin installieren

– Heartbeat Control in WordPress installieren

Heartbeat Control-Plugin konfigurieren

Navigieren Sie zu Einstellungen → Heartbeat Control-Einstellungen. Dort finden Sie drei Dropdown-Menüs zur Konfiguration des Plugins.

1. Heartbeat zulassen

Sie können die Bereiche auswählen, in denen die Heartbeat-API funktioniert. Es stehen drei Optionen zur Auswahl:

  • WordPress-Dashboard: Dies aktiviert die Heartbeat-API für das WordPress-Dashboard.
  • Frontend: Dadurch wird die API im Frontend aktiviert.
  • Post-Editor: Markieren Sie dieses Kontrollkästchen, wenn Sie die Aktivierung der Heartbeat-API für Autosave- und Post-Lock-Funktionen zulassen möchten.

Herzschlag im Plugin zulassen

– Heartbeat von Heartbeat Control zulassen

2. Deaktivieren Sie Heartbeat

Wählen Sie diese Option, wenn Sie möchten, dass die WordPress Heartbeat-API bestimmte Standorte deaktiviert. Seien Sie bei der Auswahl der Speicherorte vorsichtig, da möglicherweise auch andere Plugins die WordPress Heartbeat API verwenden. Wenn Sie der einzige Benutzer des WordPress-Backends sind, würde ich vorschlagen, es überall zu deaktivieren und dann zu prüfen, ob es die Website beschädigt.

Wenn Ihre Website jedoch mehr als einen Benutzer hat, der regelmäßig Beiträge leistet, würde ich vorschlagen, dass Sie die Heartbeat-API nur auf den Post-Edit-Seiten zulassen.

Herzschlag im Plugin deaktivieren

– Deaktivieren Sie Heartbeat in Heartbeat Control

3. Heartbeat ändern

In dieser Dropdown-Liste können Sie das Zeitintervall zwischen 0 und 300 Sekunden für die Ausführung von admin-ajax-Anfragen festlegen. Bei Einstellung auf 120 Sekunden wird die Anfrage alle 120 Sekunden generiert. Dadurch wird die Belastung des Servers drastisch reduziert. Passen Sie es an Ihre Bedürfnisse an.

Herzschlag im Plugin ändern

– Heartbeat in Heartbeat Control ändern

Erstellen Sie mehrere Regeln

Sie können basierend auf Ihren Anforderungen mehrere Regeln erstellen. Sie möchten beispielsweise, dass das WordPress-Dashboard in 120 Sekunden ausgelöst wird, der Post-Editor jedoch in 60 Sekunden. Dazu müssen Sie zwei Regeln erstellen: eine für das WordPress-Dashboard und die andere für den Post-Editor. Stellen Sie ihre Frequenzen auf 120 bzw. 60 ein.

Plugins erkennen, die die Heartbeat-API verwenden

Nachdem Sie nun alles eingerichtet haben, ist es an der Zeit zu überprüfen, welche Plugins die Datei admin-ajax.php verwenden und die Website verlangsamen.

Gehen Sie zu GTmetrix und geben Sie die URL Ihrer Site ein. Die Analyse der Site dauert einige Augenblicke. Wenn Sie fertig sind, navigieren Sie zur Registerkarte Wasserfall und Sie sehen, wie lange eine Datei benötigt, um eine Verbindung herzustellen und zu reagieren. Scrollen Sie ein wenig nach unten und sehen Sie, ob es einen Eintrag für POST admin-ajax.php gibt. Wenn ja, erweitern Sie es und navigieren Sie zur Registerkarte Post. Von hier aus können Sie das Täter-Plugin identifizieren.

In meinem Fall verwendet das Plugin „Desktop Switch“ die Datei admin-ajax.php und sendet kontinuierlich Anfragen an den Server. Dies ist die Zeit, um eine Entscheidung zu treffen; entweder durch ein anderes Plugin ersetzen oder die Daumen drücken.

Post-Admin Ajax-php

– POST admin-ajax.php

Zusammenfassung

In Anbetracht ihres Funktionsumfangs ist die Heartbeat-API auf Ihrer WordPress-Website sehr nützlich. Wenn es jedoch nicht richtig verwendet wird, kann es die Ladezeit eines WordPress-Backends und des Frontends erhöhen, indem es an und zurück WordPress Ajax-Anfragen sendet.

Es gibt nur zwei Lösungen für dieses Problem. Sie können die Heartbeat-API deaktivieren/nur an wenigen Stellen aktivieren – oder – auf ein verwaltetes Hosting upgraden, das die Last der Anfragen bewältigen kann und auch die Server-Antwortzeit verkürzt.