Hinzufügen von Code zu einer Kopf- oder Fußzeile von WordPress

Aus einer Vielzahl von Gründen ist es möglich, dass Sie irgendwann Code zur Kopf- oder Fußzeile Ihrer WordPress-Site hinzufügen möchten oder müssen. Leider bietet die Plattform keine einfache oder unkomplizierte Möglichkeit, dies standardmäßig zu tun.

Die gute Nachricht ist, dass Sie dies mit Hilfe eines untergeordneten Themas und Ihrer Datei functions.php oder eines WordPress-Plugins leicht beheben können. Unabhängig davon, für welche Methode Sie sich entscheiden, können Sie Ihre Website ganz einfach mit benutzerdefinierten Funktionen, Benutzerdaten und leistungssteigernden Strategien verbessern.

In diesem Beitrag erklären wir einige Fälle, in denen Sie möglicherweise Code zur Kopf- und Fußzeile Ihrer WordPress-Site hinzufügen müssen oder möchten. Dann teilen wir Schritt-für-Schritt-Anleitungen für zwei Methoden, mit denen Sie diese Elemente bearbeiten können, um eine benutzerdefinierte Kopf- oder Fußzeile zu erstellen. Lass uns anfangen!

Warum Ihren WordPress-Kopf- und Fußzeilencode bearbeiten?

Die Gründe, warum Sie Ihre WordPress-Kopf- oder Fußzeile bearbeiten möchten, sind vielfältig. Das offensichtlichste ist wahrscheinlich, dass Sie manchmal Ihre Website durch die Verwendung von benutzerdefiniertem Code gestalten möchten und eine Möglichkeit benötigen, diesen Code zu Ihrer Kopf- und/oder Fußzeile hinzuzufügen.

Dies sind jedoch auch erstklassige Orte für Tracking-Codes, wie sie beispielsweise für Google Analytics verwendet werden. Diese Codes können wertvolle Informationen zum Benutzerverhalten liefern, um Ihre Marketing- und Inhaltsstrategien zu verbessern.

Außerdem enthält WordPress standardmäßig keine Meta-Tags. Diese werden dem Header Ihrer Website hinzugefügt, damit Suchmaschinen Ihre Seiten durchsuchen können. Obwohl sie jetzt nicht mehr so ​​relevant sind wie früher, schadet es nicht, sie zu Ihrem Header hinzuzufügen – sie können nur zur Sichtbarkeit Ihrer Website beitragen.

Schließlich sind Sie vielleicht mit der Praxis vertraut, Render-Blocking-JavaScript „below the fold“ zu verschieben. Dies bedeutet normalerweise, dass Sie es zu Ihrer WordPress-Fußzeile hinzufügen, was eine Bearbeitung des Codes erfordert. Diese Technik kann dazu beitragen, die Leistung Ihrer Website zu verbessern, indem die Ladezeiten verkürzt werden.

So fügen Sie manuell Code zu Ihrer WordPress-Kopf- oder Fußzeile hinzu (in 2 Schritten)

Es gibt zwei Hauptmethoden zum Hinzufügen von Code zu Ihrer WordPress-Kopf- oder Fußzeile. Die erste besteht darin, das Design Ihrer Website manuell zu bearbeiten, und die zweite besteht darin, ein Plugin zu verwenden. Obwohl das manuelle Bearbeiten der Dateien Ihres Designs riskanter und schwieriger ist, ist es für einige fortgeschrittenere Benutzer die bevorzugte Methode.

Schritt 1: Erstellen Sie ein Child-Theme

Das manuelle Hinzufügen von Code zu deiner WordPress-Kopf- oder -Fußzeile beinhaltet das Bearbeiten einiger Dateien deines Themes. Wenn Sie dies tun müssen, ist es immer ratsam, ein untergeordnetes Thema zu bearbeiten, anstatt direkt mit den Dateien Ihres übergeordneten Themas herumzuspielen. Auf diese Weise können Sie vermeiden, dass Ihre Änderungen verloren gehen, wenn Sie Ihr Design aktualisieren.

Glücklicherweise ist der Prozess zum manuellen Erstellen eines untergeordneten Themas ziemlich einfach, und Sie können auf die WordPress-Tutorials zugreifen, die Sie zum Anpassen von Headern benötigen. Wenn Sie jedoch zur Not ein Child-Theme erstellen müssen, kann ein Theme-Builder-Plugin wie der Child-Theme-Konfigurator helfen.

Mit einem Theme-Builder-Plug-in können Sie ganz einfach mit einem Klick auf eine Schaltfläche ein Child-Theme generieren, obwohl der vollständig manuelle Ansatz genauso schnell sein könnte, sobald Sie die Methode heruntergefahren haben.

Schritt 2: Bearbeiten Sie die Datei functions.php Ihres Child-Themes

Sobald Ihr Child-Theme eingerichtet ist, müssen Sie auf die Datei functions.php zugreifen und diese bearbeiten. Bevor Sie beginnen, ist es immer ratsam, Ihre Website zu sichern, falls Sie Fehler machen und einfach einen früheren Zustand wiederherstellen möchten.

Normalerweise bearbeiten Sie Ihre functions.php- Datei über das File Transfer Protocol (FTP) und einen FTP-Client wie FileZilla. Sie können jedoch auch bestimmte Dateien von Ihrem WordPress-Dashboard aus bearbeiten. Um darauf zuzugreifen, navigieren Sie zu Darstellung > Design-Editor .

Sie erhalten eine Warnung, dass Sie im Begriff sind, die Dateien Ihres Designs zu bearbeiten – klicken Sie auf die Schaltfläche Ich verstehe, um fortzufahren. Als nächstes sollten Sie sicherstellen, dass Sie die richtige Datei ausgewählt haben. Stellen Sie sicher, dass in der Seitenleiste rechts neben dem Website-Editor Designfunktionen (functions.php) ausgewählt ist.

Jetzt können Sie Ihren benutzerdefinierten Code am Ende dieser Datei hinzufügen und auf Datei aktualisieren klicken, wenn Sie fertig sind.

So fügen Sie Code zu Ihrer WordPress-Kopf- oder Fußzeile mit einem Plugin hinzu (in 2 Schritten)

Während es in manchen Fällen einfacher sein kann, die Dateien deines WordPress-Themes manuell zu bearbeiten, um Code zu deiner Fuß- oder Kopfzeile hinzuzufügen, ist die Verwendung eines Plugins normalerweise der sicherere Weg. Für die Zwecke dieses Artikels verwenden wir eines der beliebtesten und am besten bewerteten Plugins für die Aufgabe, Header-, Footer- und Post-Injections.

Es gibt jedoch viele Plugins im WordPress-Plugin-Verzeichnis und anderswo, die bei dieser Aufgabe helfen können.

Schritt 1: Installieren und aktivieren Sie Ihr Plugin Ihrer Wahl

Zunächst müssen Sie das Plugin, das Sie verwenden möchten, installieren und aktivieren. Sie können dies tun, indem Sie die .zip- Datei des Plugins aus dem Plugin-Verzeichnis oder einem anderen Online-Marktplatz herunterladen und dann auf Ihre Website hochladen. Navigieren Sie alternativ in Ihrem Dashboard zu Plugins > Neu hinzufügen .

Hier können Sie nach dem Footer- oder Header-Plugin suchen, das Sie verwenden möchten. Unabhängig davon, für welche Methode Sie sich entscheiden, schließen Sie diesen Schritt ab, indem Sie auf die Schaltfläche Installieren und dann auf Aktivieren klicken, wenn die Option angezeigt wird.

Schritt 2: Fügen Sie Ihre Code-Snippets zu Header-, Footer- und Post-Injections hinzu

Sobald das Plugin installiert ist, sollten Sie in Ihrem Dashboard zu Einstellungen > Kopf- und Fußzeile navigieren können.

Hier finden Sie einen Texteditor zum Hinzufügen von Code-Snippets – wie z. B. einem Google Analytics-Tracking-Code oder benutzerdefiniertem JavaScript – die Sie in Ihre Kopf- und/oder Fußzeile einfügen möchten.

Auf dieser Seite können Sie viel erreichen. In den ersten beiden Feldern können Sie Code zu Ihrem Header-Abschnitt hinzufügen. Das linke Feld fügt den Code jeder Seite Ihrer Website hinzu – das ist zum Beispiel für Google Analytics nützlich. Das rechte Feld fügt den Code nur zu Ihrer Startseite hinzu.

Die nächsten Felder fügen Code zum Haupt- und Fußzeilencode Ihrer Seiten hinzu. Die Felder auf der linken Seite sind für die Desktop-Ansicht, während die Felder auf der rechten Seite für mobile Versionen Ihres Codes vorgesehen sind. Wenn Sie mit der Bearbeitung fertig sind, vergessen Sie nicht, unten auf dem Bildschirm auf die Schaltfläche Speichern zu klicken.

Verbessern Sie das Erlebnis Ihrer Website mit WP Engine

Es besteht kein Zweifel, dass Sie möchten, dass Ihre WordPress-Website Ihren Benutzern ein erstklassiges digitales Erlebnis bietet. Das Hinzufügen von Code zu Ihrer WordPress-Fußzeile oder -Kopfzeile ist eine nützliche Taktik, um Ihre Website anzupassen, Google Analytics zu implementieren oder die Leistung zu verbessern.

Bei WP Engine verfügen wir über eine Vielzahl von Entwicklerressourcen, die Ihnen helfen können, das Erlebnis Ihrer WordPress-Website auf ein neues Niveau zu heben. Schauen Sie sie sich noch heute an!