Ob Beiträge anlegen, Farben und Schriftarten ändern oder Plugins hinzufügen – in WordPress kannst du fast alles mit ein paar Klicks auf Schaltflächen erledigen. Fast alles. Einige Anwendungen erfordern immer noch das Einfügen von Code-Schnipseln. Einen typischer Anwendungsfall: Das Einbinden eines Tracking-Codes. 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 deine WordPress-Installation und deine Nerven stabil bleiben – mach dich vor dem Einfügen mit den Coding-Basics vertraut:

Es stehen unterschiedliche Methoden zur Verfügung, um Code in WordPress 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

Noch ein kleiner Hinweis zum Thema Sicherheit: Es ist immer eine gute Idee, vor dem Einfügen von Code 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 kommst du also nicht ans Ziel, wenn dein Code auch von den Browsern deiner Besucherinnen und Besucher gelesen und ausgeführt werden soll.

Verwende diesen Block also nur für den Fall, dass du Code zur Ansicht präsentierten möchtest. So fügst du den Code-Block in einen Beitrag ein:

Klicke auf den Block-Inserter, also das +-Zeichen.
Gib „Code“ in die Block-Suche ein.
Wähle den Code-Block aus.

Wenn du „Code“ in die Block-Suche eingegeben hast, werden dir 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 kannst du zum Beispiel verwenden, um einen iFrame einzubinden. Ein iFrame ist ein HTML-Element, mir dessen Hilfe du Fremdinhalte auf deine Website einbinden kannst, 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] kannst du das Formular nun an beliebiger Stelle in Ihren Beiträgen und Seite 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 nicht in WordPress eingesetzt werden.

Code direkt eingeben

Bis jetzt hast du gelernt, wie du Code mit Hilfe von Gutenberg-Blöcken in WordPress hinzufügst – auf Beiträgen und Seiten. Das Risiko war dabei relativ überschaubar, denn ein Block lässt sich im Problemfall auch schnell wieder löschen. Eine ganz anderes Gefahrenpotenzial besteht beim direkten Einfügen von Code in zentrale Dateien deiner WordPress-Installation, in Themes- oder Plugin-Dateien. Du hast dich vorhin nicht etwa um ein Backup gedrückt? Spätestens jetzt solltest du eine Sicherung durchführen. Oder eine WordPress-Instanz verwenden, die du nur zum Experimentieren aufgesetzt hast.

Der Theme-Datei-Editor

WordPress ist ein Open-Source-System, also ein System mit offenem Quellcode. Du kannst den Quellcode aber nicht nur ansehen, sondern auch nach deinen 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, klickst du 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:

header.php
footer.php
functions.php

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

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

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

Code Snippets über Plugins eingeben

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

Im nächsten Fenster kannst du dann denn 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 findest du 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 eine Code-Schnipsel-Bibliothek an. Du behältst den Überblick deiner Änderungen.
Du kannst jeden Code-Schnipsel mit einem einfachen Klick aktivieren und auch wieder deaktivieren.

Ein YouTube-Video einbetten

Für das Einbetten von YouTube-Videos benötigst du 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 deiner WordPress-Seite kannst du 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. Du kannst ihn also nicht zur Platzierung eines Kanalabo-Codes verwenden. Dazu benötigst du weder einen Block noch ein Plugin. Alles, was du brauchst:

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 kannst du in WordPress über das Stift-Symbol anpassen. Der Stift wird in der Werkzeugleiste direkt über- oder unterhalb des Links eingeblendet.

Falls deine Leserschaft unsicher über die Konsequenzen eines YouTube-Abos ist, solltest du 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.

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.

Code in WordPress einfügen