Eine „Sticky“ Footer-Leiste in WordPress erstellen

Eine „sticky“ Footer-Leiste, auch bekannt als haftender Footer, ist eine feste Fußzeile, die am unteren Rand des Browserfensters bleibt, egal wie weit der Benutzer auf der Seite scrollt. Sie ist besonders nützlich, um wichtige Informationen, Navigationselemente oder Call-to-Actions (CTAs) prominent zu platzieren und so die Benutzererfahrung zu verbessern. In diesem Artikel zeigen wir Ihnen verschiedene Methoden, um eine solche Leiste in WordPress zu erstellen, sowohl mit als auch ohne Plugins.

Warum eine Sticky Footer-Leiste verwenden?

Eine sticky Footer-Leiste bietet mehrere Vorteile:

• Verbesserte Benutzererfahrung: Wichtige Informationen sind immer leicht zugänglich.
• Erhöhte Conversion-Rate: CTAs sind stets im Blickfeld, was die Wahrscheinlichkeit von Klicks erhöht.
• Modernes Design: Verleiht Ihrer Website ein professionelles und zeitgemäßes Aussehen.
• Mobile-Freundlichkeit: Besonders nützlich auf kleinen Bildschirmen, da die Navigation vereinfacht wird.

Methoden zur Erstellung einer Sticky Footer-Leiste

Es gibt verschiedene Ansätze, um eine sticky Footer-Leiste in WordPress zu erstellen. Wir werden uns die gängigsten Methoden ansehen:

• Verwendung eines WordPress-Plugins.
• Anpassung des Theme-Codes (CSS und eventuell JavaScript).
• Nutzung von Theme-Optionen (falls verfügbar).

Sticky Footer-Leiste mit einem WordPress-Plugin erstellen

Die einfachste Methode für Benutzer ohne oder mit geringen Programmierkenntnissen ist die Verwendung eines Plugins. Es gibt zahlreiche Plugins im WordPress-Repository, die diese Funktionalität bieten. Einige Beispiele sind:

• My Sticky Menu
• Sticky Menu (or Anything!) on Scroll
• Simple Sticky Footer

Für diese Demonstration verwenden wir das Plugin “Simple Sticky Footer”.

Schritt-für-Schritt-Anleitung: Simple Sticky Footer

1. Plugin installieren und aktivieren: Gehen Sie im WordPress-Dashboard zu “Plugins” > “Installieren”. Suchen Sie nach “Simple Sticky Footer” und installieren und aktivieren Sie das Plugin.
2. Plugin-Einstellungen konfigurieren: Nach der Aktivierung finden Sie die Einstellungen unter “Design” > “Customize” (Anpassen) > “Simple Sticky Footer”.
3. Inhalt hinzufügen: Fügen Sie den gewünschten Inhalt in den Customizer-Bereich ein. Dies kann Text, Links, Buttons oder sogar Shortcodes sein.
4. Design anpassen: Passen Sie die Hintergrundfarbe, Textfarbe, Schriftart und andere Designelemente nach Ihren Wünschen an. Das Plugin bietet in der Regel Optionen für Farbe, Schriftgröße und Padding.
5. Speichern und Veröffentlichen: Klicken Sie auf “Veröffentlichen”, um Ihre Änderungen zu speichern und die sticky Footer-Leiste auf Ihrer Website anzuzeigen.

Vorteile der Plugin-Methode:

• Einfache Installation und Konfiguration.
• Keine Programmierkenntnisse erforderlich.
• Benutzerfreundliche Oberfläche zur Anpassung des Designs.

Nachteile der Plugin-Methode:

• Zusätzliche Plugin-Belastung für die Website.
• Mögliche Inkompatibilitäten mit anderen Plugins oder Themes.
• Weniger Flexibilität bei der individuellen Gestaltung im Vergleich zur Code-Anpassung.

Sticky Footer-Leiste durch Code-Anpassung erstellen

Für Benutzer mit Programmierkenntnissen bietet die Code-Anpassung mehr Flexibilität und Kontrolle über das Design und die Funktionalität der sticky Footer-Leiste. Diese Methode erfordert das Bearbeiten der CSS-Datei Ihres WordPress-Themes.

Schritt-für-Schritt-Anleitung: Code-Anpassung

1. Theme-Datei finden: Ermitteln Sie die CSS-Datei Ihres aktiven WordPress-Themes. Diese befindet sich in der Regel im Ordner wp-content/themes/[Ihr-Theme-Name]/style.css. Es ist ratsam, ein Child-Theme zu erstellen, um Ihre Änderungen vor Theme-Updates zu schützen.
2. CSS-Code hinzufügen: Fügen Sie den folgenden CSS-Code in Ihre CSS-Datei ein. Passen Sie die Werte (Farben, Padding, etc.) nach Ihren Wünschen an.

/* Sticky Footer-Leiste */
.sticky-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px 0;
  z-index: 1000; /* Stellt sicher, dass der Footer über anderen Elementen liegt */
}

.sticky-footer p {
  margin: 0;
}

/* Anpassen des Inhaltsbereichs, um den Footer nicht zu verdecken */
body {
  padding-bottom: 60px; /* Anpassen der Höhe entsprechend der Footer-Höhe */
}

@media (max-width: 768px) {
  body {
    padding-bottom: 80px; /* Anpassen der Höhe für mobile Geräte */
  }
}
  

3. HTML-Code hinzufügen: Fügen Sie den HTML-Code für die Footer-Leiste in die footer.php-Datei Ihres Themes (oder Child-Themes) ein. Platzieren Sie den Code vor dem schließenden </body>-Tag.

<div class="sticky-footer">
  <p>Copyright © [Jahr] [Ihr Firmenname]</p>
</div>
  

4. Code speichern und testen: Speichern Sie die Änderungen an der CSS- und der footer.php-Datei und laden Sie Ihre Website neu. Die sticky Footer-Leiste sollte nun am unteren Rand des Bildschirms sichtbar sein.

Wichtige Hinweise zur Code-Anpassung:

• Child-Theme verwenden: Bearbeiten Sie niemals die Dateien Ihres aktiven Themes direkt. Erstellen Sie stattdessen ein Child-Theme, um Ihre Änderungen vor Theme-Updates zu schützen.
• CSS-Selektoren anpassen: Je nach Theme müssen Sie möglicherweise die CSS-Selektoren anpassen, um sicherzustellen, dass die sticky Footer-Leiste korrekt positioniert wird und nicht mit anderen Elementen kollidiert.
• Responsives Design berücksichtigen: Stellen Sie sicher, dass die sticky Footer-Leiste auf verschiedenen Bildschirmgrößen und Geräten korrekt angezeigt wird. Verwenden Sie Media Queries in Ihrem CSS, um das Design für mobile Geräte anzupassen.

Zusätzliche CSS-Anpassungen

Sie können die sticky Footer-Leiste weiter anpassen, indem Sie zusätzliche CSS-Eigenschaften hinzufügen:

• z-index: Stellt sicher, dass die Footer-Leiste über anderen Elementen liegt. Ein hoher Wert wie 1000 ist in der Regel ausreichend.
• box-shadow: Fügt einen Schatten um die Footer-Leiste hinzu, um sie hervorzuheben. Beispiel: box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.2);
• transition: Fügt einen Übergangseffekt hinzu, wenn die Footer-Leiste ein- oder ausgeblendet wird (z.B. beim Scrollen). Beispiel: transition: all 0.3s ease-in-out;

JavaScript für dynamische Anpassungen

In einigen Fällen kann es erforderlich sein, JavaScript zu verwenden, um die sticky Footer-Leiste dynamisch anzupassen, z. B. um sie beim Scrollen ein- oder auszublenden oder um ihre Höhe basierend auf dem Inhalt anzupassen.

Beispiel: Sticky Footer beim Scrollen ausblenden

Dieses JavaScript-Snippet blendet die sticky Footer-Leiste aus, wenn der Benutzer nach unten scrollt, und blendet sie wieder ein, wenn er nach oben scrollt.

<script>
  var lastScrollTop = 0;
  var stickyFooter = document.querySelector('.sticky-footer');

  window.addEventListener('scroll', function() {
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    if (scrollTop > lastScrollTop){
      // Nach unten scrollen
      stickyFooter.style.bottom = '-100px'; // Versteckt den Footer (Anpassung der Höhe erforderlich)
    } else {
      // Nach oben scrollen
      stickyFooter.style.bottom = '0'; // Zeigt den Footer wieder an
    }
    lastScrollTop = scrollTop;
  });
</script>
  

Fügen Sie diesen Code vor dem schließenden </body>-Tag in Ihrer footer.php-Datei ein.

Vorteile der Code-Anpassung:

• Volle Kontrolle über das Design und die Funktionalität.
• Keine zusätzlichen Plugins erforderlich.
• Optimale Performance, da kein unnötiger Code geladen wird.

Nachteile der Code-Anpassung:

• Erfordert Programmierkenntnisse (HTML, CSS, JavaScript).
• Höherer Zeitaufwand für die Entwicklung und Wartung.
• Fehleranfälliger, wenn der Code nicht korrekt implementiert wird.

Sticky Footer-Leiste mit Theme-Optionen erstellen

Einige WordPress-Themes bieten integrierte Optionen zur Erstellung einer sticky Footer-Leiste. Überprüfen Sie die Theme-Dokumentation oder die Theme-Einstellungen im WordPress-Dashboard, um festzustellen, ob diese Option verfügbar ist. Wenn Ihr Theme diese Funktion bietet, ist die Einrichtung in der Regel sehr einfach und erfordert keine Code-Anpassung.

Vorteile der Theme-Optionen:

• Einfache Konfiguration ohne Programmierkenntnisse.
• Direkt in das Theme integriert, daher in der Regel gut optimiert.

Nachteile der Theme-Optionen:

• Weniger Flexibilität bei der individuellen Gestaltung im Vergleich zur Code-Anpassung.
• Nicht in allen Themes verfügbar.

Fazit

Die Erstellung einer sticky Footer-Leiste in WordPress ist mit verschiedenen Methoden möglich. Die Wahl der Methode hängt von Ihren Programmierkenntnissen und Ihren individuellen Anforderungen ab. Wenn Sie keine Programmierkenntnisse haben, ist die Verwendung eines Plugins die einfachste Option. Für mehr Flexibilität und Kontrolle über das Design empfiehlt sich die Code-Anpassung. Überprüfen Sie auch, ob Ihr Theme bereits integrierte Optionen für eine sticky Footer-Leiste bietet. Unabhängig von der gewählten Methode kann eine sticky Footer-Leiste die Benutzererfahrung Ihrer Website verbessern und die Conversion-Rate erhöhen.