Das Anpassen Ihrer WordPress-Website mithilfe von Code kann beängstigend sein. Oft müssen Sie in Core-Dateien graben, um Konfigurationen zu ändern oder neue Parameter hinzuzufügen, was Ihre Site zerstören kann, wenn Sie es falsch angehen.
Das Hinzufügen von Kopf- und Fußzeilencode ist jedoch in der Regel viel einfacher. Oft müssen Sie nur bestimmte Code-Snippets kopieren und einfügen. Das heißt, wenn Sie wissen, wie Sie auf Ihre Kopf- und Fußzeilendateien zugreifen, 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 lass uns gleich loslegen!
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 Ihrer Website hinzufügen Kopf Stichworte. Der Header Ihrer Site ist eine entscheidende Komponente, die Elemente wie Skripte, Titel, Stildateien und mehr enthält.
Fusszeile Tags funktionieren ähnlich wie ihre Kopf Kollegen. 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 wissen, dass Ihre Website Skripts in der Reihenfolge ausführt, in der Sie sie einfügen. Außerdem wird der Header-Code ausgeführt werden, bevor die Seite geladen wird, während der Fußzeilencode danach ausgeführt wird.
Wenn Sie die Wahl haben und Ihnen die Website-Optimierung am Herzen liegt, kann das Verschieben von JavaScript in die Fußzeile Ihrer Website dazu beitragen, die Ladezeiten zu verkürzen. Einige Dienste werden Sie jedoch explizit auffordern, ihren Code zu Ihrem Header hinzuzufügen, um Ausführungsprobleme zu vermeiden.
Als Faustregel gilt: Wenn ein Dienst Sie darum bittet, empfehlen wir, seinem Rat zu folgen. Platziere andere JavaScript-Code-Snippets in der Fußzeile deiner WordPress-Site. CSS-Code geht 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 das gleiche Ziel erreichen, indem Sie entweder Dateien manuell ändern oder ein Plugin verwenden.
Beginnen wir mit dem Plugin-Ansatz.
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 die Kopf-, Fußzeilen- und Post-Injections Plugin.
Dieses Plugin gibt Ihnen viel Kontrolle darüber, wo in Ihrem Code Sie Ihre Code-Snippets hinzufügen möchten. Es bietet auch die Möglichkeit, verschiedene Skripte für mobile und Desktop-Renderings Ihrer Site hinzuzufügen.
Um das Plugin hinzuzufügen, gehen Sie zu Plugins > Neu hinzufügen in Ihrem Dashboard und verwenden Sie die Suchfunktion, um das Plugin zu finden. Klicken Sie auf Installieren und aktivieren Sie das Plugin.
Sobald das Plugin aktiv ist, können Sie direkt zu Einstellungen > Kopf- und Fußzeile. 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 Kopf- und Fußzeile Tab.
Stellen Sie für globalen Code sicher, dass Sie diese Snippets innerhalb des Auf jeder Seite Gebiet. Wenn Sie den Code jedoch nur zum Ausführen auf Ihrer Homepage benötigen, verwenden Sie die Nur auf der Startseite Möglichkeit.
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 Code-Snippets ü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.
Du kannst den Code direkt zu deinen aktiven Themes hinzufügen header.php oder footer.php Dateien. Sie finden diese Dateien im /public_html/wp-content/themes/ Verzeichnis, indem du den Ordner deines aktiven Themes öffnest und hineinschaust:
Sie können auf diese Dateien zugreifen über File TransFer-Protokoll (FTP) und bearbeiten Sie sie mit Ihrem bevorzugten Code-Editor. 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:
- Ein … kreieren Kinderthema für dein Thema. Auf diese Weise gehen keine Anpassungen verloren, wenn Sie das übergeordnete Design aktualisieren.
- Verwenden Sie Hooks, um den Code über Ihr . hinzuzufügen Funktionen.php Datei. 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 eine Designanpassung vornehmen möchten. Sie können auf die Themes Ihres Kindes zugreifen Funktionen.php Datei in ihrem Ordner innerhalb der /wp-content/themes Verzeichnis.
Öffne das Funktionen.php Datei in Ihrem Code-Editor. Um den gewünschten Code hinzuzufügen, müssen Sie entweder die 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
}
Du kannst den … benutzen wp_footer Haken statt wp_head wenn Sie den Code in Ihre Fußzeile einfügen möchten. Sie können auch den Namen der Funktion ändern (Testskript) falls Sie es wollen.
Wenn du mit dem Optimieren deines fertig bist Funktionen.php Datei, denken Sie daran, Ihre Änderungen zu speichern, und das war’s. Welcher Code Sie auch immer hinzugefügt haben, sollte jetzt funktionieren!
Abschluss
Viele Dienste von Drittanbietern wie Google Analytics oder Facebook Pixel erfordern, dass Sie Ihrer Website Code-Snippets hinzufügen, damit diese eine Verbindung herstellen können. Dies ist jedoch nur einer von vielen Fällen, in denen Sie Ihrer Kopf- und Fußzeile in WordPress Code hinzufügen müssen. Es lohnt sich also, zu wissen, wie es geht.
Es gibt zwei Möglichkeiten, wie Sie Ihrer Kopf- und Fußzeile Code-Snippets hinzufügen können. Sie können entweder ein Plugin wie ‚Head, Footer and Post Injections‘ verwenden oder Code-Snippets über Ihre Funktionen.php Datei.
Haben Sie Fragen zum Hinzufügen von Kopf- und Fußzeilencode in WordPress? Lassen Sie uns im Kommentarbereich unten darüber sprechen!