Hast du Probleme damit, wie man Code in die WordPress Header und Footer einfügt? Viele Tools und Tracking-Skripte erfordern, dass du Codeausschnitte in die Header oder Footer deiner WordPress-Seite einfügt. Aber standardmäßig macht WordPress es nicht sehr zugänglich, diese Dateien zu bearbeiten.
In diesem Eintrag zeigen wir dir, wie du Code zur WordPress Header oder Footer hinzufügen kannst, sowohl mit Hilfe eines WordPress-Plugins als auch durch manuelles Hinzufügen des Codes zu deiner functions.php-Datei. Für die meisten Benutzer ist die Plugin-Methode die empfohlene Methode. Aber fortgeschrittene WordPress-Benutzer können es vorziehen, stattdessen die manuelle Codemethode zu verwenden.
Du kannst auf die untenstehenden Links klicken, um direkt zu deiner bevorzugten Methode zu gelangen:
- Wie man Code zu WordPress Header und Footer mit einem Plugin hinzufügt
- Wie man manuell Code zu WordPress Header und Footer hinzufügt
Wie man Code zu WordPress Header und Footer mit einem Plugin Hinzufügt
Für die meisten Benutzer ist der einfachste Weg, Code zu Header und Footer von WordPress hinzuzufügen, über ein Plugin. Die Vorteile der Verwendung eines Plugins gegenüber der manuellen Methode im nächsten Abschnitt sind:
- Ihre Code Snippets bleiben intakt, wenn du jemals die Theme wechselst.
- Das Plugin macht es einfach, nur Codeausschnitte in den Header oder Footer deiner Homepage einzufügen, was in einigen Anwendungsfällen hilfreich sein kann.
- Das Plugin ist anfängerfreundlicher, da es kein Einarbeiten in den Code erfordert.
Obwohl es mehrere Plugins gibt, die diese Funktionalität bieten, empfehlen wir das Head, Footer and Post Injections Plugin von Stefano Lissa, da es dir mehr Kontrolle gibt als viele der Alternativen. Derzeit verfügt sie über mehr als 200.000 aktive Installationen mit einer Bewertung von 5 von 5 Sternen.
Schritt 1: Installation und Aktivierung von Head, Footer and Post Injections
Head, Footer and Post Injections ist kostenlos unter WordPress.org verfügbar, so dass du es direkt aus deinem WordPress Dashboard installieren und aktivieren kannst, indem du zu Plugins gehst → Add New und nach ihm suchst:
Schritt 2: Hinzufügen von Codeausschnitten zu Head, Footer and Post Injections
Sobald du das Plugin aktiviert hast, kannst du auf seine Schnittstelle zugreifen, indem du in deinem WordPress-Dashboard unter Einstellungen → Head und Footer gehst. Du wirst eine Reihe von Registerkarten in der Benutzeroberfläche des Plugins sehen. Aber für dieses Handbuch wirst du hauptsächlich in der Standard-Registerkarte Head und Footer arbeiten:
Um Code zum Header deiner Website hinzuzufügen, musst du ihn in eines der Felder unter dem Bereich <HEAD> SECTION INJECTION einfügen:
- Jede Seite – fügt den Codeausschnitt in den Header jeder einzelnen Seite deiner Website ein. Das ist es, was du die meiste Zeit benutzen wirst.
- Nur Homepage – fügt nur den Codeausschnitt in den Header deiner Homepage ein.
Um beispielsweise den Google Analytics-Tracking-Code zu WordPress hinzuzufügen, füge ihn einfach in das Feld Jede Seite ein und speichern deine Änderungen:
Um Code zum Footer deiner Website hinzuzufügen, kannst du vor der Option </BODY> CLOSING TAG (FOOTER) nach unten scrollen. Auch hier hast du zwei Möglichkeiten, obwohl sie sich vom Headerbereich unterscheiden:
- Desktop – trotz des Namens fügt dies Code in den Footer sowohl der Desktop- als auch der mobilen Version deiner Website ein, es sei denn, du aktivierst das Kontrollkästchen für Mobile.
- Mobil – wenn diese Option aktiviert ist, kannst du der mobilen Version deiner Website einen anderen Codeausschnitt hinzufügen.
Wenn du nur einen Code-Ausschnitt zum Footerbereich für alle Benutzer hinzufügen möchtest, unabhängig von ihren Geräten, füge ihn in das Desktop-Feld ein und lasse Mobile nicht angekreuzt:
Bei Bedarf kannst du mehrere Codeausschnitte zu jeder Box hinzufügen.
BONUS – Code zu Header und Footer von Google AMP-Seiten Hinzufügen
Eine weitere nette Sache an diesem Plugin ist, dass, wenn du Google AMP für WordPress verwendest, das Plugin es dir ermöglicht, gezielt Codeausschnitte zur Kopf- und Fußzeile der Google AMP-Versionen deiner Seiten hinzuzufügen (sofern du das offizielle AMP-Plugin von Automattic verwendest).
Um dies zu tun, gehe zur Registerkarte AMP in Header und Footer und füge deinen Code-Ausschnitt in das entsprechende Feld ein:
Wenn du einfach nur verschiedene PHP-Funktionen auf einer Site-weiten Basis hinzufügen musst, empfehlen wir dir auch, das kostenlose Code Snippets Plugin auszuprobieren. Es erübrigt sich das Hinzufügen von benutzerdefinierten Ausschnitten zur Datei functions.php deines Themes. Es verfügt derzeit über mehr als 100.000 aktive Installationen mit einer Bewertung von 5 von 5 Sternen.
Wie man Manuell Code zu WordPress Header und Footer Hinzufügt
Wenn du nicht mit den Grundlagen von PHP vertraut bist, empfehlen wir dir, die oben genannte Plugin-Methode beizubehalten. Die manuelle Methode kann für dich zu kompliziert sein.
In diesem Abschnitt erfährst du, wie du manuell Codeausschnitte über die Datei functions.php in den Header und Footer deines Themes einfügen kannst.
Wenn du mit dieser Methode über das Plugin im vorherigen Abschnitt fortfahren möchtest, ist es wichtig, dass du ein WordPress Child-Theme verwendest, um deine Änderungen vorzunehmen. Wenn du kein Child Theme verwendest, wird jeder Code, den du zu deinem Header oder Footer hinzufügst, überschrieben, wenn du dein WordPress Theme aktualisierst.
Viele Entwickler stellen ein Child-Theme zur Verfügung. Aber wenn dein Entwickler es nicht tut, hier ist eine Anleitung, wie man ein WordPress Child Theme erstellt. Sobald du dein Child-Theme fertig hast, kannst du mit den folgenden Schritten fortfahren, um Code zu Header oder Footer deines Themes hinzuzufügen.
Während du Code-Ausschnitte direkt zu deinen header.php und footer.php Dateien hinzufügen kannst, ist ein besserer Weg, deine functions.php Datei und den entsprechenden WordPress Hook zu verwenden. Auf diese Weise kannst du alle deine Ausschnitte an einem Ort aufbewahren und vermeiden, dass du wichtige Themedateien änderst.
Schritt 1: Codeausschnitte Vorbereiten
Um dir den Einstieg zu erleichtern, geben wir dir einen groben Rahmen, um Code sowohl in deinem Header als auch in deinem Footer hinzuzufügen.
Um code zu deinem header hinzuzufügen, benutze diesen code-ausschnitt:
/* Describe what the code snippet does so you can remember later on */
add_action('wp_head', 'your_function_name');
function your_function_name(){
?>
PASTE HEADER CODE HERE
<?php
};
Um code zu deinem footer hinzuzufügen, benutze diesen code-ausschnitt:
/* Describe what the code snippet does so you can remember later on */
add_action('wp_footer', 'your_function_name');
function your_function_name(){
?>
PASTE FOOTER CODE HERE
<?php
};Achte bei jedem Ausschnitt darauf, dass er geändert wird:
- Die Kommentarbeschreibung (hilfreich, wenn du dir merken musst, was ein Codeausschnitt ein Jahr später macht).
- Der Platzhalter your_function_name (beide Instanzen)
- Der EINFÜGENDE X-CODE HIER Platzhalter
Schritt 2: Hinzufügen von Codeausschnitten zur Datei functions.php im Child Theme
Sobald du die entsprechenden Code-Ausschnitte fertig hast, musst du sie in die functions.php-Datei deines Child Themes einfügen. Du kannst diese Datei entweder bearbeiten, indem du dich per FTP mit deiner Website verbindest. Oder du kannst zu Appearance → Editor gehen und die Datei functions.php auswählen. Füge dann deinen Code am Ende der Datei ein:
Achte darauf, dass du deine Änderungen speicherst und du bist fertig!
BONUS: Hinzufügen von Code zu Header oder Footer für Nur Bestimmte Seiten
Wenn du mehr Kontrolle darüber haben möchtest, wo deine Header oder Footer Codeausschnitte erscheinen, kannst du if-Anweisungen verwenden, um den Code nur zu bestimmten Seiten auf deiner WordPress-Seite hinzuzufügen.
Um beispielsweise nur Codeausschnitte in Header oder Footer deiner Homepage einzufügen, kannst du sie verwenden:
/* Describe what the code snippet does so you can remember later on */
add_action('wp_head', 'your_function_name');
function your_function_name(){
if(is_front_page()) { ?>
PASTE HEADER CODE HERE
<?php }
};
Eine weitere Möglichkeit besteht darin, die Codeausschnitte nur zu bestimmten Beiträgen oder Seiten hinzuzufügen. Dazu kannst du diesen Code-Ausschnitt verwenden:
/* Describe what the code snippet does so you can remember later on */
add_action('wp_head', 'your_function_name');
function your_function_name(){
if(is_single(73790)) { ?>
PASTE HEADER CODE HERE
<?php }
};
Achte darauf, die Beispielnummer – 73790 – durch die tatsächliche ID des Beitrags oder der Seite zu ersetzen, zu der du die Codeschnipsel hinzufügen möchtest.
Im Zweifelsfall Verwende das Plugin.
Damit endet unser Leitfaden, wie du Code in den Header oder Footer deiner WordPress-Seite einfügen kannst. Wenn die manuellen Codebeispiele verwirrend sind, empfehlen wir dir, die Plugin-Methode zu verwenden. Es ist viel anfängerfreundlicher und bietet dir meist genauso viel Funktionalität.
