Möchten Sie benutzerdefinierte JavaScript- oder PHP-Snippets zu Ihrer Website hinzufügen? In diesem Tutorial finden Sie mehrere Möglichkeiten, wie Sie diese Snippets zu Ihrer Website hinzufügen können, mit Schritt-für-Schritt-Anweisungen für jede optionale Methode, die Sie wählen, um Ihr Snippet hinzuzufügen. Das Hinzufügen von benutzerdefinierten Code-Snippets zu Ihrer Website mit PHP oder JavaScript kann die Funktionalität Ihrer Website für Ihre spezifischen Bedürfnisse erweitern. Sei es, um die Funktionalität Ihres WordPress-Themes zu erweitern oder um die Funktionalität eines Plugins zu erweitern.
Mit dieser hilfreichen Anleitung können Sie ganz einfach auswählen, wie Sie die Snippets zu Ihrer Website hinzufügen möchten. Sobald Sie sich für eine Implementierungsmethode entschieden haben, können Sie in der Entwicklerdokumentation nachsehen, welche Snippets Sie zu Ihrer Website hinzufügen möchten!
Um einen Blick auf die Vielzahl der verfügbaren Snippets zu werfen, schauen Sie sich bitte unsere Entwicklerdokumentation an.
Sehen Sie sich unser Video-Tutorial an, um zu erfahren, wie Sie Ihrer Website benutzerdefiniertes PHP oder Javascript hinzufügen können.
Optionen für die Umsetzung
Es gibt eine Reihe von Ansätzen für das Hinzufügen von PHP oder Javascript, um Ihre spezifischen Bedürfnisse anzupassen, nicht nur für WPForms, sondern für jeden benutzerdefinierten Code, den Sie hinzufügen möchten.
WPCode-Plugin verwenden (empfohlen)
Mit dem WPCode-Plugin lassen sich Snippets sehr schnell und einfach zu Ihrer Website hinzufügen.
Einer der vielen Gründe, warum wir die Verwendung dieses Plugins für das Hinzufügen von benutzerdefinierten Snippets zu Ihrer Website dringend empfehlen, ist die integrierte Prüfung vor dem Speichern Ihres Snippets. 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, auch 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, wo Sie weitere Informationen und eine spezielle Dokumentation finden.
Sobald das Plugin installiert ist, navigieren Sie zum Menü Code Snippets auf der linken Seite Ihres WordPress-Dashboards und wählen Sie + Snippet hinzufügen.
Als Nächstes klicken Sie einfach auf die Schaltfläche Benutzerdefinierten Code hinzufügen (Neues Snippet) und dann auf die blaue Schaltfläche Snippet verwenden, um ein neues Snippet zu erstellen.
Wenn der Bildschirm für das neue Snippet erscheint, geben Sie dem Snippet einen aussagekräftigen Namen, damit Sie und Ihre Website-Administratoren den Zweck des Snippets verstehen. Wählen Sie in der Dropdown-Liste Code-Typ die Option 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 von bestimmten CSS-Snippets. Damit soll sichergestellt werden, dass das Snippet das Skript nicht lädt, wenn kein WPForms-Formular auf der Seite vorhanden ist. Dies trägt dazu bei, die Notwendigkeit zum Laden von Skripten, die nicht für alle Seiten gelten, zu reduzieren.
Für dieses Tutorial werden wir das folgende Snippet einfügen.
In the Code Preview section, add your snippet just under the <?php. Here is an example to use for the purpose of this documentation.
/**
* 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 dieses spezielle Snippet wählen wir für die Einfügemethode "Automatisch einfügen" und für den Ort "Nur Frontend".
Sobald Sie Ihr Snippet hinzugefügt haben, klicken Sie auf Snippet speichern. Dadurch wird das Snippet gespeichert, aber nicht automatisch aktiviert. Nach dem ersten Speichern werden Sie feststellen, dass der Status des Snippets standardmäßig auf Inaktiv gesetzt ist. Schalten Sie einfach den Schalter von Inaktiv auf Aktiv um und klicken Sie auf Aktualisieren, um das Snippet auf Aktiv zu setzen.
Erstellen eines Site-spezifischen Plugins
Hinweis: Diese Methode wird nur empfohlen, wenn Sie mit der Bearbeitung von PHP-Dateien und dem Hochladen direkt auf Ihren Server oder über Ihr bevorzugtes FTP-Programm vertraut sind.
Wenn Sie ein fortgeschrittener Benutzer sind und alle Ihre benutzerdefinierten Skripte in einer Datei auf Ihrer Website aufbewahren möchten, können Sie ganz einfach Ihr eigenes Plugin zum Speichern dieser Snippets erstellen.
Wenn Sie mehr darüber erfahren möchten, wie Sie ein standortspezifisches Plugin erstellen, lesen Sie bitte diese Anleitung.
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 in Ihrem WordPress-Admin an und klicken Sie unter Plugins auf Neu hinzufügen. Folgen Sie den Anweisungen auf dem Bildschirm, um die soeben erstellte .zip-Datei hochzuladen und zu aktivieren.
- 5. Sobald Sie das Plugin aktiviert haben, können Sie die Datei im Plugins " Editor sehen.
Hinweis: WordPress empfiehlt, niemals Live-Änderungen an Ihren Dateien vorzunehmen, auch nicht an Plugin- und Theme-Dateien.
Verwendung von functions.php innerhalb eines Child-Themes
Hinweis: Diese Methode wird nur empfohlen, wenn Sie mit der Bearbeitung von PHP-Dateien und dem Hochladen direkt auf Ihren Server oder über Ihr bevorzugtes FTP-Programm vertraut sind.
Das Erstellen eines Child-Theme ist (wieder) mehr für fortgeschrittene Benutzer. Dies ist eine alternative Lösung für Ihr Thema Dateien, Ihr Stylesheet mit dem Thema enthalten, sondern auch für alle benutzerdefinierten Funktionen, die Sie verwenden möchten, wie die, die in WPForms Entwickler Tutorials und Snippets beschrieben.
Unsere Freunde von WPBeginner haben einen ausgezeichneten Artikel darüber verfasst , wie man ein Child-Theme erstellt. Dieses Tutorial enthält sogar ein Video, dem Sie folgen können.
Hinweis: Wir empfehlen niemals, Ihre Themadateien direkt zu bearbeiten. Wenn der Autor des Themes ein Update des Themes veröffentlicht, gehen alle Änderungen, die Sie vorgenommen haben, verloren. Die Verwendung eines Child-Themes verringert die Wahrscheinlichkeit, dass Ihr Theme auf dem neuesten Stand bleibt, ohne dass dabei Ihre Anpassungen verloren gehen.
Für dieses Beispiel werden wir ein Child-Theme aus dem WordPress-Theme Twenty Twenty erstellen. Um dies zu tun, folgen Sie bitte den nachstehenden Schritten.
- 1. Erstellen Sie einen neuen Ordner auf Ihrem Desktop mit dem Namen twentytwenty-child
- 2. Erstellen Sie ein Textdokument und diese 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 diesem Ordner ein neues Dokument und nennen Sie es funktionen.php. Das Einzige, was diese Datei sein muss, ist der PHP-Tag open:
<?php.
- 5. Komprimieren oder zippen Sie den Ordner twentytwenty-child.
- 6. Loggen Sie sich in Ihren WordPress-Admin ein und klicken Sie unter Erscheinungsbilder " Themes auf Neu hinzufügen, um die soeben erstellte Datei twentytwenty-child.zip hochzuladen. Wenn Sie dazu aufgefordert werden, aktivieren Sie auch dieses Theme.
- 7. Jetzt sehen Sie in Ihrem WordPress-Admin, dass Sie das Twenty Twenty Child-Theme aktiviert haben.
Wenn diese Schritte abgeschlossen sind, sehen Sie nun, dass Sie ein funktionierendes Child-Theme von Twenty Twenty und eine leere functions.php-Datei haben, in die Sie Snippets einfügen können, sowie ein leeres Stylesheet, in das Sie Ihr eigenes benutzerdefiniertes CSS einfügen können.
Ihr Thema wird immer noch wie zuvor funktionieren und alle notwendigen Dateien und Stile zuerst laden. Allerdings würden alle benutzerdefinierten Snippets, die Sie aus der WPForms-Entwicklerdokumentation verwenden, dem Child-Theme functions.php hinzugefügt werden und die Formulare basierend auf den Snippets, die Sie hinzufügen, anpassen.
Und das sind nur einige der Möglichkeiten, wie Sie Ihrer Website auf einfache Weise benutzerdefiniertes PHP oder JavaScript hinzufügen können.
Anmerkungen
Wenn Sie Ihrer Website benutzerdefinierten Code hinzufügen, ist es wichtig, dass Ihr Code vor unerwarteten Ereignissen geschützt wird. Unabhängig davon, für welchen Ansatz Sie sich entscheiden, sollten Sie immer eine Sicherungskopie Ihrer Website erstellen. Auf diese Weise können Sie bei Bedarf auf ältere Versionen der Codedateien zugreifen.
FAQ
F: Wie hilft mir das beim Hinzufügen von benutzerdefiniertem Code zu WPForms?
A: Dieses Tutorial ist nicht spezifisch für WPForms Code-Snippets, sondern für alle 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.