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

Die WordPress-Plattform leistet hervorragende Arbeit, um Personen ohne Programmiererfahrung dabei zu helfen, nahezu jede Art von Funktionalität zu implementieren. In einigen Fällen müssen Sie jedoch Kopf- und Fußzeilencode in WordPress hinzufügen, damit Dienste von Drittanbietern ihre eigene Funktionalität einbetten können.

Der typischste Anwendungsfall dafür ist die Integration von Google Analytics in Ihre Website. Es gibt jedoch noch viele andere Gründe, warum Sie dies tun möchten – Sie wissen vielleicht bereits, warum Sie diese Aufgabe ausführen möchten.

In diesem Tutorial zeigen wir Ihnen einige Möglichkeiten, Kopf- und Fußzeilencode in WordPress hinzuzufügen. Zunächst werden wir uns jedoch die Gründe ansehen, aus denen Sie dies überhaupt tun möchten.

Was Sie mit zusätzlichem Code in der Kopf- und Fußzeile Ihrer Website erreichen können

Eine Standard-Website zerfällt in einige verschiedene Komponenten, ähnlich wie ein Textdokument:

• Header. Der Header Ihrer Website enthält eine Reihe von "vorab geladenen" Elementen und Details zu Ihrem SSL-Zertifikat (Secure Sockets Layer), Verschlüsselung, JavaScript und mehr.
• Fusszeile. Dies funktioniert ähnlich wie Ihre Kopfzeile, landet aber stattdessen am Ende der Seite.
• Körper. Die meisten Funktionen, die Sie auf Ihrer Website implementieren, befinden sich im „Körper“ Ihres Inhalts. Dies ist der Hauptfokus von fast allem im WordPress-Dashboard, und der Textkörper repräsentiert, was Sie auf der Seite sehen.

Server laden Seiten linear – den Kopf, den Körper und dann die Fußzeile. Das bedeutet, dass der Code in der Kopfzeile zuerst geladen wird, aber der Code in der Fußzeile erst nach allem anderen geladen wird.

Alltägliche Anwendungsfälle für Code-Snippets

Bei Tools für soziale Medien und Suchmaschinenoptimierung (SEO) müssen Sie häufig Header-Code in WordPress hinzufügen. Dies liegt daran, dass diese Dienste beim Laden einer Website eine gewisse Priorität haben müssen, um alles zu protokollieren, was danach kommt.

Ähnlich verhält es sich mit CSS-Code, da dieser bestimmt, wie Ihre Website aussehen wird. Wenn dies in der Fußzeile wäre, würden Sie eine Reihe von Layoutänderungen sehen, bevor Sie das Styling sehen.

Während JavaScript uns hilft, moderne Websites zu erstellen, anzuzeigen und mit ihnen zu interagieren, ist es keine notwendige Komponente (im technischen Sinne). Daher bietet Ihnen JavaScript in der Fußzeile in vielen Fällen eine bessere Leistung, und wenn Sie die haben Option, sollten Sie mit ihm gehen.

Tatsächlich gibt es noch viel mehr Anwendungsfälle, und wir behandeln sie ausführlicher in einem anderen Artikel im WPKube-Blog. In einer typischen WordPress-Situation haben Sie jedoch keinen Zugriff auf die Kopf- und Fußzeilenelemente Ihrer Website. Dazu müssen Sie sich entweder die Hände schmutzig machen oder externe Hilfe in Anspruch nehmen.

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

Im weiteren Verlauf des Artikels werden wir zwei Möglichkeiten zum Hinzufügen von Kopf- und Fußzeilencode in WordPress behandeln. Beide sind einfach, aber wir bevorzugen eines gegenüber dem anderen:

1. Sie können ein Plug-in verwenden, um den Code in die richtigen Bereiche Ihrer Website einzufügen.
2. Sie können Code zu Ihrer functions.php -Datei hinzufügen und benötigen zusätzliche Kenntnisse darüber, wie Sie auf die Dateien Ihrer Website zugreifen.

Wir werden uns zuerst die Plugin-Option ansehen, aus Gründen, die wir in Kürze erläutern werden.

1. Verwenden Sie ein Plugin, um Code zu Ihrer Kopf- und Fußzeile hinzuzufügen

Wenn Sie etwas in WordPress implementieren möchten, sollte ein Plugin die Arbeit für Sie erledigen. Wir würden ein Plugin in den meisten Fällen als Standard für WordPress-Websites betrachten. Wenn Sie also Kopf- und Fußzeilencode in WordPress hinzufügen möchten, ist das Embed Code-Plugin ideal:

Dies ist eine Lösung, die unsere Schwesterseite DesignBombs entwickelt, und die Ihnen eine schnelle und problemlose Möglichkeit bietet, Code entweder zu Ihrer gesamten Seite, zu bestimmten Seiten oder Beiträgen und sogar zu benutzerdefinierten Beitragstypen hinzuzufügen.

Um es zu verwenden, installieren und aktivieren Sie das Plugin auf die typische WordPress-Weise. Wenn dieser Vorgang abgeschlossen ist, sehen Sie auf dem Dashboard eine neue Option Einstellungen > Code einbetten:

Auf diesem Bildschirm sehen Sie zwei Textbereiche: einen für den Kopf und einen für die Fußzeile. Sie erhalten sogar einen Hinweis darauf, wo sich der von Ihnen eingegebene Code in Ihrem HTML befinden wird:

Die Verwendung dieses Tools ist sehr einfach. Nachdem Sie Ihren Code eingegeben haben, speichern Sie Ihre Änderungen. Dadurch wird hier auf globaler (dh standortweiter) Ebene beliebiger Code hinzugefügt. Möglicherweise möchten Sie jedoch nur Code zu einem einzelnen Beitrag oder einer einzelnen Seite hinzufügen. Sie können dies über den Blockeditor tun – die Metabox und Optionen, die Sie benötigen, befinden sich am unteren Rand des Bildschirms:

Einbettungscode ist zwar unsere bevorzugte Methode und Sie sollten sie für ein Minimum an Aufwand verwenden, aber es gibt auch einen anderen Weg, mit dem Sie die gewünschten Ergebnisse erzielen können. Diesen schauen wir uns als nächstes an.

2. Fügen Sie Ihrer functions.php -Datei Code-Snippets hinzu

Jede WordPress-Installation kann auf eine dedizierte functions.php -Datei in ihrem obersten oder themenspezifischen Verzeichnis zugreifen. Auf diese Weise können Sie Codeschnipsel hinzufügen, um WordPress dabei zu helfen, mehr Funktionen zu nutzen. Es gibt jedoch einige Voraussetzungen, die Sie verstehen und erfüllen müssen, bevor Sie beginnen:

• Sie greifen auf Ihre WordPress-Kerndateien – und damit auf die Datei functions.php – über das Secure File Transfer Protocol (SFTP) zu. Daher benötigen Sie Kenntnisse darüber, wie dies funktioniert, um die Dateien Ihrer Website zu finden und mit ihnen zu arbeiten.
• Wir empfehlen Ihnen auch, ein untergeordnetes Design zu verwenden, um Ihre Änderungen beizubehalten, wenn das betreffende Design ein Update erhält.
• Sie benötigen zumindest praktische Kenntnisse über WordPress-Hooks, -Aktionen und -Filter. Darüber hinaus möchten Sie verstehen, wie WordPress über diese Hooks auf Ihre Kopf- und Fußzeile zugreift.

Wenn es um die Verwendung von SFTP geht, hat WPKube eine Auswahl an Artikeln, die Sie unbedingt lesen sollten:

• Ein Leitfaden für Anfänger zum Secure File Transfer Protocol (SFTP)
• So verwenden Sie FileZilla: Eine Schritt-für-Schritt-Anleitung
• Ein Leitfaden für Anfänger zu WordPress-Dateiberechtigungen

Möglicherweise möchten Sie sich auch die Hook-Bibliothek von WordPress Developer ansehen, insbesondere die Einträge für wp_head und wp_footer , obwohl dies optional ist, da Sie sie nicht auf eine schwerfällige Weise verwenden werden.

Von hier aus dauert der Prozess einige Schritte. Öffne zuerst den Server deiner Website in deinem SFTP-Client und navigiere dann zu wp-content/themes . Öffnen Sie hier das Verzeichnis Ihres aktuellen Designs und suchen Sie nach der entsprechenden Datei functions.php :

Sie sollten diese Datei in Ihrem bevorzugten Text- oder Code-Editor öffnen. Darin können Sie die folgende Snippet-Vorlage platzieren:

 add_action( 'wp_head', '<SNIPPET_NAME>' ); function <SNIPPET_NAME>() { ?> <!-- Place your HTML code or other script here. --> <?php }

Kurz gesagt, dies fügt WordPress einen Aktionshaken hinzu, der wie immer Sie ihn nennen, als <SNIPPET_NAME> . Innerhalb der Funktion selbst ersetzen Sie die Kommentarzeile (dh die Zeile, die mit <!-- beginnt) oder geben sie darunter ein. Wenn Sie der Fußzeile Code hinzufügen möchten, ersetzen Sie 'wp_head' durch 'wp_footer' und weiter wie gewohnt.

Sobald Sie Ihre Änderungen gespeichert haben, sollte dies für Ihre Website gelten. Abhängig vom hinzugefügten Code sollte etwas auf der Frontend-Seite selbst, in Ihrem WordPress-Dashboard oder sogar in einem Dashboard eines Drittanbieters sichtbar sein.

Einpacken

Während WordPress keine typischen Programmierkenntnisse benötigt, um es vollständig nutzen zu können, müssen Sie in einigen Fällen möglicherweise Kopf- und Fußzeilencode in WordPress hinzufügen. Beispielsweise möchten Sie möglicherweise Analysen verwenden, was ein beliebter Grund ist, die Dateien Ihrer Website zu knacken.

In diesem Beitrag wurden zwei verschiedene Möglichkeiten zum Hinzufügen von Code zu Ihrer Kopf- und Fußzeile untersucht:

• Mit einem Plugin wie Embed Code können Sie über das Dashboard Kopf- und Fußzeilencode zu WordPress hinzufügen. Als solches müssen Sie einfach kopieren und einfügen, ohne sich Gedanken über den Zugriff auf Ihren Server machen zu müssen.
• Wenn Sie jedoch über das entsprechende Know-how verfügen, können Sie versuchen, ein Snippet zu Ihrer Datei functions.php hinzuzufügen. Sie benötigen SFTP-Kenntnisse und ein wenig Erfahrung mit Ihren WordPress-Dateien, aber dieser Ansatz ist genauso gut wie die Plugin-Option.

Welche Methode werden Sie verwenden, um Kopf- und Fußzeilencode in WordPress hinzuzufügen? Lassen Sie es uns im Kommentarbereich unten wissen!