Anleitung: HTML-Code in WordPress einbinden und bearbeiten

Wenn Sie Drittanbieter wie Google Analytics, Facebook oder Pinterest mit Ihrer WordPress-Website verbinden wollen, stehen Sie unweigerlich vor einem Problem: Sie müssen einen HTML-Code einbauen. Leider bietet WordPress selbst diese Funktion aber nicht an. Was tun? Wir zeigen Ihnen zwei einfache Wege, wie Sie WordPress überlisten und trotzdem HTML-Code auf Ihrer Seite einbinden können.

Warum Sie HTML-Code auf Ihrer WordPress-Website brauchen

Normalerweise muss Sie HTML auf Ihrer WordPress-Website nicht interessieren. Das Content-Management-System kümmert sich im Hintergrund automatisch darum, dass alles funktioniert.

Anders sieht das aus, wenn Sie Ihre Website mit externen Diensten verknüpfen wollen. Das betrifft zum Beispiel Analyse-Tools wie Google-Analytics, Ihren Newsletter-Anbieter oder Marketing-Möglichkeiten wie Facebook Pixel.

Bei der Einrichtung des jeweiligen Tools bekommen Sie ein Stück HTML-Code, das Sie in Ihre Website implementieren sollen. Nun stehen Ihnen zwei Möglichkeiten offen, das zu tun: entweder über ein Plugin oder manuell.

WordPress-HTML durch Plugins bearbeiten

Falls Sie keine Erfahrung mit Programmier- und Beschreibungssprachen haben, ist die Einbindung von HTML-Code über ein Plugin die einfachste Variante.

In vielen Fällen müssen Sie dazu nicht einmal ein neues Plugin installieren. Einige Cookie-Plugins bieten die Implementierung von Drittdiensten an, die Cookies auf Ihrer Website setzen. Für die Verifizierung Ihrer Seite für Pinterest können Sie die Erweiterung Yoast SEO nutzen.

Natürlich können Sie für die Einbindung Ihrer HTML-Codes auch spezialisierte WordPress-Erweiterungen wählen. Zwei gute Möglichkeiten sind hier zum Beispiel die kostenlosen Plugins Insert Headers and Footers sowie Head, Footer and Post Injections.

HTML-Code einbinden über das Plugin Insert Headers and Footers

Installieren und aktivieren Sie zunächst die WordPress-Erweiterung Insert Headers and Footers. Öffnen Sie sie im Anschluss, indem Sie im Menü erst auf den Punkt „Einstellungen” und dann auf den Namen des Plugins klicken. Nun öffnet sich ein Fenster mit drei Feldern.

Ob Ihr HTML-Code in den Header-, Body- oder Footer-Bereich kopiert werden soll, erfahren Sie normalerweise von dem betreffenden Drittanbieter. Meistens geht es um den Header.

HTML-Code einbinden über das Plugin Head, Footer and Post Injections

Ähnlich wie Insert Headers and Footers funktioniert das Plugin Head, Footer and Post Injections. Nach der Installation finden Sie es im Menü ebenfalls unter „Einstellungen”.

Sie haben die Wahl zwischen einer Reihe von Registerkarten. In der Regel werden Sie nur die erste mit dem Titel „Head and footer” benötigen:

Wollen Sie einen HTML-Code in den Header Ihrer Website integrieren, sind für Sie die beiden Felder in der ersten Zeile relevant. Unter „on every page” tragen Sie Code ein, der auf jeder Seite Ihre Website erscheinen soll. Dies ist die Option, die am häufigsten zum Einsatz kommt.

Unter „only on homepage” können Sie Code einfügen, der nur Ihre Startseite betrifft.

WordPress-Head manuell durch HTML-Editor bearbeiten

Grundsätzlich ist es möglich, HTML-Code auch ohne Plugin einzubinden. Einige Premium-Themes wie etwa Divi stellen dazu einen eigenen Menüpunkt zur Verfügung. Dort können Sie Ihren Code ähnlich wie bei den Plugins einfach ablegen und speichern.

Bei den meisten Themes gestaltet sich das Prozedere jedoch etwas schwieriger. Zugleich ist die manuelle Methode recht fehleranfällig. Bevor Sie loslegen, sollten Sie deshalb unbedingt ein Backup Ihrer Website erstellen.

Zudem ist es sinnvoll, ein Child Theme anzulegen. Dabei handelt es sich um eine Art Kopie Ihres Themes, an der Sie gefahrlos Änderungen vornehmen können. Sollte etwas schieflaufen, können Sie das Child Theme einfach löschen und ein neues erstellen.

Weiterer Vorteil: Child Themes sind im Gegensatz zur Hauptdatei nicht von Updates betroffen. Alle Änderungen bleiben dauerhaft bestehen. Arbeiten Sie hingegen direkt am Eltern-Theme, müssen Sie nach jedem Update alle Änderungen von Neuem vornehmen.

Sobald Sie ein Child Theme und eine Sicherheitskopie Ihrer Website erstellt haben, können Sie mit der Implementierung des Codes beginnen.

1. Rufen Sie im WordPress-Menü den Punkt „Design” auf. Dort klicken Sie auf „Theme-Editor” und gelangen zu einem HTML-Editor.

2. In der rechten Seitenleiste sind verschiedene Theme-Dateien aufgelistet. Wählen Sie die header.php.

3. Der für Sie relevante Bereich beginnt mit <head> und endet mit </head>. Fügen Sie durch Drücken der Enter-Taste unmittelbar vor dem Ende eine neue Zeile ein. In diesem Beispiel läge diese zwischen den Zeilen 11 und 12:

4. Kopieren Sie den HTML-Code in die leere Zeile.

5. Klicken Sie unter dem Editor auf „Datei aktualisieren”.

Fazit: Plugins für HTML-Anfänger, WordPress HTML-Editor für Profis

WordPress gibt Ihnen von Haus aus zwar keine Möglichkeit, HTML-Code auf Ihrer Website einzufügen. Durch einen kleinen Umweg ist diese Aufgabe aber dennoch in wenigen Minuten zu erledigen.

Sollten Sie sich selten mit Ihrer Website befassen und keine Ahnung von HTML, php, CSS und Co. haben, ist ein Plugin die einfachste und sicherste Lösung für Sie. Dort müssen Sie Ihren Code nur hinein kopieren. Den Rest erledigt das Plugin.

Sich an den HTML-Code Ihres Themes zu wagen, verlangt mehr Vorwissen. Sie müssen ein Child Theme anlegen und sich innerhalb des Editors zurechtfinden. Im schlechtesten Fall richten Sie aus Versehen Schaden auf Ihrer Website an. Vergessen Sie deshalb niemals, vor Änderungen am Code ein Backup Ihrer Seite zu erstellen.

 

Titelbild: Artem Sapegin / Unsplash