So erstellen Sie ein Frontend-Formular mit ACF

In diesem Tutorial zeige ich Ihnen, wie Sie ein Frontend-Formular mit Advanced Custom Fields (ACF) erstellen. Ich werde im Detail darauf eingehen, wie es funktioniert und wie Sie es an Ihre Bedürfnisse anpassen können.

Advanced Custom Fields (ACF) ist ein kostenloses Plugin, mit dem Sie Feldeinstellungen einer ganzen Reihe von Typen zu fast jeder Art von Inhalt in WordPress hinzufügen können. Sie können Felder zu Posts, Taxonomien, Menüs, Widgets, Benutzern und sogar benutzerdefinierten Admin-Seiten hinzufügen. Es wird hauptsächlich für den Administrator verwendet, aber Sie können es auch verwenden, um die Felder im Front-End zu generieren.

Es gibt viele Anwendungen zum Hinzufügen von ACF-Feldern zum Front-End; Sie können ein Formular hinzufügen, um Beiträge, Kategorien oder Benutzer zu erstellen und zu aktualisieren. Mit etwas Code können Sie sogar ein allgemeines Kontaktformular erstellen, in dem Antworten als benutzerdefinierte Beitragstypen gespeichert werden und der Code E-Mail-Benachrichtigungen bei Formularantworten auslöst. Genau wie ein normales Kontaktformular. Die Verwendung der ACF-Front-End-Formularfunktionalität zum Erstellen von Formularen und um Besuchern das Erstellen oder Bearbeiten von Website-Inhalten ohne Anmeldung zu ermöglichen, sind die üblichen Verwendungszwecke. Aber verwenden Sie dies mit Vorsicht. Dies öffnet sich leicht für Spam und Missbrauch, und im schlimmsten Fall können Besucher den Inhalt oder die Einstellungen Ihrer Website zerstören. Sie sollten zumindest von Besuchern verlangen, dass sie sich mit gültigen Benutzern anmelden, um Zugriff auf Formulare zu erhalten, die kritische WordPress-Inhalte (Benutzerprofil, Beiträge usw.) ändern können.

Was wir machen werden

Ich gehe davon aus, dass die WordPress-Site eine Reihe zusätzlicher Felder für Benutzer einer benutzerdefinierten Rolle (‘ member‘) mit ACF definiert hat. Diese Benutzer haben überhaupt keinen Administratorzugriff, aber wir möchten ihnen die Möglichkeit bieten, ihre benutzerdefinierten Felder in ihrem Profil zu bearbeiten. Die Lösung, für die ich mich entschieden habe, ist das Erstellen einer benutzerdefinierten Seitenvorlage zum Aktualisieren ihres Profils, wobei das Formular nur angezeigt wird, wenn sie angemeldet sind und die richtige Rolle haben.

Ich halte es in diesem Tutorial ziemlich einfach, daher werde ich kein Beispiel für das Hinzufügen der Standard-Benutzerprofilfelder in WordPress (E-Mail, Passwort usw.) einfügen. Das fällt etwas aus dem Rahmen dieses Tutorials. Ich werde nur die Bearbeitung der ACF-Felder auf dieser Profilbearbeitungsseite zulassen.

Mit ACF habe ich eine Feldgruppe mit einer Reihe von Einstellungen für Mitgliedsbenutzer erstellt:

Und ich habe eine benutzerdefinierte Seitenvorlage in meinem Design, die derzeit so aussieht – im Moment nur eine einfache Standardvorlage für eine einzelne Seite;

In Zeile #11prüfen wir, ob der aktuelle Benutzer angemeldet ist und die benutzerdefinierte Rolle hat member. Ändern Sie die Rolle oder Mindestregel auf das, wofür Sie dieses Frontend-Formular zulassen möchten. Denken Sie daran, dass selbst die niedrigste Rolle in WordPress, subscriber, Zugriff auf die Bearbeitung ihres Profils im Admin-Bereich hat.

Kurz gesagt, wir möchten diese Felder für jedes Mitglied auf dieser benutzerdefinierten Frontend-Seite hinzufügen:

Funktionsweise von ACF-Front-End-Formularen

Sie müssen zwei Funktionsaufrufe in der Vorlage hinzufügen, die Sie als Front-End-Formular verwenden möchten. [acf_form_head](https://www.advancedcustomfields.com/resources/acf_form_head/)()und [acf_form](https://www.advancedcustomfields.com/resources/acf_form/)().

Die Funktion acf_form_head()muss ganz oben in Ihrer Vorlage platziert werden, vor jeder Ausgabe. Normalerweise bedeutet dies in einer Vorlage vor [get_header](https://developer.wordpress.org/reference/functions/get_header/)(). Der Funktionsaufruf stellt sicher, dass alle Skripte und Stile hinzugefügt werden, damit die ACF-Felder korrekt gerendert werden, sowie alle Funktionen zum Verarbeiten, Validieren und Übermitteln von Arbeiten. Wir müssen dieser Funktion keine Parameter hinzufügen.

Die acf_form()Funktion rendert das Frontend-Formular und sollte dort platziert werden, wo das Formular erscheinen soll. Es akzeptiert eine Reihe von Einstellungen. Wir müssen mindestens darüber informieren, welche Felder oder Gruppen angezeigt und wo sie gespeichert werden sollen.

Wenn es um die Entscheidung geht, welche Felder angezeigt werden sollen, geben Sie normalerweise eine Feldgruppe (property field_groups) an. Die acf_form()Funktion unterstützt aber auch die Bereitstellung spezifischer Einzelfelder (property fields). Sie können auch mehrere Felder oder Feldgruppen bereitstellen, um sie in demselben Formular zu kombinieren. Aus diesem Grund field_groupserwartet ein Array. Selbst wenn Sie also nur eine Feldgruppe anzeigen möchten, müssen Sie diese ID oder diesen Slug in einem Array angeben.

Die zweite erforderliche Eigenschaft, die Sie für das Formular bereitstellen müssen, acf_form()ist, woher die Daten geladen und wo sie gespeichert werden sollen, in der Eigenschaft post_id. Lassen Sie sich nicht vom Namen „Post” täuschen. Die Regeln für post_idsind die gleichen, wenn Sie verwenden get_field(), wenn Sie von früher mit der Arbeit mit ACF vertraut sind. Wenn die Felder für einen Beitrag sind (Beitrag, Seite, benutzerdefinierter Beitragstyp Beitrag), müssen Sie hier nur die ID angeben. Wenn Sie jedoch Benutzerdaten laden und aktualisieren möchten, folgen Sie diesem Format: user_{user ID}. Ähnlich bei Feldern für eine Kategorie: category_{category ID}. Sehen Sie sich alle Regeln unter der Überschrift „ Erhalte einen Wert von verschiedenen Objekten” in der ACF-Dokumentation auf anget_field().

Hinzufügen des ACF-Frontend-Formulars zu unserer Vorlage

Zuerst fügen wir acf_form_head()das ganz oben ein, direkt vor get_header()– aber nach der Deklaration der Seitenvorlage (Zeile #3). Dann fügen wir an der Stelle, an der wir das Formular rendern möchten, acf_form()zwei Eigenschaften hinzu.

Wir müssen unsere Feldgruppen-ID herausfinden. Wenn Sie die Feldgruppe nach Code hinzugefügt haben (ich habe einen Beitrag, der ausführlich erklärt, wie man ACF-Felder nach Code hinzufügt ), haben Sie bereits einen Feldgruppen-Slug bereitgestellt. Sie würden dann den Slug für die field_groupsEigenschaft in einem Array bereitstellen. Wenn Sie die Feldgruppe im Admin-Panel hinzugefügt haben, müssen Sie die Gruppe im Browser öffnen und die URL überprüfen. Uns interessiert die ID, die nach „ ?post=” erscheint:

In meinem Beispiel ist die ID 1145. Dann stelle ich das im Array von bereit field_groups.

PS: Ich empfehle nicht, eine ID fest zu codieren, da diese ID in jeder WordPress-Instanz anders sein wird! Wenn Sie sowohl an einer lokalen Installation als auch an einem Staging- und Produktionsserver arbeiten, würde ich definitiv empfehlen, die Felder stattdessen per Code hinzuzufügen. Auf diese Weise können Sie einen Feldgruppennamen definieren und es funktioniert überall.

Was die post_idEigenschaft betrifft, kann ich die aktuelle Benutzer-ID mithilfe der WordPress-Funktion abrufen [get_current_user_id](https://developer.wordpress.org/reference/functions/get_current_user_id/)(). Ich verkette den String ‘ user_‘ und die Rückgabe dieser Funktion als post_id.

Und das ist es im Grunde!

Wenn ich diese Seite als Mitgliedsbenutzer eingeloggt besuche, bekomme ich die aktuellen Werte für diesen Benutzer. Alle ACF-Feldtypen funktionieren und sehen gut aus. Und ich kann die Werte über das Front-End-Formular aktualisieren und sehen, dass sie auch im Admin-Bereich aktualisiert werden.

Weitere Anpassung des Formulars

Wir können die an übergebenen Einstellungen weiter optimieren acf_form(). Sehen Sie sich die ACF-Dokumentation zu acf_form() an, um alle möglichen Einstellungen zu sehen.

Im Moment zeigt unser Benutzerprofilformular „Aktualisiert posten” an, wenn die Einstellungen übermittelt werden. Für Profileinstellungen macht das keinen Sinn. Wir können die Nachricht mit der Eigenschaft anpassen updated_message.

Wenn Sie möchten, können Sie eine andere URL definieren, auf die nach dem Absenden des Formulars umgeleitet werden soll. Standardmäßig wird dieselbe Seite mit dem GET-Parameter ‘ ?updated=true‘ neu geladen. Sie können eine bestimmte URL zu einer Dankesseite angeben, oder wenn das Formular für einen Beitrag bestimmt ist, möchten Sie möglicherweise zur Anzeige dieses Beitrags umleiten. Wir können die URL in der Eigenschaft bereitstellen return.

Wenn wir einen anderen Text auf der Schaltfläche zum Senden des Formulars wünschen, können wir dies in der Eigenschaft angeben submit_value.

Sie können auch angeben, dass das Tag acf_form()nicht gerendert werden soll. <form>Wenn Sie das ACF-Formular mit Ihrem eigenen benutzerdefinierten Formular kombinieren möchten, können Sie formund manuell einstellen falseund eingeben. Wenn Sie dies tun, kann ACF die Werte immer noch aktualisieren, aber Sie müssen sich um die Aktualisierung aller anderen Felder in Ihrem benutzerdefinierten Formular kümmern.<form>``<input type="submit"/>

Auslösen von Aktionen bei Formularübermittlungen

Manchmal möchten Sie vielleicht einige benutzerdefinierte Funktionen oder Ereignisse auslösen, wenn ein Frontend-Formular aktualisiert wird. Ein gängiges Beispiel ist das Schreiben einer Funktion, die bei jeder Formularübermittlung eine E-Mail-Benachrichtigung sendet.

Advanced Custom Fields bietet zwei nützliche Hooks für die Aktualisierung von Feldern; die Aktion [acf/save_post](https://www.advancedcustomfields.com/resources/acf-save_post/)und der Filter [acf/pre_save_post](https://www.advancedcustomfields.com/resources/acf-pre_save_post/). Lassen Sie sich auch hier nicht vom Namen „Post” täuschen. Sie werden bei jeder Aktualisierung von ACF-Feldern ausgelöst, einschließlich Feldern für einen Benutzer, eine Kategorie, ein Menü usw.

Der Filter acf/pre_save_postwird nur auf Frontend-Formularen mit ausgeführt acf_form(). Als Parameter für diesen Filter erhalten wir post_iddenselben Wert, den wir oben übergeben post_idhaben acf_form(). Der Filter erwartet, dass Sie zurückkehren post_id. Denken Sie daran, dass wir dies analysieren müssen, wenn wir uns nicht auf eine Post-ID beziehen. Zum Beispiel für den Benutzer müssten Sie so etwas tun:

add_filter('acf/pre_save_post', function($post_id) {
    if (strpos($post_id, 'user_') === false) {
        return $post_id;
    }
 
    $user_id = intval(substr($post_id, 5));  // Extracts the user ID
 
    // Do your thing. You'll find the submitted values in $_POST
 
    return $post_id;
});

Alternativ können Sie den Hook verwenden acf/save_post– aber denken Sie daran, dass er auch im Admin ausgelöst wird. Als Parameter für diesen Hook erhalten Sie post_id, genauso wie acf/pre_save_post. Eine wichtige Sache, die Sie bei der Verwendung beachten sollten, acf/save_postist, dass Sie die Hook-Priorität verwenden können, um zu steuern, ob Ihre Funktion ausgeführt wird, bevor Felder gespeichert werden, oder danach. Eine mit Priorität 10 oder höher verknüpfte Funktion wird nach dem Speichern von Feldern ausgelöst. Und eine Priorität von weniger als 10 wird ausgelöst, bevor ACF die Werte speichert.

add_action('acf/save_post', function($post_id) {
    // You can fetch the values with standard get_field()
});
 
add_action('acf/save_post', function($post_id) {
    // You can access the submitted values in $_POST
}, 8);

Wenn Sie die Funktion vor dem Speichern aktiviert haben (Priorität kleiner als 10), können Sie die übermittelten Werte mit dem vergleichen, was ACF speichert. Sie können get_field()den aktuellen Wert abrufen und mit dem entsprechenden Wert in vergleichen $_POST.

Wenn Sie erst etwas tun möchten, wenn die Felder im Frontend aktualisiert wurden, können Sie einfach mit überprüfen, ob wir uns im Admin-Bereich befinden [is_admin](https://developer.wordpress.org/reference/functions/is_admin/)(). Unten sehen Sie ein Beispiel dafür, wie Sie E-Mail-Benachrichtigungen einrichten würden, wenn ein Benutzer seine Einstellungen im Front-End aktualisiert;

add_action('acf/save_post', function($post_id) {
    if (strpos($post_id, 'user_') === false) {
        return $post_id;
    }
 
    if (is_admin()) {
        return;  // Bail if we are updating in admin
    }
 
    $user_id = intval(substr($post_id, 5));
 
    // Use get_field() to get the saved/submitted values if needed
    // Then use wp_mail() to send an email
});