Ein Blog über Code, Hardware und Co

Kurz notiert, Wordpress und Webentwicklung

Code in Header oder Footer einfügen, aber dein WordPress-Theme unterstützt das nicht? Hier ist die Lösung.

Für die verschiedensten Anwendungen von Cookiebannern über google Analytics bis hin zu Werbeanzeigen müssen Code-Snippets in den Header oder Footer einer Webseite eingefügt werden. Bei den meisten WordPress-Themes ist das kein Problem, hier kann man z.B. einfach ein Widget in den Headerbereich oder Footerbereich setzen und den Code dort einfügen.

Aber was ist, wenn das verwendete Theme, keine Widgets in diesen Bereichen unterstützt? Auch dann gibt es Lösungen.

Wieso muss man überhaupt Code-Snippets einbauen?

Viele Dienste, insbesondere von Drittanbietern, funktionieren nur über das Einbinden von Code Snippets. Weit verbreitete Vertreter sin z.B.:

  • Consent Managament-Systeme (“Cookiebanner”)
  • Google Analytics
  • Google Adsense
  • Google Tag-Manager
  • Facebook-Pixel
  • usw.
Achtung: Das Einbinden von Code Snippets ist ein potentielles Sicherheitsrisiko. Der eingebettete Code wird auf deiner Webseite bzw. dem Rechner deiner Besucher ausgeführt und kann eigenständig weiteren Code/Inhalt nachladen. Daher solltest du nur Code aus vertraulichen Quellen einbinden.

Ich zeige dir, wie du besonders einfach Code im Header oder Footer einbinden kannst.

Variante 1: Per Widget im Header oder Footerbereich

Wenn dein Theme Widgets im Header- bzw. Footerbereich unterstützt: Bingo!
In diesem Fall kannst du einfach ein neues Widget vom Typ “HTML-Code” erstellen und hier dein entsprechendes Snippet einfügen.

Variante 2: Per Plugin “Insert Headers and Footers”

Natürlich gibt es eine Reihe weiterer Plugins, die Code-Snippets im Header oder Footer einbinden können, hier handelt es sich aber um ein weit verbreitetes und etabliertes Plugin.

Variante 2a: Wenn kein Widget vorhanden ist und du kein Plugin installieren willst

Dann kannst du deine Snippets auch über die functions.php (Achtung, nicht bei Multisite-Umgebungen!) deines Themes einbinden.

TL;DR: Was sollte in den Footer, was in den Header?

Skript/SnippetEmpfohlene Position
Consent-Management-SystemeHeader(!)
Google AnalyticsHeader, Footer funktioniert aber auch problemlos.
Google AdsenseFooter
Andere WerbeskripteFooter
Google Tag ManagerHeader
Facebook PixelFooter
Tabelle 1: Welches Skript/Snippet an welche Position?

Wieso empfehle ich bei vielen Pixeln/Snippets den Einbau im Footer?

Aus Geschwindigkeitsgründen. Viele der Snippets sorgen sonst für sog. “Render-Blocking-Events”. das bedeutet, die Seite wird erst dann weiter geladen und vollständig angezeigt, wenn alle Snippets vollständig geladen sind. Das sorgt für längere Ladezeiten, die Nutzer verärgern und für negativen Impact auf die eigenen Rankings sorgen können.

Schreibe eine Antwort