Code in WordPress einbinden – die besten Methoden

Ob Beiträge anlegen, Farben und Schriftarten ändern, oder Plugins hinzufügen – wenn Sie sich beim Bau Ihrer Homepage für WordPress entschieden haben, können Sie heute fast alle Aufgaben mit ein paar Klicks auf Schaltflächen erledigen. Warum nur fast alle Aufgaben? Weil einige Anwendungen immer noch das Einfügen von Code-Schnipseln erfordern. Einen typischen Anwendungsfall stellt das Einbinden eines Tracking-Codes dar.

Nicht selten heißt es dabei in der Anleitung:

„Fügen Sie den Code vor dem schließenden </head>-Tag ein.“

Das direkte Einfügen von Code ist allerdings nicht ganz ungefährlich. Damit Ihre WordPress-Installation und Ihr Gemütszustand stabil bleiben, sollten Sie sich vor dem Einfügen mit den Coding-Basics vertraut machen:

Es stehen unterschiedliche Methoden zur Verfügung, um Code in WordPress zu platzieren.
Nicht jede Methode eignet sich für jeden Anwendungsfall.
Es gibt riskante, aber zum Glück auch entspannte Methoden.

Einsatzgebiete für Code-Schnipsel

Typische Einsatzgebiete für Code-Schnipsel sind:

Einbinden des Tracking-Codes für Google Analytics
Einbinden einer navigierbaren Karte von Google Maps
Einbinden des Tracking-Codes für Facebook, das sogenannte Facebook-Pixel
Einbinden von Shortcodes für Plugins
Platzierung von speziellen YouTube-Codes, zum Beispiel für das direkte Abonnement Ihres YouTube-Kanals
Anpassungen von Themes
Anpassungen von Plugins

Safety first! Jetzt ist ein guter Zeitpunkt für ein Backup

Bevor es los geht, noch ein kleiner Hinweis zum Thema Sicherheit: Es ist immer eine gute Idee, vor größeren Änderungen noch einmal eine Sicherheitskopie von WordPress anzulegen.

Der Code-Block von WordPress

Seit der Einführung des Block-Editors Gutenberg im Jahr 2018 stellt WordPress für zahlreiche Anwendungen einen eigenen Block zur Verfügung. Einer dieser Blöcke nennt sich Code-Block. Gedacht ist er allerdings nur zur übersichtlichen Darstellung von Code.

Verwendet wird der Code-Block in der Regel zum Erklären von Code-Beispielen für HTML, CSS, oder JavaScript. Mit diesem Block kommen Sie also nicht ans Ziel, wenn Ihr Code auch von den Browsern Ihrer Besucherinnen und Besucher gelesen und ausgeführt werden soll.

Verwenden Sie diesen Block also nur für den Fall, dass Sie Code zur Ansicht präsentieren möchten. So fügen Sie den Code-Block in einen Beitrag ein:

Klicken Sie auf den Block-Inserter, also das +-Zeichen.
Geben Sie „Code“ in die Block-Suche ein.
Wählen Sie den Code-Block aus.

Wenn Sie „Code“ in die Block-Suche eingegeben haben, werden Ihnen noch zwei weitere Blöcke zur Auswahl angezeigt, nämlich Individuelles HTML und Shortcode.

Der Block Individuelles HTML

Der Block Individuelles HTML ist konzipiert, um eigenen HTML-Code direkt in Beiträge oder Seiten einzufügen. Er ist für Funktionen gedacht, die nicht durch die existierenden Gutenberg-Blöcke abgedeckt sind. Code, den Sie hier platzieren, wird auch ausgeführt.

Diesen Block können Sie zum Beispiel verwenden, um einen iFrame einzubinden. Ein iFrame ist ein HTML-Element, mit dessen Hilfe Sie Fremdinhalte auf Ihre Homepage einbinden können, zum Beispiel eine navigierbare Landkarte von Google Maps.

Der Shortcode-Block

Ein Shortcode ist in WordPress ein Platzhalter für einen anderen Code, der zumeist an zentraler Stelle in WordPress hinterlegt ist. Verwendet werden Shortcodes typischerweise von Galerie- und Kontaktformular-Plugins. Ein Beispiel:

Ein Kontaktformular-Plugin gibt den Shortcode [kontaktformular-1] aus.
Mit dem Shortcode-Block und dem Eintrag [kontaktformular-1] können Sie das Formular nun an beliebiger Stelle in Ihren Beiträgen und Seiten einfügen.

In der Praxis wird der Shortcode-Block allerdings immer seltener verwendet. Heute liefern die meisten Plugin-Hersteller ihre Plugins nämlich bereits mit speziell auf das jeweilige Plugin zugeschnittenen Gutenberg-Blöcken aus. Der Shortcode-Block wird eher von veralteten Plugins benötigt. Veraltete Plugins sollten aber aus Sicherheitsgründen generell nicht mehr in WordPress eingesetzt werden.

Code direkt eingeben

Bis jetzt haben Sie gelernt, wie Sie Code mit Hilfe von Gutenberg-Blöcken in WordPress hinzufügen – auf Beiträgen und Seiten. Das Risiko war dabei relativ überschaubar, denn ein Block lässt sich im Problemfall auch schnell wieder löschen.

Ein ganz anderes Gefahrenpotential besteht beim direkten Einfügen von Code in zentrale Dateien Ihrer WordPress-Installation. in Themes oder Plugins. Sie haben sich doch vorhin nicht etwa um ein Backup gedrückt? Spätestens jetzt sollten Sie eine Sicherung durchführen. Oder eine WordPress-Instanz verwenden, die Sie nur zum Experimentieren aufgesetzt haben.

Der Theme-Datei-Editor

WordPress ist ein Open-Source-System, also ein System mit offenem Quellcode. Sie können den Quellcode aber nicht nur ansehen, sondern auch nach Ihren Wünschen und Vorstellungen ändern. Diese Offenheit gilt für alle Bauteile von WordPress:

WordPress selbst – den WordPress-Core
WordPress Plugins – die Funktionserweiterungen
WordPress Themes – die grafischen Oberflächen

Am häufigsten ändern WordPress-Admins ihre Theme-Dateien. Das passende Werkzeug hat WordPress schon an Bord, nämlich den Theme-Datei-Editor. Um dieses Tool zu öffnen, klicken Sie in der schwarzen Menüleiste links auf Werkzeuge und dann im Untermenü auf Theme-Datei-Editor. Beim ersten Öffnen blendet WordPress folgende Warnmeldung ein:

„Achtung!

Du scheinst im WordPress-Dashboard direkte Änderungen an deinem Theme vorzunehmen. Das wird nicht empfohlen! Direkte Änderungen an deinem Theme können zu Fehlern auf deiner Website führen, außerdem können deine Änderungen bei zukünftigen Updates verloren gehen.“

In diesem Editor können Sie alle Dateien eines Themes direkt bearbeiten. Mit dieser Methode werden in der Regel folgende Theme-Dateien geändert:

Die Datei header.php
Die Datei footer.php
Die Datei functions.php

Die Frage ist allerdings, ob Sie überhaupt direkt in den Code eingreifen möchten. Sie müssen bei dieser Methode nämlich mit drei Nachteilen leben:

Überschreiben bei Updates: Beim nächsten Update des Themes werden Ihre Änderungen wieder überschrieben.
Fehlender Überblick: Unmittelbar nach dem Bearbeiten wissen Sie zwar noch, was Sie geändert haben, aber nach ein paar Monaten oder einem Jahr sieht die Sache wieder anders aus. Möglicherweise haben Sie dann vergessen, welche Datei und welche Stellen betroffen waren.
Risiko bei fehlerhaftem Code: Der Theme-Datei-Editor verzeiht Ihnen nichts. Schon ein fehlendes oder falsch gesetztes Semikolon genügt, um Ihr Theme komplett zu zerstören.

Ähnliche Risiken haben Sie, wenn Sie Plugins direkt im Code bearbeiten. Um das entsprechende Tool zu öffnen, klicken Sie in der schwarzen Menüleiste links auf Werkzeuge und dann im Untermenü auf Plugin-Datei-Editor.

Code-Snippets über Plugins eingeben

Sie arbeiten gerne entspannt? Dann sollten Sie Code-Anpassungen besser über ein Plugin vornehmen. Ein bewährtes Plugin nennt sich WPCode. Die kostenlose Version können Sie direkt über das Backend von WordPress installieren. Nach der Installation und Aktivierung des Plugins klicken Sie dann auf Snippet hinzufügen und anschließend auf Individuelles Snippet hinzufügen.

Im nächsten Fenster können Sie dann den Code einfügen, den Sie erhalten haben. Beispiel für einen Tracking-Code von Google Analytics:

<!– Google Analytics –>
<script async src=“https://www.googletagmanager.com/gtag/js?id=DEINE_TRACKING_ID“></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag(‚js‘, new Date());
gtag(‚config‘, ‚DEINE_TRACKING_ID‘);
</script>

So sieht der Beispielcode dann im Eingabefenster von WPCode aus:

Unterhalb des Eingabefensters finden Sie bei Standort schon Website-weit im Header voreingestellt. Diese Option ist die richtige für Code, der bei jedem Aufruf einer Seite ausgespielt werden soll.

Das Eingeben von Code über ein Plugin wie WPCode oder das mit ähnlichen Funktionen ausgestattete Code Snippets hat folgende Vorteile:

Der Code wird beim Update nicht überschrieben.
Das Plugin legt für Sie eine Code-Schnipsel-Bibliothek an. Sie behalten den Überblick über Ihre Änderungen.
Sie können jeden Code-Schnipsel mit einem einfachen Klick aktivieren und auch wieder deaktivieren.

Ein YouTube-Video einbetten

Für das Einbetten von YouTube-Videos benötigen Sie kein Code-Schnipsel-Plugin, denn dafür hält WordPress schon einen Block bereit. Die Einbettung funktioniert in sechs einfachen Schritten:

YouTube öffnen und die YouTube-URL des gewünschten Clips kopieren.
WordPress öffnen und in den Bearbeitungsmodus für die betreffende Seite oder den betreffenden Blog-Beitrag gehen.
An der gewünschten Stelle mit einem Klick auf das Plus-Zeichen den Block-Inserter öffnen.
„YouTube“ in die Block-Suche eingeben.
Den Block YouTube-Einbettung-URL auswählen und einfügen.
Die YouTube-URL in das Eingabefeld des Blocks einfügen.

Der Kanalabo-Code für YouTube

Zum Abschluss dieses Tutorials gibt es noch ein kleines Special für alle, die einen Kanal auf YouTube betreiben oder einem Kanal etwa Gutes tun möchten. Entscheidend für den Erfolg eines Kanals ist ja bekanntlich die wachsende Zahl von Abonnentinnen und Abonnenten. Mit einem speziellen Code auf Ihrer WordPress-Seite können Sie bei der Abo-Generierung den Turbo einschalten.

Der eben erwähnte YouTube-Block verlinkt allerdings nicht direkt auf einen YouTube-Kanal, sondern nur direkt auf Videos. Sie können Ihn also nicht zur Platzierung eines Kanalabo-Codes verwenden. Dazu benötigen Sie weder einen Block noch ein Plugin. Alles, was Sie brauchen, sind:

Die Kanal-URL des YouTube-Channels
Ein kleines Code-Anhängsel

Kanal-URL kopieren

Erster Schritt: Die Kanal-URL aus YouTube kopieren und in WordPress als ganz normalen

Link einfügen.

Beispiel: Dieser Link führt nicht zu einem Clip, sondern zu einem Kanal: https://youtube.com/channel/UCKvRqcAt5g0VaW1HmNTSu2A.

Die „Endung“, im Beispiel UCKvRqcAt5g0VaW1HmNTSu2A, wird von YouTube auch als

Kanal-ID bezeichnet.

Code an Kanal-URL anhängen

Zweiter Schritt: An den Link mit der Kanal-URL wird ganz einfach dieser Zusatz angehängt: ?sub_confirmation=1

Wenn nun eine Besucherin oder ein Besucher Ihrer WordPress-Seite auf den Link klickt, blendet YouTube sofort einen auffälligen Screen mit diesem Text ein:

Kanalabo bestätigen. Bist du sicher, dass du (Kanalname) abonnieren möchtest?

Mit einem Klick auf Abonnieren ist das Abo auch schon erfolgt.

Abo-Link benennen

Dritter Schritt: Der Abo-Link erhält natürlich noch einen hübscheren Namen. Zum Beispiel: Wir freuen uns über dein Abo!

Den Namen eines Links können Sie in WordPress über das Stift-Symbol anpassen. Der Stift wird in der Werkzeugleiste direkt über oder unterhalb des Links eingeblendet.

Falls Ihre Leserschaft unsicher über die Konsequenzen eines YouTube-Abos ist, können Sie auch noch eine paar beruhigende Worte ergänzen:

YouTube-Abos sind kostenlos und verpflichten zu nichts.
YouTube-Abos stärken ganz allgemein den Kanal.
Wer einen Kanal abonniert, verpasst die neuesten Videos dieses Kanals nicht mehr.

Code in WordPress einbinden – Zusammenfassung

Für das Einfügen von Code-Schnipseln in WordPress gibt es unterschiedliche Anwendungsfälle. Typisch sind das Besucher-Tracking über Google Analytics, die Verknüpfung mit Facebook über das Facebook-Pixel oder die Einbettung von YouTube-Videos. In WordPress kann Code auf unterschiedliche Weise hinzugefügt werden.

Mit einem gewissen Risiko verbunden ist die direkte Bearbeitung über den Theme-Datei-Editor. Entspannter lässt sich Code über WordPress-Blöcke oder Plugins einfügen. Den höchsten Grad der Entspannung genießt, wer vor dem Einfügen noch ein Backup durchgeführt hat.