Code im (HTML-)Header oder Footer hinzufügen

Hier erfährst du kurz und knapp, wie du eigenen Code im HTML-Header oder -Footer deiner WordPress-Website unterbringst. Es führen wie immer viele Wege zum Ziel und gerne schauen wir uns gemeinsam ein paar Beispiele an. Du hast es eilig? Dann springe gerne direkt zu den ersten Code-Schnippseln.

Grundsätzlich kannst du die PHP Dateien deiner Website (header.php / footer.php) direkt bearbeiten oder in einem Child-Theme zusätzlich anlegen, wenn du eigene Codeanpassungen zu deiner Seite hinzufügen möchtest, die im HTML-Header oder Footer-Bereich erscheinen sollen. Du benötigst dazu Zugriff auf den Server via SFTP. Empfehlenswert ist es dennoch (je nach Umfang der gewünschten Funktion) kleine Anpassungen direkt in der functions.php oder als Snippet einzubinden.

Wenn es nun also darum geht, etwas eigenen Code zum Header oder Footer hinzuzufügen, kannst du die folgenden Codeschnippsel nutzen um deinen eigenen Code dazwischen zu platzieren. Die Wahl zwischen Header und Footer musst du je nach Anwendungsfall selbst entscheiden.

Quick-Tipp:
Je nach Setup deiner Seite kann es auch sein, dass dein Theme oder ein Plugin z.B. ein PageBuilder bereits eine Möglichkeit mit sich bringen, dort eigenen Code im Header oder Footer unterzubringen. Gerne kannst du auch solche Optionen nutzen. Behalte also im Hinterkopf, dass bei einem Themewechsel oder dem abschalten des genutzten Plugins, auch die eingetragenen Zeilen nicht mehr geladen werden können. Die nachfolgenden Beispiele sind dahingehend praktisch, weil die Integration unabhängig vom Parent-Theme in die functions.php vom Child-Theme eingetragen werden kann und so dein WordPress an der richtigen Stelle erweitert.

In der Zeile 5 beim markierten Text (###) kannst du deinen eigenen Code einfügen und die Ausgabe erfolgt dann jeweils im Header- und Fußbereich deiner Website.

eigenen Code im Header von WordPress hinzufügen

Im HTML-Header deiner Website finden sich verschiedene Bausteine zum Betrieb deiner Website. Manche dieser Bausteine müssen zu Beginn geladen werden, während andere aus Perfomance- und Geschwindigkeits-Gründen besser im Footer aufgehoben sind. Hier eine kleine Liste der häufigsten Elemente, welche du im Headerbereich so antriffst.

  • Link zum Favicon
  • Links zu Schriftarten
  • Links zu Stylesheets
  • Links zu Script-Dateien
  • Meta-Tags

Schriften, Stylings und Scripte können ebenso auch inline eingebunden sein und statt einem zu ladenden Link direkt ausgeführt werden. Das Favicon deiner WordPress Seite bearbeitest du z.B. besser direkt mit dem Gutenberg-Editor. Wenn es nun aber darum geht Scripte oder Stylings im Header deiner Seite anzupassen, bist du hier genau richtig. Mit dem folgenden Snippet kannst du deinen eigenen Code zum HTML-Header hinzufügen. Tausche dazu den Text ab ### mit deinem eigenen Code für den Header aus. Der Rest ist lediglich der „Rahmen“, damit der Inhalt auch an der richtigen Stelle geladen wird.

HTML-Header – functions.php / Snippet

/* dwp - eigener Code im Header */
add_action('wp_head', 'dwp_custom_header_code');
function dwp_custom_header_code(){
?>
### Hier dein eigener Code für den Header ###
<?php
};

eigenen Code im Footer von WordPress hinzufügen

Der HTML-Footer einer Website wird zuletzt geladen, deshalb findest du hier oft Dinge, die nicht sofort beim öffnen der Seite geladen werden müssen. Wie auch im Header, findest du hier Script-Dateien oder Stylesheets. Diese können als Link ausgegeben oder auch direkt inline ausgeführt werden. Der Footer eignet sich daher z.B. für Scripte, die nicht sofort benötigt werden oder im Header ggf. Ladeverzögerungen mit sich bringen würden. Beliebt sind hier u.A. Trackings-Codes oder andere externe Services.

Mit dem folgenden Snippet fügst du zum Footer deiner WordPress Seite eigenen Code hinzu.

HTML-Footer functions.php / Snippet

/* dwp - eigener Code im Footer */
add_action('wp_head', 'dwp_custom_footer_code');
function dwp_custom_footer_code(){
?>
### Hier dein eigener Code für den Footer ###
<?php
};

Pluginlösung

Was wäre WordPress ohne seine zahllosen Plugins. Natürlich gibt es auch für genau diese Aufgabe ein passendes und so kannst du u.A. mit Insert Headers and Footers by WPBeginner ganz einfach auch via Plugin deinen eigenen Code in den Header oder Footer (und auch Body) deiner Seite einbinden.


Beispiele

Wenn dir das bis hierhin zu theoretisch war, helfen dir evtl. ein paar kleine Beispiele zur Anwendung, ein besseres Bild von der Nutzung zu bekommen.

JavaScript im Footer

externe Links global & automatisch in einem neuen Tab öffnen

/* dwp - externe Links in neuem Tab öffnen */
add_action('wp_footer', 'dwp_external_links_blank');
function dwp_external_links_blank(){
?>
    <script type="text/javascript">
        jQuery(document).ready( function($) {
            $('a').each(function() {
            var a = new RegExp('/' + window.location.host + '/');
            if (!a.test(this.href)) {
                $(this).addClass('external').attr('target','_blank').attr('rel','noopener');
            }
            });
        });
    </script>
<?php
};

Weitere Beispiele folgen, bleib gespannt.

Was würdest du denn gerne als nächstes in deinem Website-Header oder -Footer unterbringen?

Erkunde weitere Beiträge

Schreibe einen Kommentar