WordPress stellt mehrere PHP-Vorlagendateien zusammen, um lesbare Inhalte für den Benutzer im Browser zu rendern.WordPress-Themes enthalten header.php-, footer.php-, single.php- (für Beiträge), page.php- (für Seiten) und sidebar.php-Dateien, die neuesten Themes verwenden zusätzliche Vorlagenabschnitte, um den Hauptinhalt zu generieren.
Alle diese Vorlagen werden ordentlich zusammengestellt und angezeigt, wenn Sie die WordPress-Seite in Ihrem Browser anzeigen.Normalerweise müssen Sie diese Dateien nicht ändern, und es sind Plugins verfügbar, um benutzerdefinierte Funktionen einzufügen.In einigen Fällen müssen Sie jedoch Code in die Kopf- und Fußzeilen von WordPress einfügen.
In diesem Artikel erklären wir, wie es ohne und mit Plugins geht.
Warum Code in Kopf- oder Fußzeile einfügen?
Die Kopf- und Fußzeilenabschnitte sind praktisch für verschiedene Code-Integrationen und das Hinzufügen zusätzlicher Funktionen zu Ihrer Website.Hier sind einige der besten Beispiele, bei denen Sie Code in die Kopf- und Fußzeile Ihrer WordPress-Site einfügen müssen.
Fügen Sie automatisierten Anzeigencode von Google AdSense oder Anzeigencode für Masthead-Gebote aus einem anderen Anzeigenprogramm ein.
Installieren Sie den Google Analytics- und Facebook-Pixel-Tracking-Code.
Fügen Sie Captcha aus Bing Webmaster Tools, Google Search Console, Baidu, Yandex und jeder anderen Plattform wie Pinterest ein.
Fügen Sie der Kopfzeile benutzerdefiniertes CSS hinzu, z. B. Google Fonts-Stylesheets und JavaScript in der Fußzeile.
Fügen Sie benutzerdefinierte Komponenten wie Breadcrumbs in die Kopfzeile ein, wenn Sie Plugins wie Yoast SEO verwenden.
Wie Sie sehen können, wird die Liste je nach Bedarf länger.
Code zu Kopf- und Fußzeilenabschnitten in WordPress hinzufügen
Standardmäßig bietet WordPress keine Option zum Einfügen von Code in Kopf- und Fußzeilenabschnitte.Die einfache Möglichkeit besteht darin, die Datei direkt zu bearbeiten und Ihren Code einzufügen.Dafür stehen aber auch Plugins zur Verfügung.In diesem Artikel erklären wir zwei Möglichkeiten, Code zu den Kopf- und Fußzeilenabschnitten einer beliebigen WordPress-Site hinzuzufügen.
Bearbeiten Sie die Dateien header.php und footer.php des WordPress-Themes manuell.
Verwenden Sie das Plugin Kopf- und Fußzeile einfügen, um Code ohne Dateibearbeitung hinzuzufügen.
Außerdem erklären wir die Verwendung einiger Designs zum Einfügen von Code in Kopf- und Fußzeilen mit den Hooks wp_head und wp_footer.
Fügen Sie WordPress-Kopf- und Fußzeilencode manuell ein
Diese Option erfordert die Bearbeitung der Datei header.php oder footer.php in Ihrem WordPress-Site-Theme und ist möglicherweise nicht anfängerfreundlich.
Beginnen Sie zunächst damit, Code-Snippets vorzubereiten oder von Websites Dritter zu kopieren.Sobald Sie Ihren Kopf- und Fußzeilencode fertig haben, bewegen Sie den Mauszeiger über das Menü „Darstellung“ im Website-Dashboard und klicken Sie auf die Registerkarte „Design-Editor“.
Ignorieren Sie alle Warnmeldungen, die Sie erhalten, und wählen Sie Ihr aktives Thema aus der Dropdown-Liste "Zu bearbeitendes Thema auswählen:" aus.
Wählen Sie die Datei „header.php“ oder „footer.php“ rechts neben der aktuellen Ansicht aus.
Stellen Sie für die Kopfzeile sicher, dass Sie den Code unter dem schließenden ""-Tag einfügen, dann sollte der Code für die Fußzeile unter "" Etikett.Manchmal müssen Sie möglicherweise auch Code vor dem schließenden Tag einfügen.
Klicken Sie abschließend auf die Schaltfläche „Datei aktualisieren“, um die Änderungen an Ihrer Website mit dem hinzugefügten Snippet zu speichern.
Stellen Sie sicher, dass Sie Ihre Website testen und überprüfen Sie, ob die von Ihnen angeschlossenen Funktionen wie erwartet funktionieren.
Fügen Sie WordPress-Kopf- und Fußzeilencode mithilfe von Plugins ein
Standardmäßig erlaubt Ihnen WordPress, benutzerdefiniertes CSS zu Ihrer Website im Abschnitt „Darstellung“ > „Anpassung“ > „Zusätzliches CSS“ hinzuzufügen.Sie können in diesem Abschnitt jedoch kein JavaScript einfügen.Es gibt viele kostenlose Plugins und Plugins zum Einfügen von Code, hier erklären wir die Verwendung von "WPBeginner Insert Header and Footer".Das Plugin hat eine supereinfache Oberfläche, die Anfänger leicht verwenden können.
Installieren und aktivieren Sie zunächst das Plugin „Kopf- und Fußzeile einfügen“.Bewegen Sie im Dashboard Ihrer WordPress-Site den Mauszeiger über das Menü Plugins und klicken Sie auf Neu hinzufügen.
Verwenden Sie die Such-Plugin-Funktion, um „Kopf- und Fußzeile einfügen“ zu finden, und klicken Sie auf die Schaltfläche „Jetzt installieren“.Nachdem der Installationsvorgang abgeschlossen ist, „aktivieren“ Sie das Plugin.
Installieren Sie das Plugin
Gehen Sie zum Menü Einstellungen, suchen Sie das Untermenü Kopf- und Fußzeile einfügen und klicken Sie darauf.
Das Plugin bietet drei Felder zum Platzieren von Skripten in Kopf-, Körper- und Fußzeile, um Code einzufügen.Bis dahin weisen Drittanbieter wie Google Analytics Sie an, auf welcher Box Sie ihre Snippets platzieren sollen.Stellen Sie andernfalls sicher, dass Sie genau wissen, wo Sie den Code einfügen möchten.
Fügen Sie diese Codes in die entsprechenden Codes ein und klicken Sie auf Speichern, um Ihre Site-Änderungen abzuschließen.
Codeskripte werden jetzt automatisch an den spezifischen Ort geladen, an dem die Site ausgeführt wird.
Sie können den Code jederzeit weiter bearbeiten und das Plugin aktiv lassen, da seine Deaktivierung das Hinzufügen benutzerdefinierter Funktionen verhindert und alle zuvor zu Ihrer Website hinzugefügten Skripte deaktiviert.
Code mit Plugins einfügen
Beachten Sie, dass, wenn das Plugin "Kopf- und Fußzeile einfügen" versehentlich deaktiviert oder versehentlich deinstalliert wird, Ihr Code in Ihrer Site-Datenbank verbleibt.Installieren oder aktivieren Sie das Plugin einfach neu, damit früherer Code funktioniert.Außerdem wird empfohlen, dass Sie den Cache Ihrer WordPress-Site löschen, wenn Sie Änderungen an den Kopf- und Fußzeilen-Code-Snippets im Plugin hinzufügen und speichern.
Bearbeiten Sie Kopf- und Fußzeilen mit Designs
Unabhängig davon, ob Sie Ihre Designdateien manuell bearbeiten oder ein Plugin verwenden, wirkt sich der von Ihnen eingefügte Code auf Ihre gesamte Website aus.Sie müssen Plugins wie HTML-Snippets einfügen verwenden oder benutzerdefinierte HTML-Blöcke im Gutenberg-Editor ausprobieren, um benutzerdefinierten Code nur in bestimmte Beiträge oder Seiten einzufügen.Mit den neuesten Themen wie GeneratePress Premium und Astra Pro können Sie jedoch Code in Kopf- und Fußzeilen einfügen.Diese Themen verwenden die Standard-Hooks wp_head und wp_footer und ermöglichen die Anwendung benutzerdefinierter Einschränkungen.Beispielsweise können Sie Breadcrumbs einfach in einen einzelnen Beitrag einfügen, ohne die Seite zu beeinträchtigen.
Hier verwenden wir das Astra Pro-Design für Anweisungen, Sie können ähnliche Schritte im GeneratePress Premium-Design mit der Option „Elemente“ ausführen.
Gehen Sie nach der Installation des Astra Pro-Add-Ons zu Darstellung > Astra-Optionen.
Aktivieren Sie die Option Benutzerdefiniertes Layout und klicken Sie auf den Link Einstellungen für diese Option.
Klicken Sie auf die Schaltfläche "Neu hinzufügen" und fügen Sie den Code, den Sie einfügen möchten, in das Feld ein.
Klicken Sie im Abschnitt „Benutzerdefinierte Layouteinstellungen“ auf das Dropdown-Menü „Layout“ und wählen Sie die Option „Hooks“ aus.
Fügen Sie den Header-Code in das Astra-Design ein
Wählen Sie in der Dropdown-Liste Aktion wp_head für den Kopfzeilenabschnitt und wp_footer für den Fußzeilenabschnitt aus.
Wenn Sie nur ein Snippet verwenden, lassen Sie „Priorität“ leer.Wenn Sie jedoch mehrere Codes an derselben Hook-Position einfügen, achten Sie darauf, die Prioritätsreihenfolge zum Einfügen der Codes festzulegen.Sie können 10, 20, 30 usw. als Priorität verwenden, die niedrigste hat Vorrang vor den anderen.
Geben Sie bei Bedarf Details zum oberen und unteren Abstand in Pixel an.
Wählen Sie im Dropdown-Menü „Anzeigen auf“, wo der Code angezeigt werden soll.Sie können bestimmte Beiträge, Seiten, Kategorien auswählen oder Ihre gesamte Website einfügen oder bestimmte Beitragstypen wie Beiträge, Seiten oder jeden benutzerdefinierten Beitragstyp einfügen, der auf Ihrer Website verwendet wird.
Wählen Sie in der Dropdown-Liste Benutzerrolle die Benutzerrolle aus, für die der Code aktiv sein soll.
Sobald alle Einstellungen abgeschlossen sind, klicken Sie auf die Schaltfläche Veröffentlichen, damit Ihre Änderungen wirksam werden.
Gründe für die Verwendung des Plugins Kopf- und Fußzeile einfügen
Das Bearbeiten von Designdateien oder die Verwendung eines benutzerdefinierten Designs hat so viele Nachteile, dass Sie beim Plugin-Ansatz bleiben werden.Hier sind einige der Vorteile, die Sie aus der Verwendung des Plugins ziehen können, außer dass Sie vielleicht kein Technikfreak oder ein Anfänger sind.
Da der Plug-in-Store Skripte an einem separaten Ort hinzufügt, müssen Sie sich keine Gedanken über das Löschen von Code während Upgrades, Updates oder Themenwechseln machen.Sie benötigen auch keine untergeordneten Themen, da das Plugin unabhängig vom Thema Ihrer Website funktioniert.
Es macht das Hinzufügen von benutzerdefiniertem Code in Kopf- und Fußzeilen einfach und schnell.Darüber hinaus hilft dies, die Organisation von Code-Snippets an einem einzigen Ort beizubehalten.
Es ist möglich, dass Fehler auftreten, wenn Sie sich für die Bearbeitung Ihres WordPress-Themas entscheiden, daher kann die Verwendung eines Plugins helfen, solche Fehler zu vermeiden, zu verhindern und zu vermeiden.
Abschließende Gedanken
In vielen Fällen müssen Sie das Aussehen ändern, die Art und Weise ändern oder andere Funktionen zu Ihrer WordPress-Site hinzufügen.Wenn Sie technisch nicht versiert sind, denken Sie in jedem Fall daran, die Plugin-Methode zum Einfügen von Kopf- und Fußzeilencode zu verwenden.Während Themen wie Astra und GeneratePress Ihnen dabei helfen können, müssen Sie die Premium-Version kaufen.Außerdem kann es das Ändern von Themen erschweren. An diesem Punkt müssen Sie nach Plugins suchen, die Sie verwenden können.
