Unter der Vielzahl an Content Ma­nage­ment Systemen (CMS) ist WordPress das am weitesten ver­brei­te­te CMS. Eine WordPress-Site besteht aus mehreren Kom­po­nen­ten:

  • WordPress Core: die ei­gent­li­che WordPress-In­stal­la­ti­on
  • Theme: ein Grund­ge­rüst zur dy­na­mi­schen Dar­stel­lung der Inhalte
  • Plugins: erweitern die Kern­funk­tio­na­li­tät von WordPress
  • Inhalte: vom Benutzer angelegt und in der Datenbank ge­spei­chert

Für ge­wöhn­lich muss man kleine Än­de­run­gen vornehmen, um eine wirklich er­folg­rei­che WordPress-Site auf die Beine zu stellen. Eine der häu­figs­ten An­pas­sun­gen ist das Einbinden externer Scripte. Oft müssen diese im WordPress-Footer in­te­griert werden. Wie genau das geht und was es dabei zu beachten gilt, erklären wir in diesem Artikel.

KI-Assistent kostenlos – Ihr smarter All­tags­hel­fer
  • DSGVO-konform & sicher gehostet in Deutsch­land
  • Pro­duk­ti­vi­tät steigern – weniger Aufwand, mehr Output
  • Direkt im Browser starten – ohne In­stal­la­ti­on

Was ist der WordPress-Footer, und welche Elemente enthält er?

Generell ist ein Footer der Fuß­be­reich einer Seite. Der Footer si­gna­li­siert dem Besucher beim Scrollen, dass er am Ende der Seite an­ge­kom­men ist. Der WordPress-Footer enthält zwei Arten von Elementen, auf welche wir im Folgenden eingehen:

  1. Sichtbare Elemente
  2. Un­sicht­ba­re Elemente

Sichtbare Elemente im WordPress-Footer

Anders als der WordPress-Header enthält der WordPress-Footer für ge­wöhn­lich sekundäre und damit weniger pro­mi­nen­te visuelle Elemente. Dies macht Sinn, da der Besucher den Header als ersten visuellen Eindruck auf der Site wahrnimmt. Ein gut auf­ge­bau­ter Header dient als Magnet, um Besucher auf der Site zu fesseln. Im Footer finden sich oft die folgenden visuellen Elemente:

  • Links zu se­kun­dä­ren Seiten, wie Impressum, Kontakt, etc.
  • Copyright-Notiz
  • „Nach oben scrollen“-Link
Tipp

Starten Sie mit einer eigenen WordPress-Site bei IONOS durch. Pro­fes­sio­nel­les WordPress-Hosting aus Deutsch­land.

Un­sicht­ba­re Elemente im WordPress-Footer

Anders als der WordPress-Footer umfasst der Header eine Reihe von Meta-Tags. Diese müssen zum Großteil zwingend im HTML-Head-Element enthalten sein. Moderne Metadaten werden jedoch auch außerhalb des HTML-Head verwendet. Dabei kommen vor allem Script-Elemente zum Einsatz. Diese werden im WordPress-Footer ein­ge­bun­den.

Bei externen Script-Dateien gibt es eine weitere Be­son­der­heit zu beachten: im HTML-Head ein­ge­bun­de­ne Script-Dateien blo­ckie­ren nor­ma­ler­wei­se das Laden der Seite. Daher gab es tra­di­tio­nell die Emp­feh­lung, externe Script-Elemente nach Mög­lich­keit vor dem schlie­ßen­den </body>-Tag zu plat­zie­ren. In WordPress ent­spricht dies dem Einbinden der Scripte im Footer.

Tipp

Heut­zu­ta­ge kennt das Script-Element die modernen Attribute ‚async‘ und ‚defer‘. Mit diesen lassen sich Script-Dateien einbinden, ohne das Laden der Site zu blo­ckie­ren.

Wenn wir von Scripten sprechen, müssen wir dif­fe­ren­zie­ren. Denn Scripte können sowohl aus externen Dateien geladen als auch auf der Seite ein­ge­bet­tet werden. Ferner findet das Script-Element heut­zu­ta­ge für gänzlich neue Zwecke Ver­wen­dung. Dabei kommt das type-Attribut zum Einsatz, um den Typ der ein­ge­bet­ten Daten zu be­schrei­ben. So lassen sich Ap­pli­ka­ti­ons- und Metadaten auf einer Seite einbetten. Hier eine Übersicht häufig zum Einsatz kommender Script-Elemente:

Script-Element Be­schrei­bung Attribute
Verweis auf Script-Datei externes, aus­führ­ba­res Script src-Attribut mit URL
Ein­ge­bet­te­tes Script ein­ge­bet­te­tes, aus­führ­ba­res Script kein src-Attribut
JSON-LD Schema-Markup ein­ge­bet­te­te, nicht-aus­führ­ba­re Metadaten type="ap­pli­ca­ti­on/ld+json"
JSON-Daten ein­ge­bet­te­te, nicht-aus­führ­ba­re Ap­pli­ka­ti­ons-Daten type="ap­pli­ca­ti­on/json"

Wie kann man den WordPress-Footer be­ar­bei­ten?

Es bieten sich die folgenden beiden Wege an, um zu­sätz­li­chen Code im WordPress-Footer zu plat­zie­ren:

  1. Ein Plugin einsetzen
  2. Den Theme-Code mo­di­fi­zie­ren

Beide Methoden haben Vor- und Nachteile, welche wir in der folgenden Übersicht für Sie zu­sam­men­fas­sen:

Methode Vorteil Nachteil
Plugin einsetzen einfache Bedienung Code-Snippets werden in Datenbank ge­spei­chert; ggf. mangelnde Kontrolle; kann Per­for­mance-Probleme ver­ur­sa­chen
Theme mo­di­fi­zie­ren Code-Snippets werden Teil der Codebase; visuelle Än­de­run­gen möglich; perfekte Kontrolle auch für komplexe An­wen­dungs­fäl­le benötigt Be­ar­bei­ten des Theme-Codes und Coding-Kennt­nis­se
Managed Hosting für WordPress
Erstellen Sie Ihre Website mit AI, wir über­neh­men den Rest
  • Keine Vor­kennt­nis­se nötig dank be­nut­zer­freund­li­cher AI-Tools
  • Voll­stän­dig anpassbar mit Themes und Plugins
  • Einfache Updates und minimaler Admin-Aufwand

Ein Plugin einsetzen, um die WordPress-Fußzeile zu be­ar­bei­ten

Um den Footer zu be­ar­bei­ten existiert im WordPress-Ökosystem eine Reihe von Plugins. Diese eignen sich haupt­säch­lich dazu, un­sicht­ba­re Elemente in den WordPress-Footer ein­zu­fü­gen. Hingegen sind sie zum Ändern visueller Elemente meist nicht geeignet. Hier eine Übersicht bekannter Plugins zum Be­ar­bei­ten des Footers in WordPress:

Wir zeigen im Folgenden Schritt für Schritt, wie Sie das Plugin „Header and Footer Scripts“ nutzen, um zu­sätz­li­chen Code im WordPress-Footer zu plat­zie­ren:

Bild: Neues WordPress-Plugin installieren
Wählen Sie „Plugins“ aus dem Menü links und klicken Sie dann auf „In­stal­lie­ren“.
Bild: Header and Footer Scripts Plugin suchen
Geben Sie in das Textfeld rechts „Header and Footer Scripts“ ein.
Bild: Header and Footer Scripts Plugin installieren
Klicken Sie in den Such­ergeb­nis­sen auf das Plugin und dann auf „Jetzt in­stal­lie­ren“.
Bild: Zum Header and Footer Scripts Plugin navigieren
Wählen Sie „Ein­stel­lun­gen“ aus dem Menü links und klicken Sie dann auf „Header and Footer Scripts“.
Bild: Ein Schema-Markup Element in den WordPress-Footer einfügen
Kopieren Sie den Code, welchen Sie in den WordPress-Footer einfügen möchten, in das Textfeld „Scripts in footer“ und klicken Sie dann auf „Save settings“.
New call-to-action

Den Theme-Code mo­di­fi­zie­ren, um die WordPress-Fußzeile zu be­ar­bei­ten

Ein WordPress-Theme ist das Grund­ge­rüst für die Dar­stel­lung der Inhalte einer WordPress-Site. Das Be­ar­bei­ten des Themes bietet volle Kontrolle über den Footer; es lassen sich sowohl un­sicht­ba­re Elemente als auch visuelle Elemente hin­zu­fü­gen, entfernen und mo­di­fi­zie­ren.

Wir kon­zen­trie­ren uns im Folgenden auf un­sicht­ba­re Elemente. Denn Än­de­run­gen an visuellen Elementen sind abhängig vom ein­ge­setz­ten Theme; ins­be­son­de­re müssten wir bei den Er­klä­run­gen Style­sheets mit ein­be­zie­hen. Es gibt jedoch eine Ausnahme: wenn Sie sich gut mit HTML- und PHP-Code auskennen, können Sie ohne weiteres ein visuelles Element entfernen.

Möchten Sie Än­de­run­gen am Theme vornehmen, lohnt es sich meist, ein Child-Theme zu erstellen. Dies ga­ran­tiert, dass die Än­de­run­gen Update-sicher sind und sich bei Bedarf leicht rück­gän­gig machen lassen. Der Nutzen wiegt den ge­ring­fü­gig höheren Aufwand auf.

Greifen Sie auf die folgenden Methoden zurück, um den WordPress-Footer zu be­ar­bei­ten:

  1. Code in der Template-Datei footer.php mo­di­fi­zie­ren
  2. Zu­sätz­li­che Funk­tio­nen in der Datei functions.php anlegen
Methode Vorteil Nachteil
Code in footer.php hin­zu­fü­gen Wirk­prin­zip gut nach­voll­zieh­bar; Kontrolle über die Rei­hen­fol­ge der Scripte; auch visuelle Än­de­run­gen lassen sich umsetzen Än­de­run­gen werden hart­ko­diert; Risiko, bei mehreren Än­de­run­gen un­über­sicht­li­chen Code zu erzeugen
Funk­tio­nen in functions.php anlegen saubere Trennung von Dar­stel­lung und Funk­tio­na­li­tät; de­tail­lier­te Kontrolle über ein­ge­bun­de­ne Script-Tags Funk­ti­ons­wei­se kann Laien verwirren; höhere Kom­ple­xi­tät

Schauen wir uns zunächst die generelle Struktur einer modernen HTML-Seite an. Viele WordPress-Themes folgen diesem Muster mit leichten Va­ria­tio­nen. Wir weisen in den Kom­men­ta­ren auf die WordPress-spe­zi­fi­schen Muster hin:

<!-- Hier beginnt `header.php` -->
<html>
    <head>
        <!-- Unsichtbare Elemente im HTML-Head -->
    </head>
    <body>
        <header>
            <!-- Sichtbare Elemente im Kopfbereich -->
        </header>
        <!-- Hier endet `header.php` -->
        <main>
            <!-- Sichtbare Elemente im zentralen Bereich -->
        </main>
        <!-- Hier beginnt `footer.php` -->
        <footer>
            <!-- Sichtbare Elemente in der Fußzeile -->
        </footer>
            <!-- Unsichtbare Elemente am Ende des Dokuments -->
    </body>
</html>
<!-- Hier endet `footer.php` -->

Ein HTML-Dokument besteht aus den beiden Elementen<head> und <body>. Das <body>-Element enthält in unserem Beispiel die Elemente <header>, <main> und <footer>. Innerhalb eines WordPress-Themes ist diese Elemente-Struktur über mehrere Template-Dateien verteilt. Fast alle Themes setzen dabei auf die Dateien header.php und footer.php, um den Header bzw. Footer zu kodieren.

Code in footer.php mo­di­fi­zie­ren

Die wohl di­rek­tes­te Methode, Mo­di­fi­ka­tio­nen am WordPress-Footer vor­zu­neh­men, ist das Be­ar­bei­ten der Template-Datei ‚footer.php‘. Schauen wir uns am Beispiel des of­fi­zi­el­len WordPress-Theme „Twen­tyT­wen­ty“ an, wie eine typische footer.php-Datei aufgebaut ist. Wir stellen den Inhalt der Datei hier verkürzt dar:

<footer id="site-footer" role="contentinfo" class="header-footer-group">
        <!-- Sichtbare Elemente stehen hier -->
        </footer><!-- #site-footer -->
        <?php wp_footer(); ?>
        <!-- Unsichtbare Elemente werden hier ausgegeben -->
    </body>
</html>
  1. Die footer.php beginnt mit einem öffnenden <footer>-Tag.
  2. Darauf folgen visuelle Elemente, sowie das schlie­ßen­de </footer>-Tag.
  3. An­schlie­ßend folgt der Aufruf des WordPress-Hooks wp_footer

Hier werden dynamisch weitere Elemente eingefügt — mehr dazu im Verlauf des Artikels.

  1. Zu guter Letzt folgen schlie­ßen­de </body>- und </html>-Tags.

Der WordPress-Footer des Twen­tyT­wen­ty-Themes enthält ab Werk den Text „Powered by WordPress“. Bei­spiels­hal­ber werden wir diesen aus der footer.php entfernen. Dafür editieren wir die Datei und lo­ka­li­sie­ren den folgenden Code:

<p class="powered-by-wordpress">
    <a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentytwenty' ) ); ?>">
        <?php _e( 'Powered by WordPress', 'twentytwenty' ); ?>
    </a>
</p><!-- .powered-by-wordpress -->

Wenn wir die be­tref­fen­den Code-Zeilen löschen und die Datei speichern wird der Text auf der Seite nicht länger angezeigt. Vorsicht dabei! Denn der WordPress-Footer wird auf jeder Seite ein­ge­bun­den. Ein Fehler bei der Änderung wirkt sich auf die komplette Site aus. Sie sollten auf jeden Fall vorher eine Kopie der Datei anlegen.

Oft ist es einfacher und weniger riskant, eine Zeile CSS hin­zu­zu­fü­gen, anstatt den PHP-Code zu mo­di­fi­zie­ren. Jedoch funk­tio­niert das nur dann, wenn das Theme sauber gebaut ist. Im Falle des Twen­tyT­wen­ty-Theme verbergen wir den Text mit diesem CSS-Code:

#site-footer .powered-by-wordpress {
    display: none;
}

Funk­tio­nen in functions.php anlegen

Die Datei functions.php ist eine spezielle Theme-Datei, welche Code für An­pas­sun­gen des Themes und der WordPress-Site enthält. Sie dient unter anderem als Ein­stiegs­punkt für die dy­na­mi­sche Injektion von Code im WordPress-Footer. Dabei wird der wp_footer-Hook mit eigens de­fi­nier­ten Funk­tio­nen verknüpft: arbeitet der Hook, werden die Funk­tio­nen aus­ge­führt. Schauen wir uns ein paar Beispiele an.

Zunächst möchten wir einen Block mit Schema-Markup-Metadaten auf der WordPress-Start­sei­te einbinden. Dafür plat­zie­ren wir den folgenden Code im JSON-LD Format in der functions.php:

function load_start_page_meta() {
    // befinden wir uns auf der Startseite?
    if ( is_front_page() ) {
        // Script-Element ausgegeben
        echo <<<'EOT'
        <script type='application/ld+json'>
        {
            "@context": "http://www.schema.org",
            "@type": "Florist",
            "name": "Zur Frohen Blume",
            "address": {
                 "@type": "PostalAddress",
                 "streetAddress": "Blumenstrasse 1",
                 "addressLocality": "Berlin",
                 "postalCode": "10243"
            }
        }
        </script>
EOT; // diese Zeile darf nicht eingerückt sein!
    }
}
// Funktion mit `wp_footer`-Hook verknüpfen
add_action( 'wp_footer', 'load_start_page_meta' );
Hinweis

Wir nutzen hier die „Nowdoc-Syntax“, um JSON-Code innerhalb eines HTML-Script-Elements in PHP ein­zu­bin­den.

Als nächstes Beispiel möchten wir ein Script-Element mit JSON-Daten nur auf Seiten einbinden, auf denen Kom­men­ta­re aktiviert sind. Nehmen wir an, wir möchten die Kom­men­ta­re eines be­stimm­ten Nutzers oder vor einem be­stimm­ten Jahr verbergen. Dann könnten wir den Namen des Nutzers und das Jahr wie folgt auf den Seiten einbinden:

function load_comments_exclusion() {
    // sind wir auf einer Seite mit offenen Kommentaren?
    if ( is_single() && comments_open() ) {
        // Script-Element ausgegeben
        echo <<<'EOT'
        <script type="application/json">
            {
                "userName": "Mark Mustermann",
                "cutoffYear": "2018"
            }
        </script>
EOT; // diese Zeile darf nicht eingerückt sein!
    }
}
// Funktion mit `wp_footer`-Hook verknüpfen
add_action( 'wp_footer', 'load_comments_exclusion' );

Zu­sätz­li­che Script-Dateien im WordPress-Footer einbinden — wie man es richtig macht

Das Einbinden externer Scripte ist die wohl häufigste Änderung am WordPress-Footer. Dabei ist es generell keine gute Idee, externe Script-Dateien per Plugin oder Editieren der footer.php ein­zu­bin­den. Statt­des­sen sollte man die in WordPress vor­ge­se­he­ne, spe­zi­fi­sche Funk­tio­na­li­tät nutzen. Ins­be­son­de­re greift man auf die wp_enqueue_script()-Funktion und den wp_enqueue_scripts-Hook zurück, womit die Än­de­run­gen in der functions.php vor­ge­nom­men werden.

Nutzt man zum Einbinden externer Scripte die WordPress-spe­zi­fi­sche Funk­tio­na­li­tät, ergibt sich eine Reihe von Vorteilen:

  • Wir können festlegen, dass Script A erst geladen wird, nachdem Script B geladen wurde. So stellen wir sicher, dass etwaige Ab­hän­gig­kei­ten erfüllt sind.
     
  • Wir können für ein Script festlegen, dass dieses zwingend im WordPress-Footer aus­ge­ge­ben werden soll. Ansonsten landet das Script im HTML-Head.
     
  • Wir können für ein Script eine explizite Ver­si­ons­num­mer angeben. Diese wird der Script-URL hin­zu­ge­fügt. Ändert sich die Version, bekommt das Script eine neue URL. Wir erzwingen damit, das Script neu zu laden, anstatt die alte Version aus einem Cache zu nutzen.
     
  • Wir de­fi­nie­ren, welche Scripte wir in welcher Art und Weise einbinden möchten. Dabei über­las­sen wir WordPress die weiteren Schritte. Dies ist es­sen­ti­ell für ver­schie­de­ne Per­for­mance-Op­ti­mie­run­gen. Bei­spiels­wei­se kann ein Caching-Plugin die Liste von ein­zu­bin­den­den Scripten über­neh­men und diese pro­zes­sie­ren. Häufig ein­ge­setz­te Op­ti­mie­rungs-Techniken wie „Mi­ni­fi­ca­ti­on“ und „Con­ca­te­na­ti­on“ bauen auf diesem Me­cha­nis­mus auf.

Schauen wir uns im Detail an, wie die wp_enqueue_script()-Funktion aufgebaut ist. Hier das generelle Schema eines Aufrufs der Funktion mit sämt­li­chen Pa­ra­me­tern:

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

Wir haben einen Aufruf der wp_enqueue_script()-Funktion samt Er­klä­run­gen der Parameter und Beispiel für Sie zu­sam­men­ge­fasst:

wp_enqueue_script() $handle $src $deps $ver $in_footer
Erklärung internes Kürzel Pfad zur Ja­va­Script-Datei Ab­hän­gig­kei­ten-Array Versions-Angabe im Footer ausgeben?
Beispiel 'main-script' '/js/main.js'im Theme-Ordner array('jquery') false true

Schauen wir uns ab­schlie­ßend an, wie das in der Tabelle auf­ge­führ­te Beispiel in Code übersetzt wird. Wenn wir den folgenden Code in der functions.php-Datei plat­zie­ren, wird unser Script als Ab­hän­gig­keit von jQuery geladen. Dabei wird der Script-URL die Versions-Nummer der WordPress-In­stal­la­ti­on als Version hin­zu­ge­fügt. Das Script wird im WordPress-Footer ein­ge­bun­den:

function add_theme_scripts() {
    # auf jQuery aufbauendes Script im Footer laden
    wp_enqueue_script( 'main-script', get_template_directory_uri() . '/js/main.js', array('jquery'), false, true);
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );
Domain kaufen
Re­gis­trie­ren Sie Ihre perfekte Domain
  • Inklusive 1 SSL-Wildcard-Zer­ti­fi­kat pro Vertrag
  • Inklusive Domain Lock
  • Inklusive Domain Connect für einfache DNS-Ein­rich­tung
Zum Hauptmenü