Wie kann ich z.B. Facebook Code in WordPress einfügen?

Oder gewusst wie: Header & Footer easy bearbeiten

Du möchtest gerne Google Analytics mit deiner WordPress – Website verknüpfen? Deinen WordPress Footer bearbeiten? Oder einen Facebook Pixel Code auf deiner Seite einbauen? Dein Kollege hat dir einen Fetzen Javascript, HTML, PHP oder irgendwas Chinesisches für dich geschickt, den du irgendwo einbauen sollst? Doch du weißt nicht wie?

Damit du deine WordPress – Website mit anderen Anbietern verbinden kannst, ist es manchmal unumgänglich, dass du externe Skripte, sogenannte Code Snippets, anders ausgedrückt HTML oder Javascript Code in WordPress einfü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 Code in WordPress einfügen kann.

Wie kann ich nun Code in WordPress einfügen?

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

• Quell – Code in WordPress einfügen und zwar per Plugin (für Anfänger geeignet)
• Für die Pros unter euch: manuell Code in WordPress einfügen über php Dateien
• Welche Methode ist besser, um Inhalte in deine Website einzufügen?

Einbindung von Code Snippets per Plugin:

Hier gibt es ein kostenfreies Plugin, was wirklich super funktioniert und ich jedem WordPress Seitenbetreiber empfehle. Das Plugin ist meiner Meinung nach simpel und dennoch großartig:

Insert Headers and Footers by WPBeginners

Mithilfe diesem Plugins kann man wunderbar Code in WordPress einfügen z.B. im Header oder Footer. 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“ deinen WordPress Footer bearbeiten.

Optional kann man in den Bodybereich auch externe Skripte, in der Regel ist das HTML – Code in WordPress einfügen. Dies geht über den Reiter „Skripte im Body“. Das war es auch schon. Kaum zu glauben. So einfach ist das.

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

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

Für erfahrene WordPress – Anwender empfiehlt es sich, Inhalte ü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 hier: Wie du ganz einfach ein WordPress Child Theme erstellst.

exkurs: Warum ein Child – Theme wichtig ist?

Ganz einfach! Ein Child Theme bewahrt dich davor, Änderungen im Code wiederholt einzufügen, wenn dein Theme ein Update erhält. Ansonsten würde nämlich das Update die Änderungen, die du am Quelltext angepasst hast, überschreiben. Das ist alles

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 Snippet 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 weißt, 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 kannst du den Quell – Code in WordPress einfügen.

Um den WordPress Footerbereich deiner Website zu bearbeiten, gibst du folgenden Text ein. Die Vorgehensweise ist wie beim Headerbereich 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 Tipps, welche Methode die bessere ist, um Inhalte in deine Website einzufügen

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 als wenn du manuell Code in WordPress einfügen würdest .

geschafft! Code in WordPress einfügen? easy!

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

Ansonsten gilt:

Solltest du Fragen haben, so würde ich mich über eine Nachricht deinerseits sehr freuen. Schreib mir einfach.

Und übrigens mehr zu mir und meinen Dienstleistungen, erfährst du hier.

Bildquelle: Unsplash – Markus Winkler