So fügen Sie Kopf- und Fußzeilencode in WordPress hinzu

Das Anpassen Ihrer WordPress-Website mit Code kann beängstigend sein. Oft müssen Sie in Kerndateien graben, um Konfigurationen zu ändern oder neue Parameter hinzuzufügen, was Ihre Site beschädigen kann, wenn Sie es falsch angehen.

Das Hinzufügen von Kopf- und Fußzeilencode ist jedoch tendenziell viel einfacher. Oft müssen Sie nur bestimmte Codeausschnitte kopieren und einfügen. Das bedeutet, wenn Sie wissen, wie Sie auf Ihre Kopf- und Fußzeilendateien zugreifen können, haben Sie den gruseligsten Teil hinter sich.

In diesem Artikel zeigen wir Ihnen, wie Sie Kopf- und Fußzeilencode in WordPress sowohl manuell als auch mit einem Plugin hinzufügen. Beide Ansätze sind sehr einfach, also fangen wir gleich an!

Warum Sie möglicherweise Kopf- und Fußzeilencode in WordPress hinzufügen müssen

Wenn Sie eine Website betreiben, sind Sie wahrscheinlich mit mindestens einem Drittanbieterdienst vertraut, bei dem Sie Code einbetten müssen, um eine Verbindung herzustellen.

Einige der beliebtesten Beispiele sind Google Analytics, Search Console, Facebook Pixel und viele andere Tools, die Website-Tracking beinhalten.

Bei all diesen Diensten müssen Sie bestimmte Skripte zwischen den Head -Tags Ihrer Website einfügen. Der Header Ihrer Website ist eine entscheidende Komponente, die Elemente wie Skripte, Titel, Stildateien und mehr enthält.

Fußzeilen -Tags funktionieren ähnlich wie ihre Head- Pendants. Wenn Sie der Fußzeile Ihrer Website Code-Snippets hinzufügen, sollten diese technisch gesehen genauso ausgeführt werden, als ob Sie sie in Ihre Kopfzeile einfügen würden.

Es ist jedoch wichtig zu verstehen, dass Ihre Website Skripts in der Reihenfolge ausführt, in der Sie sie einfügen. Außerdem wird der Header-Code   ausgeführt, bevor die Seite geladen wird, während der Fußzeilencode danach ausgeführt wird.

Wenn Sie die Wahl haben und sich um die Website-Optimierung kümmern, kann das Verschieben von JavaScript in die Fußzeile Ihrer Website dazu beitragen, die Ladezeiten zu verkürzen. Einige Dienste werden Sie jedoch ausdrücklich auffordern, ihren Code zu Ihrem Header hinzuzufügen, um Ausführungsprobleme zu vermeiden.

Als Faustregel gilt: Wenn ein Dienst Sie danach fragt, empfehlen wir, seinem Rat zu folgen. Platzieren Sie andere JavaScript-Code-Snippets in der Fußzeile Ihrer WordPress-Site. CSS-Code kommt immer in den Header.

So fügen Sie Kopf- und Fußzeilencode in WordPress hinzu (2 Methoden)

Wie so oft bei WordPress können Sie dasselbe Ziel erreichen, indem Sie Dateien entweder manuell ändern oder ein Plugin verwenden.

Beginnen wir damit, über den Plugin-Ansatz zu sprechen.

1. Verwenden Sie ein Plugin wie Head, Footer und Post Injections

Die Verwendung eines Plugins zum Hinzufügen von Code zu Ihren Kopf- und Fußzeilendateien in WordPress ist der sicherste Ansatz. Mit einem Plugin müssen Sie Designdateien nicht manuell ändern oder sicherstellen, dass Sie Skripte an der richtigen Stelle hinzufügen.

Obwohl es viele gute Plugins zur Auswahl gibt, ist unsere Empfehlung für den Job das Head-, Footer- und Post-Injections-Plugin.

Dieses Plugin gibt Ihnen viel Kontrolle darüber, wo in Ihrem Code Sie Ihre Code-Snippets einfügen möchten. Es bietet auch die Möglichkeit, verschiedene Skripte für mobile und Desktop-Renderings Ihrer Website hinzuzufügen.

Um das Plugin hinzuzufügen, gehen Sie in Ihrem Dashboard zu Plugins > Neu hinzufügen und verwenden Sie die Suchfunktion, um das Plugin zu finden. Klicken Sie auf Installieren und aktivieren Sie dann das Plugin.

Sobald das Plugin aktiv ist, können Sie direkt zu Einstellungen > Kopf- und Fußzeile springen. Sie sehen mehrere Felder, in denen Sie Code-Snippets hinzufügen können.

Wenn Sie sich die Optionen des Plugins ansehen, werden Sie feststellen, dass es viele zusätzliche Platzierungen für Ihre Code-Snippets bietet. In den meisten Fällen können Sie sich jedoch an die Registerkarte Kopf- und Fußzeile halten.

Stellen Sie bei globalem Code sicher, dass Sie diese Snippets im Feld „ Auf jeder Seite “ platzieren. Wenn der Code jedoch nur auf Ihrer Homepage ausgeführt werden soll, verwenden Sie die Option Nur auf der Homepage.

Wenn Sie mit dem Hinzufügen von Code zu Ihrer Website fertig sind, speichern Sie die Änderungen am Plugin und Sie können loslegen!

2. Fügen Sie Codeschnipsel über Ihre Datei functions.php hinzu

Das manuelle Hinzufügen von Kopf- und Fußzeilencode in WordPress ist nicht kompliziert, erfordert jedoch mehr Überlegungen als der Plugin-Ansatz.

Sie können den Code direkt zu den header.php- oder footer.php -Dateien Ihres aktiven Themes hinzufügen. Du findest diese Dateien im Verzeichnis /public_html/wp-content/themes/ , indem du den Ordner deines aktiven Designs öffnest und hineinschaust:

Sie können über das File Transfer Protocol (FTP) auf diese Dateien zugreifen und sie mit Ihrem bevorzugten Code-Editor bearbeiten. Das direkte Bearbeiten von Kopf- und Fußzeilendateien kann jedoch chaotisch sein. Vor diesem Hintergrund haben wir zwei Empfehlungen, wenn Sie den manuellen Ansatz verwenden möchten:

1. Erstelle ein Child-Theme für dein Theme. Auf diese Weise gehen keine Anpassungen verloren, wenn Sie das übergeordnete Design aktualisieren.
2. Verwenden Sie Hooks, um den Code über Ihre Datei functions.php hinzuzufügen. Dies bietet einen saubereren Ansatz gegenüber der manuellen Bearbeitung von Kopf- und Fußzeilendateien.

Idealerweise sollten Sie immer ein untergeordnetes Design verwenden, wenn Sie beabsichtigen, eine Art von Designanpassung vorzunehmen. Du kannst auf die Datei functions.php deines untergeordneten Designs in seinem Ordner im Verzeichnis /wp-content/themes zugreifen.

Öffnen Sie die Datei functions.php in Ihrem Code-Editor. Um den gewünschten Code hinzuzufügen, müssen Sie entweder die Datei wp_head   oder wp_footer   Haken.

Das folgende Code-Snippet fügt Ihren benutzerdefinierten Code zum Header Ihrer Website hinzu:

 add_action('wp_head', 'test_script'); function test_script() { ?> <!-- Here comes your custom code in HTML format. --> <?php }

Sie können den Hook wp_footer anstelle von wp_head verwenden , wenn Sie den Code in Ihrer Fußzeile platzieren möchten. Sie können auch den Namen der Funktion (test_script) ändern , wenn Sie möchten.

Wenn Sie mit der Optimierung Ihrer functions.php -Datei fertig sind, denken Sie daran, Ihre Änderungen zu speichern, und das war's. Der hinzugefügte Code sollte jetzt funktionieren!

Fazit

Bei vielen Diensten von Drittanbietern wie Google Analytics oder Facebook Pixel müssen Sie Code-Snippets zu Ihrer Website hinzufügen, damit sie sich mit ihr verbinden können. Dies ist jedoch nur einer von vielen Fällen, in denen Sie Code zu Ihrer Kopf- und Fußzeile in WordPress hinzufügen müssen, daher lohnt es sich zu wissen, wie es geht.

Es gibt zwei Möglichkeiten, wie Sie Code-Snippets zu Ihrer Kopf- und Fußzeile hinzufügen können. Sie können entweder ein Plugin wie „Head, Footer and Post Injections“ verwenden oder Code-Snippets über Ihre functions.php -Datei hinzufügen.

Haben Sie Fragen zum Hinzufügen von Kopf- und Fußzeilencode in WordPress? Lassen Sie uns im Kommentarbereich unten darüber sprechen!