WordPress ist eine der beliebtesten Plattformen zum Erstellen und Verwalten von Websites. Eines der Merkmale dieses Content-Management-Systems ist die Möglichkeit, Formulare einfach zu erstellen und einer Website hinzuzufügen. Damit die Formulare jedoch benutzerfreundlicher und einfacher vom Benutzer verwendet werden können, ist es sinnvoll, die Funktionalität von Ajax-Anfragen hinzuzufügen, um sie zu senden, ohne die Seite neu zu laden.
Das Erstellen eines Ajax-Formulars auf WordPress kann für Menschen ohne Programmiererfahrung wie eine schwierige Aufgabe erscheinen. Dank der einfachen und umfangreichen WordPress-API wird das Erstellen eines solchen Formulars jedoch zu einer ziemlich einfachen Angelegenheit. In diesem Artikel werden wir uns die Schritte ansehen, die erforderlich sind, um ein Ajax-Formular auf WordPress zu erstellen, ohne Plugins zu verwenden.
Bevor Sie beginnen, stellen Sie sicher, dass Sie über ein Administratorkonto auf Ihrer WordPress-Website und grundlegende Kenntnisse zum Erstellen und Bearbeiten von WordPress-Themes verfügen. Lassen Sie uns nun zum eigentlichen Prozess des Erstellens eines Ajax-Formulars auf WordPress übergehen.
Was ist ein Ajax-Formular?
Wenn Sie ein Ajax-Formular in WordPress erstellen, können Sie mit JavaScript und PHP Anfragen an den Server stellen, ohne die Seite neu zu laden. Anstatt dass der Benutzer eine weiße Seite mit dem Hochladen sieht, werden die Daten an den Server gesendet und der neue Inhalt wird dynamisch hochgeladen, wodurch der Fortschritt und die Benutzerfreundlichkeit für den Benutzer erhalten bleiben.
Die Implementierung eines Ajax-Formulars auf WordPress kann in vielen Fällen nützlich sein, z. B. das Senden von Kommentaren, Feedback, Newsletter-Abonnements und vieles mehr. Es ermöglicht Ihnen, den Inhalt der Seite in Echtzeit zu aktualisieren, ohne die gesamte Seite neu laden zu müssen. Dies reduziert die Wartezeit für Ergebnisse und bietet eine glattere und intuitivere Benutzererfahrung.
Vorteile der Verwendung eines Ajax-Formulars
- Keine Seite neu laden: Mit dem Ajax-Formular können Sie Daten an den Server senden, ohne die gesamte Seite neu laden zu müssen. Dies macht den Übergang des Benutzers reibungsloser und bequemer.
- Verbesserte Benutzererfahrung: aufgrund seiner asynchronen und dynamischen Natur ermöglicht das Ajax-Formular, dass Sie nur die benötigten Teile einer Seite sofort aktualisieren können, ohne andere Elemente zu beeinträchtigen, wodurch die Verwendung der Website schneller und benutzerfreundlicher wird.
- Echtzeit-Feedback: Ajax-Formulare ermöglichen es Ihnen, sofort Feedback vom Server zu erhalten, ohne dass die Seite neu geladen werden muss. Dies ermöglicht es Benutzern, die Ergebnisse ihrer Aktionen sofort zu sehen und Fehler zu behandeln oder Anpassungen in Echtzeit vorzunehmen.
- Mehr Flexibilität und Möglichkeiten: Ajax-Formulare ermöglichen komplexere und interaktive Aktionen wie das Überprüfen von Eingaben im laufenden Betrieb, das Anzeigen von Informationen in der Vorschau, das Laden von Daten ohne Neuladen der Seite und vieles mehr. Dies gibt Entwicklern mehr Freiheit, eine einzigartige und interessante Benutzererfahrung zu schaffen.
Wie erstelle ich ein Ajax-Formular auf WordPress?
Das Erstellen eines Ajax-Formulars in WordPress ermöglicht es Ihnen, alle Vorteile dieser Technologie zu nutzen, ohne zusätzliche Plugins installieren zu müssen. Hier finden Sie eine einfache und effektive Möglichkeit, ein Ajax-Formular auf Ihrer WordPress-Website zu erstellen.
Schritt 1: Erstellen Sie eine Seitenvorlage für das Formular. Sie benötigen eine Formulardatei (z. B. form.php), das den gesamten Code des Formulars enthält. In dieser Datei können Sie die erforderlichen HTML-Elemente wie input, textarea und die Übermittlungsschaltfläche des Formulars hinzufügen.
Schritt 2: Nehmen Sie Änderungen an der functions-Datei vor.php Ihr WordPress-Theme. Fügen Sie den folgenden Code hinzu:
Dieser Code fügt die erforderlichen JavaScript-Dateien hinzu und konfiguriert ein ajax_form_object-Objekt, das eine URL zum Senden von Ajax-Anforderungen und eine URL enthält, die den Benutzer nach dem Senden des Formulars umleiten soll.
Schritt 3: Erstellen Sie eine Ajax-Form-Datei.js im Ordner Ihres WordPress-Themas. Fügen Sie den folgenden Code in diese Datei ein:
Dieser Code verarbeitet das Formular-Übermittlungsereignis und sendet eine Ajax-Anfrage an den Server. Nachdem die Anforderung erfolgreich verarbeitet wurde, wird der Benutzer auf die angegebene Seite weitergeleitet.
Schritt 4: Fügen Sie den folgenden Code in die Formulardatei (form.php) zum Hinzufügen einer speziellen Klasse und ID zum Formular:
Schritt 5: Fügen Sie der functions-Datei den folgenden Code hinzu.php Ihr WordPress-Theme:
Dieser Code verarbeitet die Ajax-Anfrage, um das Formular zu senden, und gibt die entsprechende Antwort auf die Anfrage zurück. Sie müssen Ihren eigenen Code hinzufügen, um das Formular innerhalb der Funktion ajax_form_submit() zu verarbeiten.
Jetzt haben Sie ein Ajax-Formular auf Ihrer WordPress-Website, das Daten sendet, ohne die Seite neu zu laden. Sie können es weiter anpassen, indem Sie zusätzliche Felder, Formularvalidierung usw. hinzufügen, indem Sie den bereitgestellten Code im WordPress-Artikel und in der Dokumentation verwenden.
Erste Schritte mit einem Ajax-Formular
Um ein Ajax-Formular auf WordPress ohne Plugins zu erstellen, benötigen Sie einige grundlegende Kenntnisse über JavaScript und PHP. In diesem Abschnitt werden wir die grundlegenden Schritte untersuchen, die erforderlich sind, um mit einem Ajax-Formular zu beginnen.
Der erste Schritt besteht darin, ein HTML-Formular zu erstellen, das wir mit einer Ajax-Anfrage senden. In einer WordPress-Vorlagendatei (z. B. in einer Datei page.php) sie müssen den folgenden Code hinzufügen:
">
Im Code haben wir ein normales HTML-Formular mit zwei Eingabefeldern (Name und E-Mail) und einer Schaltfläche zum Senden erstellt. Es ist wichtig zu beachten, dass wir Attribute hinzugefügt haben id und name für jedes Feld, damit wir mit JavaScript auf die Feldwerte zugreifen können.
Wir haben auch ein verstecktes Feld hinzugefügt action mit dem Wert "ajax_form_submit", damit WordPress weiß, welche PHP-Funktion aufgerufen werden soll, wenn eine Ajax-Anfrage eingeht. Wir haben auch Funktionen verwendet wp_nonce_field so fügen Sie dem Formular ein Sicherheitstoken hinzu, um zu verhindern, dass Daten auf dem Server überschrieben werden.
Im nächsten Abschnitt werden wir uns mit der Erstellung einer entsprechenden PHP-Funktion befassen, die die Ajax-Anfrage verarbeitet und E-Mails mit Feldwerten sendet.
Senden von Ajax-Formulardaten
Um Ajax-Formulardaten an WordPress zu senden, ohne Plugins zu verwenden, müssen wir die integrierten WordPress- und JavaScript-Funktionen verwenden.
Zuerst fügen wir der Übermittlungsschaltfläche des Formulars mithilfe von JavaScript einen Ereignishandler hinzu.
document.querySelector('#my-form-submit-button').addEventListener('click', function() );Dann erstellen wir eine Funktion, die beim Senden des Formulars ausgeführt wird. Diese Funktion verwendet die Ajax-Funktion von WordPress, um Daten zu senden.
function ajaxFormSubmit()Jetzt müssen wir dem Server einen Handler für unsere Anfrage hinzufügen. Dazu erstellen wir eine Funktion in der Datei functions.php Ihres Themas.
function my_ajax_form_handler() true);wp_send_json($response);>add_action('wp_ajax_my_ajax_form', 'my_ajax_form_handler');add_action('wp_ajax_nopriv_my_ajax_form', 'my_ajax_form_handler');Schließlich müssen wir unserem Formular auf der Website ein PHP-Skript hinzufügen, um die Anfrage zu bearbeiten.
Dies ist ein Beispiel für eine einfache Möglichkeit, ein Ajax-Formular an WordPress zu erstellen und zu senden, ohne zusätzliche Plugins zu verwenden. Möglicherweise müssen Sie zusätzliche Datenverarbeitungslogik oder zusätzliche Validierungen hinzufügen, bevor Sie das Formular an den Server senden, abhängig von Ihren Anforderungen.
Abrufen und Verarbeiten von Ajax-Formulardaten
Um Daten zu erhalten und zu verarbeiten, die über ein Ajax-Formular an WordPress gesendet werden, müssen Sie der functions-Datei einen entsprechenden Handler hinzufügen.php Ihres Themas. Dieser Handler wird ausgeführt, wenn das Formular gesendet wird.
Im ersten Schritt verwenden wir den Standard-Hook "wp_ajax", der zum Bearbeiten von Ajax-Anfragen in WordPress verwendet wird. Wir erstellen eine Funktion, die beim Senden des Formulars für diesen Hook aufgerufen wird.
Innerhalb der Funktion können Sie die Daten abrufen, die mit einer Ajax-Anfrage gesendet werden, indem Sie das globale $_POST-Objekt verwenden. Zum Beispiel können Sie den Wert des Felds "name" aus Ihrem Formular mit $_POST abrufen['name'].
Nachdem Sie die Daten erhalten haben, können Sie die erforderliche Verarbeitung durchführen, z. B. eine Validierung. Wenn die Daten gültig sind, können Sie sie in einer Datenbank speichern oder etwas anderes mit ihnen machen.
Am Ende des Handlers muss die Antwort an den Browser zurückgegeben werden. Dazu können Sie die Funktion wp_send_json_success() oder wp_send_json_error() verwenden, die die Antwort im JSON-Format senden.
Wenn Ihre Daten beispielsweise erfolgreich verarbeitet wurden, können Sie eine Antwort in Form von senden:
wp_send_json_success( 'Die Daten wurden erfolgreich verarbeitet.' );
Wenn bei der Verarbeitung der Daten ein Fehler aufgetreten ist, können Sie eine Antwort in Form von senden:
wp_send_json_error( 'Bei der Verarbeitung der Daten ist ein Fehler aufgetreten.' );
Nachdem Sie einen Handler in der functions-Datei erstellt haben.php, Sie können den entsprechenden JavaScript-Code hinzufügen, um eine Ajax-Anfrage von Ihrem Formular zu senden. Weitere Informationen dazu finden Sie in den vorherigen Abschnitten des Artikels.
