So fügen Sie benutzerdefinierte Codefragmente in WordPress hinzu (einfachste Methode)

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

Beim Erlernen von WordPress geht es nicht nur um Themen und Tools. Manchmal ist es die subtile Kraft von Codeschnipseln, die einer Website ihr einzigartiges Flair verleiht.

Die perfekte Individualisierung, die Sie suchen? Mit dem richtigen Code ist das möglich, aber das Problem ist, dass selbst der kleinste Fehler Ihre Website beschädigen kann.

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

Was sind Codefragmente in WordPress?

Unter der benutzerfreundlichen Oberfläche von WordPress verbirgt sich eine Welt voller Codes, die jeden Schritt steuern.

Diese winzigen Codefragmente, sogenannte Code-Snippets, sind kompakte, aber leistungsstarke Tools, die WordPress in bestimmte Funktionen einweisen.

Die Nutzung der Leistungsfähigkeit 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 gewirkt werden, hervorragende Ergebnisse im Frontend erzielen können.

So fügen Sie benutzerdefinierte Codefragmente 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 zu beginnen.

1. Installieren und aktivieren Sie das WPCode-Plugin

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

Mit dem Code-Snippet-Plugin können Sie ganz einfach Snippets zu jedem Teil Ihrer WordPress-Site hinzufügen, einschließlich der Fuß- und Kopfzeile. Sie können jeden gewünschten benutzerdefinierten Code direkt von Ihrem Dashboard aus einfügen, anstatt die Datei functions.php direkt zu bearbeiten.

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

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

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

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

.wpforms-container input[type=radio] {
	-webkit-appearance: radio !important;
	-moz-appearance: radio !important;
	appearance: radio !important;
}

.wpforms-container input[type=checkbox] {
	-webkit-appearance: checkbox !important;
	-moz-appearance: checkbox !important;
	appearance: checkbox !important;
}

.wpforms-container input[type=radio]:checked:before,
.wpforms-container input[type=radio]:before,
.wpforms-container input[type=checkbox]:checked:before,
.wpforms-container input[type=checkbox]:before,
.wpforms-container input[type=radio]:checked:after,
.wpforms-container input[type=radio]:after,
.wpforms-container input[type=checkbox]:checked:after,
.wpforms-container input[type=checkbox]:after {
	display: none !important;
}

Der obige Code verwendet CSS, um das Theme-Konfliktproblem zu beheben, aber wie bereits erwähnt, können Sie einen Code auch mit PHP und HTML erstellen.

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

Klicken Sie in Ihrer WordPress-Admin-Menüleiste auf die Option „Code-Snippets“ und dann auf die Schaltfläche „Neu hinzufügen“ . Da Sie das Plugin gerade erst installiert haben, ist Ihre Liste leer.

Sie werden dann zur Seite „Snippet hinzufügen“ weitergeleitet. Hier können Sie entweder Ihren eigenen einzigartigen Code hinzufügen oder einen Codeausschnitt aus der vorgefertigten Bibliothek auswählen.

Klicken Sie auf die Schaltfläche „Snippet verwenden“ neben der Option „Benutzerdefinierten Code hinzufügen (neues Snippet)“ , um Ihren neuen Code einzufügen.

Jetzt müssen Sie dem Snippet nur noch einen Namen geben und einfach den von Ihnen erstellten benutzerdefinierten Code kopieren und in den Bereich „Codevorschau“ im WPCode-Plugin einfügen.

Da wir den Code in CSS erstellt haben, haben wir im Dropdown-Menü „Codetyp“ die Option „CSS-Snippet“ ausgewählt. Sie können es basierend auf dem von Ihnen erstellten Code ändern.

Scrollen Sie als Nächstes nach unten zur Registerkarte „Einfügung“ . Wählen Sie nun „Automatisch einfügen“ und aus der Dropdown-Liste „ Standort “ die Option „Site-weiter 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 nach unten zum Abschnitt „Grundlegende Informationen“ . Dies hilft Ihnen bei der Kategorisierung Ihrer Codebeispiele nach Thema und Funktion.

Wenn Sie mehrere Snippets an derselben Stelle anzeigen möchten, können Sie mit dem Parameter „Priorität“ die Reihenfolge auswählen, in der sie verarbeitet werden.

Anschließend ermöglicht Ihnen die hochentwickelte Smart Conditional Logic- Funktion, automatisch eingefügte Snippets basierend auf einer Reihe von Kriterien anzuzeigen oder zu verbergen.

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

4. Umgang mit Fehlern in benutzerdefiniertem Code

Ein Tippfehler im Site-spezifischen Plugin oder in der Theme-Datei kann dazu führen, dass Ihre Site für Besucher sofort nicht mehr verfügbar ist, wenn Sie Code-Snippets verwenden.

Auf Ihrer Website würde ein Syntaxfehler oder ein interner Serverfehler vom Typ 500 auftreten. Sie müssen einen FTP-Client verwenden, um Ihre Änderungen manuell rückgängig zu machen.

Die einzigartige Funktion des WPCode-Plugins besteht darin, dass es alle Fälle von Syntaxfehlern im Code automatisch erkennt und deaktiviert.

Es wird eine hilfreiche Fehlermeldung angezeigt, die Sie bei der Fehlerbehebung verwenden können. Wenn Sie Ihren benutzerdefinierten Code hinzufügen, findet die clevere Code-Snippet-Validierung von WPCode alle Fehler.

Wenn Sie mit der Maus über das Problem fahren, wird ein Popup mit Anweisungen zur Behebung des Problems angezeigt.

5. Verwalten Ihrer benutzerdefinierten Code-Snippets

Wenn Sie über mehrere Code-Snippets verfügen, erleichtert WPCode deren Verwaltung mit einer benutzerfreundlichen Oberfläche und der Snippets-Bibliothek unglaublich einfach.

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

Darüber hinaus können Sie Tags verwenden, um Ihre Codeschnipsel zu kategorisieren und sie nach Art und Standort zu filtern.

Sie haben auch die Möglichkeit, bestimmte Codeausschnitte oder alle in großen Mengen zu exportieren. Navigieren Sie einfach zu Code-Snippets » Extras und wählen Sie die Option Exportieren .

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

FAQs zu benutzerdefinierten Code-Snippets

Das Hinzufügen benutzerdefinierter Code-Snippets ist bei unseren Lesern ein beliebtes Thema zum Thema Benutzerfreundlichkeit. Hier finden Sie einige schnelle Antworten auf einige der am häufigsten gestellten Fragen:

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

WPCode ist die erste Wahl zum Verwalten und Ausführen von Code-Snippets in WordPress und bietet eine optimierte Organisation und nahtlose Integrationsfunktionen.

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

Navigieren Sie in WPCode einfach zum Abschnitt + Neu hinzufügen , geben Sie das gewünschte CSS ein und stellen Sie sicher, dass Sie den CSS-Typ auswählen, bevor Sie es speichern und aktivieren.

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

Sie können benutzerdefinierten Code direkt in die Datei functions.php Ihres Themes einfügen. Ein spezielles Tool wie WPCode sorgt jedoch für eine sicherere und besser organisierte Snippet-Verwaltung.

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

Gehen Sie für PHP zur Benutzeroberfläche von WPCode, wählen Sie + Neu hinzufügen , fügen Sie Ihren PHP-Code ein und speichern Sie ihn. Stellen Sie immer sicher, dass es zuerst auf einer untergeordneten Staging-Theme-Site getestet wird.

Als Nächstes erfahren Sie, wie Sie für Dateidownloads eine E-Mail-Adresse anfordern

Wäre es nicht großartig, wenn WordPress-Benutzer Ihnen ihre E-Mail-Adressen geben müssten, bevor sie eine Datei herunterladen könnten? Erfahren Sie, wie Sie Besucher Ihrer WordPress-Site dazu bringen, ihre E-Mail-Adressen mitzuteilen, damit sie eine Datei herunterladen können.

Erstellen Sie jetzt Ihr WordPress-Formular

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

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