WordPress-Footer bearbeiten: Was gilt es dabei zu beachten?

Unter der Vielzahl an Content Management Systemen (CMS) ist WordPress das am weitesten verbreitete CMS. Eine WordPress-Site besteht aus mehreren Komponenten:

WordPress Core: die eigentliche WordPress-Installation
Theme: ein Grundgerüst zur dynamischen Darstellung der Inhalte
Plugins: erweitern die Kernfunktionalität von WordPress
Inhalte: vom Benutzer angelegt und in der Datenbank gespeichert

Für gewöhnlich muss man kleine Änderungen vornehmen, um eine wirklich erfolgreiche WordPress-Site auf die Beine zu stellen. Eine der häufigsten Anpassungen ist das Einbinden externer Scripte. Oft müssen diese im WordPress-Footer integriert werden. Wie genau das geht und was es dabei zu beachten gilt, erklären wir in diesem Artikel.

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

Generell ist ein Footer der Fußbereich einer Seite. Der Footer signalisiert dem Besucher beim Scrollen, dass er am Ende der Seite angekommen ist. Der WordPress-Footer enthält zwei Arten von Elementen, auf welche wir im Folgenden eingehen:

Sichtbare Elemente
Unsichtbare Elemente

Sichtbare Elemente im WordPress-Footer

Anders als der WordPress-Header enthält der WordPress-Footer für gewöhnlich sekundäre und damit weniger prominente visuelle Elemente. Dies macht Sinn, da der Besucher den Header als ersten visuellen Eindruck auf der Site wahrnimmt. Ein gut aufgebauter Header dient als Magnet, um Besucher auf der Site zu fesseln. Im Footer finden sich oft die folgenden visuellen Elemente:

Links zu sekundären Seiten, wie Impressum, Kontakt, etc.
Copyright-Notiz
„Nach oben scrollen“-Link

Unsichtbare 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 eingebunden.

Bei externen Script-Dateien gibt es eine weitere Besonderheit zu beachten: im HTML-Head eingebundene Script-Dateien blockieren normalerweise das Laden der Seite. Daher gab es traditionell die Empfehlung, externe Script-Elemente nach Möglichkeit vor dem schließenden </body>-Tag zu platzieren. In WordPress entspricht dies dem Einbinden der Scripte im Footer.

Script-Element	Beschreibung	Attribute
Verweis auf Script-Datei	externes, ausführbares Script	src-Attribut mit URL
Eingebettetes Script	eingebettetes, ausführbares Script	kein src-Attribut
JSON-LD Schema-Markup	eingebettete, nicht-ausführbare Metadaten	type=“application/ld+json“
JSON-Daten	eingebettete, nicht-ausführbare Applikations-Daten	type=“application/json“

Methode	Vorteil	Nachteil
Plugin einsetzen	einfache Bedienung	Code-Snippets werden in Datenbank gespeichert; ggf. mangelnde Kontrolle; kann Performance-Probleme verursachen
Theme modifizieren	Code-Snippets werden Teil der Codebase; visuelle Änderungen möglich; perfekte Kontrolle auch für komplexe Anwendungsfälle	benötigt Bearbeiten des Theme-Codes und Coding-Kenntnisse

Methode	Vorteil	Nachteil
Code in footer.php hinzufügen	Wirkprinzip gut nachvollziehbar; Kontrolle über die Reihenfolge der Scripte; auch visuelle Änderungen lassen sich umsetzen	Änderungen werden hartkodiert; Risiko, bei mehreren Änderungen unübersichtlichen Code zu erzeugen
Funktionen in functions.php anlegen	saubere Trennung von Darstellung und Funktionalität; detaillierte Kontrolle über eingebundene Script-Tags	Funktionsweise kann Laien verwirren; höhere Komplexität

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

    <footer id="site-footer" role="contentinfo" class="header-footer-group"></footer>
    <!-- Sichtbare Elemente stehen hier -->
    <!-- #site-footer -->
    <!--?php wp_footer(); ?-->
    <!-- Unsichtbare Elemente werden hier ausgegeben -->

<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 -->

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

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' );

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' );

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

wp_enqueue_script()	$handle	$src	$deps	$ver	$in_footer
Erklärung	internes Kürzel	Pfad zur JavaScript-Datei	Abhängigkeiten-Array	Versions-Angabe	im Footer ausgeben?
Beispiel	‚main-script‘	‚/js/main.js’im Theme-Ordner	array(‚jquery‘)	false	true

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' );

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

Sichtbare Elemente im WordPress-Footer

Unsichtbare Elemente im WordPress-Footer

Wie kann man den WordPress-Footer bearbeiten?

Ein Plugin einsetzen, um die WordPress-Fußzeile zu bearbeiten

Den Theme-Code modifizieren, um die WordPress-Fußzeile zu bearbeiten

Code in footer.php modifizieren

Funktionen in functions.php anlegen

Zusätzliche Script-Dateien im WordPress-Footer einbinden — wie man es richtig macht

Kommentar verfassen Kommentieren abbrechen