How to Add Custom PHP or JavaScript for WPForms

Markdown anzeigen

Möchten Sie benutzerdefinierte JavaScript- oder PHP-Snippets zu Ihrer Website hinzufügen? Dieses Tutorial bietet Ihnen mehrere Optionen, wie Sie diese Snippets mit schrittweisen Anleitungen für jede optionale Methode, die Sie zur Ergänzung Ihres Snippets wählen, zu Ihrer Website hinzufügen können. Das Hinzufügen benutzerdefinierter Code-Snippets zu Ihrer Website mit PHP oder JavaScript kann die Funktionalität Ihrer Website für Ihre spezifischen Bedürfnisse erweitern. Sei es zur Erweiterung der Funktionalität Ihres WordPress-Themes oder zur Erweiterung der Funktionalität eines beliebigen Plugins.

Mit dieser hilfreichen Anleitung können Sie ganz einfach auswählen, auf welche Weise Sie die Snippets zu Ihrer Website hinzufügen möchten. Sobald Sie Ihre Implementierungsmethode ausgewählt haben, können Sie mit der Erkundung der Entwicklerdokumentation beginnen, um auszuwählen, welche Snippets Sie zu Ihrer Website hinzufügen möchten!

Um sich die verfügbaren Snippets anzusehen, erkunden Sie bitte unsere Entwicklerdokumentation.

Bitte sehen Sie sich unser Video-Tutorial für eine praxisorientiertere Ansicht an, wie Sie benutzerdefiniertes PHP oder JavaScript zu Ihrer Website hinzufügen können.

Implementierungsoptionen

Es gibt eine Reihe von Ansätzen, um PHP oder JavaScript hinzuzufügen, um Ihre spezifischen Bedürfnisse anzupassen, nicht nur für WPForms, sondern für jeden benutzerdefinierten Code, den Sie hinzufügen möchten.

Verwendung des WPCode-Plugins (empfohlen)

Die Verwendung des WPCode-Plugins ist sehr schnell und einfach, um Snippets zu Ihrer Website hinzuzufügen.

Einer der vielen Gründe, warum wir die Verwendung dieses Plugins zum Hinzufügen benutzerdefinierter Snippets zu Ihrer Website dringend empfehlen, ist, dass es vor dem Speichern Ihres Snippets eine integrierte Überprüfung gibt. Wenn ein Semikolon fehlt oder eine zusätzliche Klammer hinzugefügt wird, wird das Snippet nicht gespeichert. Dies verhindert, dass Probleme wie JavaScript-Fehler oder sogar PHP-Fatal-Fehler aufgrund eines falsch kopierten und eingefügten Snippets auf Ihrer Website auftreten können. Und ja, selbst mit der kostenlosen Version erhalten Sie diese zusätzliche Prüfung, bevor Ihr Snippet aktiv wird.

Hinweis: Um mehr über dieses Plugin zu erfahren, besuchen Sie bitte die Website für weitere Informationen, einschließlich dedizierter Dokumentation.

Nachdem das Plugin installiert ist, navigieren Sie im Menü auf der linken Seite Ihres WordPress-Dashboards zu Code Snippets und wählen Sie + Snippet hinzufügen.

Klicken Sie als Nächstes einfach auf Benutzerdefinierten Code hinzufügen (Neues Snippet) und dann auf die blaue Schaltfläche Snippet verwenden, um ein neues Snippet zu erstellen.

Klicken Sie im WPCode-Menü auf + Snippet hinzufügen

Wenn Ihr neuer Snippet-Bildschirm erscheint, geben Sie dem Snippet einen Namen, der für Sie Sinn ergibt, damit Sie und Ihre Website-Administratoren dessen Zweck verstehen. Wählen Sie im Dropdown-Menü Code-Typ PHP.

Hinweis: Alle WPForms-Snippets, die in unserer Entwicklerdokumentation zu finden sind, würden als PHP-Snippet hinzugefügt werden, auch die Snippets, die JavaScript verwenden, mit Ausnahme spezifischer CSS-Snippets. Dies soll sicherstellen, dass das Skript nicht geladen wird, wenn kein WPForms-Formular auf der Seite vorhanden ist. Dies reduziert die Notwendigkeit, Skripte zu laden, die nicht für alle Seiten gelten.

Für den Zweck dieses Tutorials fügen wir den folgenden Codeausschnitt hinzu.

Fügen Sie in der Code-Vorschau Ihren Codeausschnitt direkt unter <?php ein. Hier ist ein Beispiel für diese Dokumentation.

/**
 * Trigger submit from checkbox click
 *
 * @link https://wpforms.com/developers/how-to-automatically-submit-a-form-with-a-field-choice/
 */
function wpf_dev_automatic_submit_form() {
    ?>
    <script type="text/javascript">
    jQuery(function($){
        var event = jQuery.Event("submit");
        jQuery("input:checkbox").change(
            function()
            {
                // when any checkbox is checked, trigger this function
                if( jQuery(this).is(":checked") )
                {
                    // only run this function for the form ID 3046
                    jQuery("#wpforms-form-3046").submit();
                }
            }
        );
    });
    </script>
    <?php
}
add_action('wpforms_wp_footer_end', 'wpf_dev_automatic_submit_form', 30);

Als Nächstes sehen Sie den Abschnitt Einfügen. Nur für diesen speziellen Codeausschnitt wählen wir Automatisch einfügen für die Einfügemethode und Nur Frontend für den Speicherort.

Hinweis: Die Einstellung für den Speicherort hängt davon ab, was Ihr Code tun soll. Wählen Sie Nur Frontend, wenn Ihr Code nur das Aussehen oder die Funktionsweise von Formularen auf den öffentlichen Seiten Ihrer Website ändert.

Wenn Ihr Code überall funktionieren muss – z. B. für die Formularvalidierung oder -verarbeitung – wählen Sie stattdessen Überall ausführen. Hooks wie wpforms_process_validate benötigen beispielsweise Überall ausführen, um ordnungsgemäß zu funktionieren.

Sobald Sie Ihren Codeausschnitt hinzugefügt haben, klicken Sie auf Codeausschnitt speichern. Dadurch wird der Codeausschnitt gespeichert, aber nicht automatisch aktiviert. Nachdem Sie ihn zum ersten Mal gespeichert haben, werden Sie feststellen, dass der Status des Codeausschnitts standardmäßig auf Inaktiv gesetzt ist. Schalten Sie einfach den Schalter von Inaktiv auf Aktiv um und klicken Sie auf Aktualisieren, um den Codeausschnitt als Aktiv zu setzen.

WPCode bietet Ihnen eine sehr einfache und unkomplizierte Möglichkeit, Snippets zu Ihrer Website hinzuzufügen

Erstellen eines seiten-spezifischen Plugins

Hinweis: Die Verwendung dieser speziellen Methode wird nur empfohlen, wenn Sie sich mit der Bearbeitung von PHP-Dateien auskennen und diese direkt auf Ihren Server oder über Ihr bevorzugtes FTP-Programm hochladen.

Wenn Sie ein fortgeschrittener Benutzer sind und alle Ihre benutzerdefinierten Skripte in einer einzigen Datei auf Ihrer Website aufbewahren möchten, können Sie ganz einfach Ihr eigenes, einzigartiges Plugin zum Speichern dieser Codeausschnitte erstellen.

Wenn Sie weitere Informationen zur Erstellung eines seiten-spezifischen Plugins wünschen, lesen Sie bitte dieses Tutorial.

Um ein Plugin zu erstellen, müssen Sie die folgenden Schritte ausführen.

1. Erstellen Sie mit Ihrem bevorzugten Texteditor eine neue Datei. Fügen Sie dann die folgenden Zeilen am Anfang der Datei ein:
<?php /* Plugin Name: WPForms Custom Code Snippets Plugin URI: https://wpforms.com/ Description: Plugin for adding custom code snippets Author: WPForms Team Version: 1.0 Author URI: https://wpforms.com/ */
2. Speichern Sie die Datei als wpforms-custom-snippets.php.
3. Komprimieren oder zippen Sie die Datei.
4. Melden Sie sich bei Ihrer WordPress-Administration an und klicken Sie unter Plugins auf Installieren. Folgen Sie den Anweisungen auf dem Bildschirm, um die gerade erstellte .zip-Datei hochzuladen und zu aktivieren.
5. Sobald Sie das Plugin aktiviert haben, können Sie die Datei unter Plugins » Editor sehen.

Hinweis: WordPress empfiehlt niemals, Live-Änderungen an Ihren Dateien vorzunehmen, einschließlich Plugin- und Theme-Dateien.

Verwendung von functions.php in einem Child-Theme

Das Erstellen eines Child-Themes ist (wieder einmal) eher etwas für fortgeschrittene Benutzer. Dies ist eine alternative Lösung zu Ihren Theme-Dateien, Ihrem mit dem Theme gelieferten Stylesheet, aber auch für benutzerdefinierte Funktionen, die Sie möglicherweise verwenden möchten, wie z. B. die in den Entwickler-Tutorials und Snippets von WPForms beschriebenen.

Unsere Freunde bei WPBeginner haben einen ausgezeichneten Artikel darüber zusammengestellt, wie man ein Child-Theme erstellt. Dieses Tutorial enthält sogar ein Video, dem Sie folgen können.

Hinweis: Wir empfehlen niemals, Ihre Theme-Dateien direkt zu bearbeiten. Wenn der Theme-Autor ein Update für das Theme veröffentlichen würde, alle von Ihnen vorgenommenen Bearbeitungen verloren gehen würden. Die Verwendung eines Child-Themes verringert die Wahrscheinlichkeit, Ihr Theme auf dem neuesten Stand zu halten, ohne Anpassungen zu verlieren, die Sie unterwegs vornehmen.

Für dieses Beispiel erstellen wir ein Child-Theme aus dem WordPress-Theme Twenty Twenty. Befolgen Sie dazu bitte die folgenden Schritte.

1. Erstellen Sie einen neuen Ordner auf Ihrem Desktop mit dem Namen twentytwenty-child
2. Erstellen Sie ein Textdokument mit diesen Zeilen:
<?php /* Theme Name: Twenty Twenty Child Theme URI: http://yoursite.com/twenty-twenty-child/ Description: Twenty Twenty Child Theme Author: Your name Author URI: http://yoursite.com Template: twentytwenty Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: twentytwentychild */
3. Speichern Sie diese Datei in Ihrem twentytwenty-child-Ordner und nennen Sie sie style.css.
4. Erstellen Sie in demselben Ordner ein neues Dokument und nennen Sie es functions.php. Das Einzige, was diese Datei enthalten muss, ist der öffnende PHP-Tag: <?php.

5. Komprimieren oder zippen Sie den Ordner twentytwenty-child.
6. Melden Sie sich bei Ihrer WordPress-Administration an und klicken Sie unter Design » Themes auf Neues Theme hinzufügen, um die gerade erstellte Datei twentytwenty-child.zip hochzuladen. Aktivieren Sie dieses Theme auch, wenn Sie dazu aufgefordert werden.
7. Jetzt sehen Sie in Ihrer WordPress-Administration, dass Sie das Twenty Twenty Child-Theme aktiviert haben.

Sie können jetzt benutzerdefiniertes PHP oder JavaScript über ein Child Theme hinzufügen

Nach Abschluss dieser Schritte sehen Sie nun, dass Sie ein funktionierendes Child-Theme von Twenty Twenty haben, eine leere functions.php-Datei, zu der Sie Snippets hinzufügen können, sowie ein leeres Stylesheet, zu dem Sie Ihr eigenes benutzerdefiniertes CSS hinzufügen können.

Ihr Theme funktioniert weiterhin wie zuvor und lädt zuerst alle notwendigen Dateien und Stile. Alle benutzerdefinierten Snippets, die Sie aus der WPForms-Entwicklerdokumentation verwenden, würden jedoch zur Child-Theme-functions.php hinzugefügt und die Formulare basierend auf den von Ihnen hinzugefügten Snippets anpassen.

Und das sind nur einige verschiedene Möglichkeiten, wie Sie Ihrer Website einfach benutzerdefiniertes PHP oder JavaScript hinzufügen können.

Notizen

Wenn Sie benutzerdefinierten Code zu Ihrer Website hinzufügen, ist es wichtig, Ihren Code vor unerwarteten Ereignissen zu schützen. Unabhängig davon, welchen Ansatz Sie wählen, ist es immer eine gute Idee, Ihre Website zu sichern. Auf diese Weise haben Sie bei Bedarf Zugriff auf ältere Versionen von Codedateien.

FAQ

F: Wie hilft mir das beim Hinzufügen von benutzerdefiniertem Code zu WPForms?

A: Dieses Tutorial ist nicht speziell für WPForms-Code-Snippets, sondern für jegliche Code-Snippets. Finden Sie einfach heraus, welche der obigen Optionen für Sie einfacher ist, um beliebige Code-Snippets hinzuzufügen, einschließlich der WPForms-Code-Snippets, die im Abschnitt Tutorials und Snippets erwähnt werden.

So fügen Sie benutzerdefinierten PHP- oder JavaScript-Code für WPForms hinzu

KI-Zusammenfassung