You are currently viewing Wie kann ich den Header bzw. Footer in WordPress bearbeiten Oder: wo füge ich meinen Code ein?

Wie kann ich den Header bzw. Footer in WordPress bearbeiten Oder: wo füge ich meinen Code ein?

Du möchtest gerne Google Analytics mit deiner WordPress – Website verknüpfen? Oder einen Facebook Pixel Code auf deiner Seite einbauen? Doch du weisst nicht wie?

Damit du deine WordPress – Website mit anderen Anbietern verbinden kannst, ist es manchmal unumgänglich, dass du externe Skripte, sogenannte Codeschnipsel (oder Code Snippets) deiner Seite hinzufügen musst.

Ein bekanntes Beispiel ist dabei das Facebook Pixel, welches mittels eines Code Snippets im WordPress Header mit deiner Website verknüpft wird. Du verstehst nur Bahnhof? Kein Problem! In den nächsten Abschnitten möchte ich dir zeigen, wie man ganz einfach Codeschnipsel in den WordPress Header bzw. Footer einbinden kann.

Wie füge ich Code Snippets in den WordPress Header oder Footer ein?

Hierfür gibt es mehrere Vorgehensweisen, die ich dir hiermit zeigen möchte:

Einbindung von Code Snippets per Plugin:

Hier gibt es ein kostenfreies Plugin, was wirklich super funktioniert und ich jedem WordPress Seitenbetreiber empfehle:

Insert Headers and Footers by WPBeginners

Mithilfe diesem Plugins kann man wunderbar Codeschnipsel in den WordPress Header oder Footer einbinden. Einfach im Suchfeld bei „Dashboard – Plugins – Installieren“ Pluginnamen eingeben, installieren und aktivieren.

Hier nochmal der obligatorische Hinweis, vorab zu prüfen, ob das Plugin mit deiner WordPress Version kompatibel ist und sicherheitshalber vor Installation ein Backup deiner Seite erstellen!

Nach Installation findest du das Plugin unter „Dashboard – Einstellungen – Insert Headers and Footers“.

Ich finde das Plugin relativ selbsterklärend. Im Feld „Skripte im Header“ kannst du Codeschnipsel in den Header deiner Seite einfügen, weiter unten im Feld „Skripte im Footer“ die Snippets, die für den Footer gedacht sind.

Optional kann man auch externe Skripte in den Bodybereich deiner WordPress Website einpflegen. Und das war es auch schon.

Nun geht es zur Anleitung für die Pros unter euch.

Für die Pros unter euch: manuelle Einbindung in die php Dateien

Für erfahrene WordPress – Anwender empfiehlt es sich, Codeschnipsel über die Datei functions.php in den Header oder Footer einzufügen. Dazu ist es wichtig, dass du ein Child-Theme deines WordPress Themes verwendest. Wie das funktioniert, erkläre ich dir in einem meiner nächsten Beiträge. Solltest du kein Child-Theme nutzen, dann empfehle ich dir ausdrücklich die Vorgehensweise über ein WordPress Plugin.

Nun geht es aber ans Eingemachte:

  1. Skript vorbereiten

Zuallererst ist es sinnvoll, dein Codeschnipsel für die Einbindung in die functions.php vorzubereiten. Dazu nutzt du folgenden Code für den Headerbereich

/* Beschreibe, was das Codeschnipsel macht, damit du dich später daran erinnern kannst */
 add_action('wp_head', 'name_deiner_funktion');
 function name_deiner_funktion(){
 ?>
 Hier Codeschnipsel einfügen 
 <?php 
 };

Dabei ist es wichtig, dass du folgende Platzhalter benennst:

  • Platzhalter „Beschreibe, was das Codeschnipsel macht, damit du dich später daran erinnern kannst“: Dies dient dazu, dass du auch nach längerer Zeit noch weisst, um was für einen Codeschnipsel es sich handelt, z.B. Codeschnipsel für den Facebook Pixel
  • Platzhalter „name_deiner_funktion“: Gib an beiden Stellen den gleichen Namen deiner Funktion ein, hierbei ist es unerheblich, welchen Namen du ihr gibst. Für die Einbindung eines Facebook Pixel würde sich „implement_facebook_pixel“ gut eignen.
  • Platzhalter „Hier Codeschnipsel einfügen“: Dies erklärt sich von alleine, hier kommt letztendlich der Codeschnipsel herein.

Um den Footerbereich deiner WordPress Website zu bearbeiten, gibst du folgende Code ein. Die Vorgehensweise ist wie beim Headercode identisch.

/* Beschreibe, was das Codeschnipsel macht, damit du dich später daran erinnern kannst */
 add_action('wp_footer', 'name_deiner_funktion');
 function name_deiner_funktion(){
 ?>
 Hier Codeschnipsel einfügen 
 <?php 
 };

2. Schritt: Einbindung deines Codes in die functions.php deines Child-Themes

Hierzu gehst du einfach über „Dashboard – Design – Theme Editor“ in das Child Theme deines Editors. Dann das Child Theme anwählen, was unter „Zu bearbeitendes Theme wählen“ angezeigt wird. Hiernach wählst du auf der rechten Seite die Datei „Theme-Funktionen: functions.php“ aus und fügst den zuvor vorbereiteten Code ans Ende der Datei ein.

Danach das Ganze nur noch speichern und das wars!

Ein paar Schlussworte

Zum Schluss möchte ich dir noch den Tipp geben, dass wenn du unsicher bist, in Bezug darauf, welche Methode du verwenden solltest, dann wähle die Einbindung von externen Skripten über ein Plugin. Mithilfe dieser Methode kann man am wenigsten falsch machen, und sie ist von der Herangehensweise genauso gut, wie die manuelle Einbindung von Code.

Ich hoffe nun, dass die Fragezeichen in deinem Kopf verschwunden sind? Vielleicht hast du hiermit auch schon erfolgreich ein Codeschnipsel in deine Seite eingebunden? Wenn ja, dann würde ich mich über dein Feedback sehr freuen. Ansonsten gilt:

Solltest du dennoch Fragen haben, so würde ich mich über eine Nachricht deinerseits sehr freuen. Und mehr zu mir, erfährst du hier.

* Dieser Artikel enthält einen Affiliate-Link. Wenn du dich für diesen Anbieter entscheidest, erhalte ich eine Provision. Du zahlst dadurch nicht mehr und ich stelle weiterhin nur die Produkte vor, die ich selbst ebenfalls nutze.

Bildquelle: Pexels – Markus Piske

Schreibe einen Kommentar