So fügen Sie benutzerdefinierte Code-Snippets in WordPress ein (die einfachste Methode)

Suchen Sie nach einer einfachen und unkomplizierten Möglichkeit, WordPress-Code-Snippets zu Ihrer Website hinzuzufügen?

Das Erlernen von WordPress dreht sich nicht nur um Themes und Tools. Manchmal ist es die subtile Kraft von Code-Snippets, die einer Website ihren einzigartigen Charakter verleiht.

Diese perfekte Anpassung, nach der Sie suchen? Sie ist mit dem richtigen Code erreichbar, aber das Problem ist, dass selbst der kleinste Fehler Ihre Website beschädigen kann.

In diesem Artikel zeigen wir Ihnen, wie Sie benutzerdefinierte Code-Snippets einfach in WordPress einfügen können, ohne Ihre Website zu beschädigen.

Was sind Code-Snippets in WordPress?

Unter der benutzerfreundlichen Oberfläche von WordPress verbirgt sich eine Welt von Code, die jede seiner Bewegungen antreibt.

Diese winzigen Codefragmente, Code-Snippets genannt, sind kompakte, aber leistungsstarke Werkzeuge, die WordPress spezifische Funktionalitäten anweisen.

Die Nutzung der Kraft dieser Snippets kann den Unterschied zwischen einer generischen WordPress-Website und einer, die genau auf Ihre Anforderungen zugeschnitten ist, ausmachen.

Betrachten Sie sie als das WordPress-Äquivalent von Zaubersprüchen, die, wenn sie richtig angewendet werden, hervorragende Ergebnisse im Frontend erzielen können.

So fügen Sie benutzerdefinierte Code-Snippets in WordPress hinzu

Um benutzerdefinierte Code-Snippets in WordPress hinzuzufügen, können Sie sich auf die Einfachheit und Funktionalität von WPCode verlassen. Befolgen Sie die nachstehenden Schritte, um loszulegen.

1. Installieren und aktivieren Sie das WPCode-Plugin

WPCode ist der beste Weg für WordPress-Benutzer, benutzerdefinierte Code-Snippets zu ihren Websites hinzuzufügen, ohne sich mit der functions.php-Datei herumschlagen zu müssen oder sich Sorgen machen zu müssen, die Website durch den kleinsten Fehler zu beschädigen.

Das Code-Snippet-Plugin erleichtert das Hinzufügen von Snippets zu jedem Teil Ihrer WordPress-Website, einschließlich Footer und Header. Sie können jeden gewünschten benutzerdefinierten Code direkt von Ihrem Dashboard aus einfügen, anstatt die functions.php-Datei direkt zu bearbeiten.

Um loszulegen, müssen Sie das WordPress-Plugin installieren und aktivieren auf Ihrer Website. Dadurch wird das Plugin zum linken Menübereich Ihres WordPress-Dashboards hinzugefügt, von wo aus Sie schnell benutzerdefinierte Codes hinzufügen können.

WPCode verfügt über eine Bibliothek mit über 1.100 Code-Snippets, die Sie mit wenigen Klicks auf Ihrer Website verwenden können – keine Entwicklungskenntnisse erforderlich! Oder Sie folgen den nachstehenden Anweisungen, um Ihren eigenen, benutzerdefinierten Code hinzuzufügen.

Das WPForms-Team hat sogar einige eigene Code-Snippets hinzugefügt! Wir haben den Code hinzugefügt, um unsere am häufigsten angeforderten Formularanpassungen durchzuführen, damit Sie über die Basisfunktionalität von WPForms und die Add-ons hinausgehen können. Werfen Sie einen Blick auf den Bonusteil am Ende dieses Beitrags für einen Vorgeschmack.

2. Erstellen Sie den benutzerdefinierten Code (PHP, CSS, HTML)

Wenn Sie den benutzerdefinierten Code bereits fertig haben, überspringen Sie diesen Schritt und fahren Sie mit dem nächsten fort. Für diejenigen, die den benutzerdefinierten Code von Grund auf neu erstellen, hier ist ein Beispiel.

Für diese Anleitung erstellen wir einen benutzerdefinierten Code, der Theme-Konflikte verhindert, die dazu führen, dass Radio- und Checkbox-Werte in WPForms nicht korrekt angezeigt werden.

Der obige Code verwendet CSS, um das Problem mit dem Theme-Konflikt zu beheben. Wie bereits erwähnt, können Sie jedoch auch Code mit PHP und HTML erstellen.

3. Fügen Sie Ihren benutzerdefinierten Code hinzu (Neues Snippet)

Klicken Sie in der Menüleiste Ihres WordPress-Administrationsbereichs auf die Option Code-Snippets und dann auf die Schaltfläche Neu hinzufügen. Da Sie das Plugin gerade erst installiert haben, wird Ihre Liste leer sein.

Sie werden dann zur Seite Snippet hinzufügen weitergeleitet. Hier können Sie entweder Ihren eigenen eindeutigen Code hinzufügen oder ein Code-Snippet aus der vorgefertigten Bibliothek auswählen.

Klicken Sie auf die Schaltfläche Snippet verwenden neben der Option Eigene benutzerdefinierte Codes hinzufügen (Neues Snippet), um Ihren neuen Code einzufügen.

Nun müssen Sie dem Snippet nur noch einen Namen geben und den erstellten benutzerdefinierten Code einfach in den Bereich Code-Vorschau im WPCode-Plugin kopieren und einfügen.

Da wir den Code in CSS erstellt haben, haben wir unter dem Dropdown-Menü Code-Typ CSS-Snippet ausgewählt. Sie können dies je nach erstelltem Code ändern.

Scrollen Sie als Nächstes zum Tab Einfügung.  Wählen Sie nun Automatisch einfügen und wählen Sie aus dem Dropdown-Menü Position die Option Website-Header.

Abhängig von der Art des Codes, den Sie erstellen, können Sie ihn sogar als [/] Shortcode zu Ihren Seiten/Beiträgen hinzufügen.

Wenn Sie Ihrem Code-Snippet Tags zuweisen möchten, scrollen Sie zum Abschnitt Grundlegende Informationen. Dies hilft Ihnen bei der Kategorisierung Ihrer Codebeispiele nach Thema und Funktion.

Wenn Sie mehrere Snippets am selben Ort anzeigen möchten, können Sie mit dem Parameter Priorität die Reihenfolge festlegen, in der sie verarbeitet werden.

Als Nächstes ermöglicht die ausgefeilte Funktion Intelligente bedingte Logik das Anzeigen oder Ausblenden von automatisch eingefügten Snippets basierend auf einer Reihe von Kriterien.

Schließlich müssen Sie nur noch die Option Aktiv überprüfen und auf die Schaltfläche Snippet speichern klicken, bevor Sie das Plugin verlassen!

4. Fehlerbehandlung bei benutzerdefiniertem Code

Ein Tippfehler in der website-spezifischen Plugin- oder Theme-Datei kann Ihre Website für Besucher sofort unzugänglich machen, wenn Sie Code-Snippets verwenden.

Ein Syntaxfehler oder ein 500er interner Serverfehler würde auf Ihrer Website angezeigt werden. Sie müssen einen FTP-Client verwenden, um Ihre Änderungen manuell rückgängig zu machen.

Das einzigartige Merkmal des WPCode-Plugins ist, dass es automatisch alle Instanzen von Syntaxfehlern im Code erkennt und deaktiviert.

Eine hilfreiche Fehlermeldung wird angezeigt, die Sie zur Fehlerbehebung verwenden können. Während Sie Ihren benutzerdefinierten Code hinzufügen, erkennt die clevere Code-Snippet-Validierung von WPCode alle Fehler.

Wenn Sie mit der Maus über das Problem fahren, erscheint ein Pop-up mit Anweisungen zur Behebung.

5. Verwalten Sie Ihre benutzerdefinierten Code-Snippets

Wenn Sie mehrere Code-Snippets haben, macht WPCode die Verwaltung mit einer benutzerfreundlichen Oberfläche und der Snippet-Bibliothek unglaublich einfach.

Code-Snippets können gespeichert werden, ohne auf Ihrer Website aktiviert zu werden, und Sie können das Snippet später jederzeit aktivieren oder deaktivieren.

Zusätzlich können Sie Tags verwenden, um Ihre Code-Snippets zu kategorisieren und sie nach Art und Speicherort zu filtern.

Sie haben auch die Möglichkeit, einzelne Code-Snippets zu exportieren oder alle auf einmal im Stapel zu exportieren. Navigieren Sie einfach zu Code-Snippets » Tools und wählen Sie die Option Exportieren.

Das Plugin ermöglicht es Ihnen auch, Snippets zu importieren, wenn Sie Ihre Website auf einen neuen Server verschieben. Gehen Sie zu Code-Snippets » Tools » Importieren und laden Sie die Exportdatei hoch.

Bonus: Fügen Sie benutzerdefinierte Code-Snippets zu Ihren Formularen hinzu

Wenn Sie WPForms auf Ihrer Website verwenden, können Sie Code-Snippets hinzufügen, um Ihre Formulare direkt aus dem WPForms-Plugin-Dashboard anzupassen.

Wenn Sie sowohl das WPForms- als auch das WPCode-Plugin installiert haben, können Sie von der Sektion Tools in den WPForms-Plugin-Einstellungen aus auf eine Bibliothek von vorgefertigten WPForms-Code-Snippets zugreifen.

Mit nur einem Klick können Sie erweiterte Funktionen hinzufügen oder die Anzeige Ihres Formulars anpassen. Es ist, als hätten Sie Ihren eigenen Webentwickler, der Ihnen hilft, eine maßgeschneiderte Website zu erstellen!

Einige Beispiele für Code-Snippets, die in WPForms verfügbar sind, sind:

• Wählen Sie einen Datumsbereich im Datumsfeldauswahlfeld aus
• Blockieren Sie bestimmte IP-Adressen daran, Ihr Formular auszufüllen
• Passen Sie Unterbeschriftungen an
• Anzahl der übermittelten Einträge anzeigen

Wir fügen dem Verzeichnis ständig neue Code-Snippets hinzu. Zögern Sie also nicht, uns bei Anpassungswünschen zu kontaktieren!

FAQs zu benutzerdefinierten Code-Snippets

Das Hinzufügen benutzerdefinierter Code-Snippets ist ein beliebtes Thema für unsere Leser. Hier sind einige schnelle Antworten auf einige der am häufigsten gestellten Fragen:

Was ist der beste Code-Snippet-Manager für WordPress?

WPCode ist eine Top-Wahl für die Verwaltung und Ausführung von Code-Snippets in WordPress und bietet eine einfachere Organisation und nahtlose Integrationsmöglichkeiten.

Wie füge ich CSS zu einem Code-Snippet in WordPress hinzu?

Navigieren Sie innerhalb von WPCode einfach zum Abschnitt + Neu hinzufügen, geben Sie Ihr gewünschtes CSS ein und stellen Sie sicher, dass Sie den CSS-Typ auswählen, bevor Sie speichern und aktivieren.

Wie füge ich benutzerdefinierten Code zu WordPress ohne Plugins hinzu?

Sie können benutzerdefinierten Code direkt in die functions.php-Datei Ihres Themes einfügen. Ein dediziertes Tool wie WPCode gewährleistet jedoch eine sicherere und besser organisierte Snippet-Verwaltung.

Wie füge ich benutzerdefinierten PHP-Code zu WordPress hinzu?

Für PHP gehen Sie zur WPCode-Oberfläche, wählen Sie + Neu hinzufügen, fügen Sie Ihren PHP-Code ein und speichern Sie ihn dann. Stellen Sie immer sicher, dass er zuerst auf einer Staging-Child-Theme-Website getestet wird.

Erfahren Sie als Nächstes, wie Sie eine E-Mail-Adresse für den Download von Dateien verlangen

Wäre es nicht großartig, wenn WordPress-Benutzer Ihnen ihre E-Mail-Adressen geben müssten, bevor sie eine Datei herunterladen können? Finden Sie heraus, wie Sie Besucher Ihrer WordPress-Website dazu bringen, ihre E-Mail-Adressen preiszugeben, um eine Datei herunterzuladen.

Erstellen Sie jetzt Ihr WordPress-Formular

Bereit, Ihr Formular zu erstellen? Beginnen Sie noch heute mit dem einfachsten WordPress-Formular-Builder-Plugin. WPForms Pro enthält viele kostenlose Vorlagen und bietet eine 14-tägige Geld-zurück-Garantie.

Wenn Ihnen dieser Artikel geholfen hat, folgen Sie uns bitte auf Facebook und Twitter für weitere kostenlose WordPress-Tutorials und Anleitungen.