Wenn du eine WordPress Website betreibst, kommt sicherlich irgendwann der Zeitpunkt, an dem du dich mit Code Snippets befasst. Da die Wartung von Code Snippets bei falscher Einbindung unnötig Arbeit bereiten kann, gibt es Code Snippet Plugins. Es gibt aber auch andere Wege, Code Snippets in deine Website einzubinden. In diesem Artikel vergleichen wir die besten Möglichkeiten zum Hinzufügen von Code Snippets zu deiner WordPress Website. 

Zuerst soll die Frage beantwortet werden: Was ist denn eigentlich ein Code Snippet? Ein Code Snippet ist ein kleines Stück Code, das die Funktionalität deiner Website erweitert. Daher auch der Name – übersetzt “Codeschnipsel”. Das soll andeuten, dass es sich nur um wenige Zeilen Code handelt. Sinnvolle Beispiele dafür sind die Möglichkeit, Responsive Videos einzubinden und das Erlauben zusätzlicher Dateiformate für die Mediathek. Das Interessante dabei ist, dass diese Code Snippets ein ganzes Plugin ersetzen können. Dies kann die Codemenge (und damit auch die Dateigrößen), die Performance und auch die Fehleranfälligkeit deiner Website enorm verbessern.

Es gibt noch weitere Fälle, in denen du Code Snippets zu deiner WordPress Website hinzufügen musst. Wenn du nachverfolgen möchtest, wer deine Website besucht, kannst du einen Tracking Code in den Header oder Footer einfügen. Wenn du eine gebrauchsfertige Lösung für die Zustimmung zu Cookies auf deiner Website verwenden möchtest, fügst du normalerweise einen JavaScript Code in den Header oder Footer ein. 

Warum überhaupt Code Snippet Plugins? 

Bei vielen WordPress Websites wurde der Code angepasst, aber manchmal auf eine Weise, die nicht nachhaltig ist. Code Snippets sollten nicht direkt im „Parent“ beziehungsweise dem Main WordPress Theme eingebunden werden. Denn sie werden überschrieben und gelöscht, sobald du das Theme aktualisierst.

Das Gleiche gilt für Plugins. Wenn du den Code eines Plugins direkt änderst, werden deine Änderungen bei einem Update wahrscheinlich gelöscht. Die einzige Möglichkeit, deine Änderungen zu erhalten ist, wenn du sie gespeichert oder an anderer Stelle ein Backup gemacht hast. Manche Plugin Updates fügen nur neue Funktionen hinzu, aber andere enthalten auch Sicherheitsverbesserungen. Diese müssen korrekt angewendet werden, um deine Website weniger anfällig für Angriffe machen. Deshalb wird das falsche Anwenden von Code Snippets eventuell sogar zum Sicherheitsrisiko, weil man dann auf die Idee kommen kann, das Update wegen des Code Snippets bleibenzulassen.

Ich werde dir nun drei Möglichkeiten vorstellen, wie du Code einfügen kannst, der in einer functions.php Datei verwendet werden soll. Eine davon sind Code Snippet Plugins. Das deckt nicht jede Situation ab, in der du ein Plugin oder ein Theme anpassen möchtest, da es von der Existenz geeigneter Hooks für die notwendigen Änderungen abhängt. Hooks sind Stellen im Code für die Interaktion mit dem WordPress Core, also eine Art “Aufhänger”, an denen Plugins und Themes sich “einhaken” können. Wenn es also für eine bestimmte gewünschte Funktion keinen Hook gibt, sind Code Snippets (in der functions.php) der sinnvollste Weg.

Erstelle ein WordPress Plugin

Diese Methode erfordert einige Arbeiten an der Datei und an der Website selbst, daher solltest du vorsichtig sein und am besten ein Backup machen, bevor du Änderungen vornimmst. Zu einem Plugin gehört mindestens ein Ordner für die PHP Datei. Versuche, dir einen eindeutigen Namen für deinen Ordner und deine Dateien auszudenken (du kannst ein Präfix hinzufügen, das auf deinem Namen oder dem Namen deines Unternehmens basiert, oder etwas Ähnliches (beispielsweise “Raidboxes.io Disk Usage Sunburst”).

In dieser Datei benötigst du noch eine weitere Sache – einen Header mit den Plugin Informationen. Auch hier benötigst du eine Deklaration deines Plugin Namens, etwa so wie im Folgenden: 

<?php

/**
* Plugin Name: your plugin name
*/

Gut gemacht! Jetzt hast du dein erstes eigenes Plugin erstellt. Nach dem Header fügst du nun einfach deine Code Snippets hinzu (die, die du in die functions.php einfügen willst) und lädst den Ordner in deinen /wp-content/plugins/ Ordner auf dem Server hoch. Und schon sollte dein Plugin unter Plugins im Adminbereich erscheinen. 

Ich bevorzuge den Ansatz, ein benutzerdefiniertes Plugin zu erstellen, weil es großartig ist, um Code in die functions.php einzufügen. Außerdem ist es einfach einzurichten. 

Verwende ein WordPress Plugin

Für diejenigen unter euch, die sich nicht an eigene Plugins herantrauen, ist eines der Code Snippet Plugins eine großartige Möglichkeit zur Verwaltung deiner Code Snippets, beziehungsweise generell um benutzerdefinierten Code zu WordPress Websites hinzuzufügen. Du bist es vermutlich bereits gewohnt, fremde Plugins zu installieren, deshalb ist das eventuell einfacher als die erste Möglichkeit.

Du installierst einfach das gewünschte Plugin und navigierst zu dem neuen Menüpunkt, der im Verwaltungsbereich erscheint. Beachte, dass die verschiedenen Plugins unterschiedlich aufgebaut sein können. Aber die meisten davon sind schlicht und einfach gehalten und leicht zu verstehen. Du solltest jedes hinzugefügte Code Snippet umbenennen. Das ist sehr nützlich, um ein bestimmtes Code Snippet leichter zu finden. Diese Vorgehensweise ist absolut zu empfehlen und kann dir bei vielen Code Snippets einigen Ärger ersparen.

Entscheidende Faktoren für die Auswahl eines guten Plugins, mit dem du Code Snippets auf deiner Website ausführen kannst, sind unter anderem der Einfluss auf die Performance deiner Website und die Benutzerfreundlichkeit. Ich stelle dir nun einige WordPress Code Snippet Plugins vor.

Die besten Code Snippet Plugins für WordPress

Code Snippets

Diese Erweiterung wurde von Code Snippets Pro entwickelt und ist mein persönlicher Favorit. Die Idee der Erweiterung ist, dass du kleine PHP Code Snippets hinzufügen kannst. Es bietet eine einfache Lösung, um deine eigenen HTML-, JavaScript- oder PHP Code Snippets hinzuzufügen. Die Verwendung des Plugins ähnelt den anderen Admin Menüs von WordPress und ist sehr einfach zu bedienen. Mit dem Plugin kannst du mithilfe einer grafischen Oberfläche Code Snippets in dein Theme einfügen. Beachte, dass diese Erweiterung nicht für das Hinzufügen von Tracking Codes oder Ähnlichem geeignet ist. Diese Erweiterung eignet sich am besten, um der Datei „functions.php“ deines Themes mehr Funktionen hinzuzufügen.

Merkmale:

• Du kannst PHP Code in Widgets, Seiten und Beiträgen verwenden.
• Füge PHP ein, um Kontaktformulare zu erstellen und jede Art von Input oder Upload zu verarbeiten.
• Füge PHP hinzu, um nutzeroptimierte Inhalte zu erstellen.
• Mit PHP kannst du jeden Aspekt deiner WordPress Installation anpassen.

Insert PHP Code Snippets

Dieses Plugin wurde von xyzscripts.com entwickelt und ist eine beliebte Erweiterung, die regelmäßig aktualisiert wird. Mit diesem Plugin kannst du PHP Code verwenden, der ganz einfach in den normalen Editor von WordPress eingefügt werden kann, da es für jeden hinzugefügten Code Snippet Shortcodes erstellt. Das Einfügen funktioniert auch mit einem Shortcode in der Seitenleiste des Text Widgets der Seite. 

Merkmale: 

• Im TinyMCE Editor hast du ein intelligentes Dropdown Menü
• Konvertiere PHP Snippets in Shortcodes für eine einfache Implementierung
• Einfache und flexible Funktionalität

Custom CSS Pro 

Mit dem Custom CSS Pro WordPress Plugin kannst du ganz einfach benutzerdefinierten CSS Code zu deiner WordPress Website hinzufügen. Dieses kostenlose WordPress Plugin bietet einige praktische Funktionen, darunter eine Echtzeit Vorschau und Zeilennummerierung, um die Bearbeitung des Codes etwas einfacher zu gestalten. 

Merkmale:

• Optisch wie die Umgebung in Visual Studio Code oder Sublime Text
• Es ist einfach, benutzerdefinierten CSS Code zu WordPress hinzuzufügen
• Live Vorschau in Echtzeit

Insert Headers and Footers

Diese Art von Plugin macht es einfach, Code in die Kopf- oder Fußzeile einzufügen. Die Erweiterung wurde von WPbeginner entwickelt, welche auch das berühmte Formularplugin WPforms entwickelt haben. Mit dem Plugin kannst du ganz einfach Code Snippets für die Integration von Diensten wie Google Analytics und Facebook Pixel einfügen. 

Merkmale: 

• Schnelles Einrichten
• Ganz einfach Kopfzeilen, Skripte und weiteren Code einfügen
• Es erlaubt dir, jeden Code oder jedes Skript zusammen mit HTML und JavaScript hinzuzufügen
• Ist die einfachste Option zum Einfügen von Tracking Codes

In Elementor integrierte Tools (Pro Version)

Wenn du den Page Builder Elementor als Pro Version verwendest, musst du kein weiteres Plugin installieren. Denn Elementor hat ein eingebautes Tool zum Einfügen von Tracking Codes und ähnlichem. Elementor unterstützt auch die Umbenennung aller Skripte, die du zu deiner WordPress Website hinzufügst. Um den Elementor Custom Code zu finden, gehe folgendermaßen vor. Gehe zu Dashboard > Elementor Custom Code. Dort fügst du das Skript ein, das du auf deiner Seite platzieren möchtest. Beachte, dass du eine aktive Elementor Pro Lizenz haben musst, um die in Elementor integrierten Custom Code Tools nutzen zu können.

Merkmale: 

• Einfache und logische Struktur
• Integriert in deinen Page Builder

Verwende ein Child Theme

Diese Methode wird für das Hinzufügen von Code Snippets am wenigsten empfohlen, aber sie funktioniert trotzdem gut. Sie ist etwas komplizierter als die Erstellung eines Plugins. Ein Child Theme sollte Code und Styling enthalten, die für das Layout und den Look deiner Website gelten. Aber ein Snippet wird normalerweise verwendet, um die Funktionalität zu ändern und fällt somit eigentlich nicht in die “Verantwortung” eines Child Theme. 

Um ein Child Theme zu erstellen, erstellst du einen Ordner mit dem gleichen Namen wie dein Parent Theme und mit dem Suffix „-child“ (wenn der Ordner des Parent Theme “raidboxes.io-theme” heißt, wäre der Ordner des Child Theme “raidboxes.io-theme-child”). 

In diesem Ordner brauchst du mindestens zwei Dateien: Die Stylesheet Datei namens style.css und die PHP Datei namens child.php.

Die Datei style.css muss eine Kopfzeile mit den folgenden Mindestangaben enthalten:

/* 
Theme Name: Raidboxes.io Theme Child
Template: Raidboxes Theme
Version: 1.0.0
*/

Dann fügst du deine Code Snippet am Ende der Datei functions.php ein und lädst den Ordner des Child Themes auf den Server unter /wp-content/themes/ hoch.

Wenn alles in Ordnung ist, kannst du das Menü Design → Themes in deinem Adminbereich öffnen und das neue Child Theme aktivieren. Wenn du mehr darüber erfahren möchtest, erklären wir dir im Magazin wie du ein Child Theme erstellst.

Fazit 

Dieser Artikel lieferte dir einige grundlegende Informationen über deine Möglichkeiten, Code Snippets in WordPress einzubinden. Die Entscheidung zwischen der Erstellung eines eigenen WordPress Plugins beziehungsweise Child Themes oder dem Verwenden eines Code Snippet Plugin liegt bei dir – und hängt lediglich von deinen Vorlieben ab, da die drei Methoden funktional das Gleiche erfüllen. Am besten verwendest du, was dir am besten liegt