Tutorial: Footer Widgets im WordPress Theme hinzufügen
Footer Widgets sind ein beliebtes Feature in WordPress Themes, um zusätzliche Informationen in Form von Text oder Links am Ende der Seite anzuzeigen. Die meisten Themes stellen Footer Widgets in mehreren Spalten dar und bieten dafür für jede Spalte einen eigenen Widget Bereich an.
Falls dein Theme aber keine Footer Widgets unterstützt, kannst du diese mit diesem Tutorials in deinem WordPress Theme hinzufügen. Als Beispiel verwenden wir das TwentySixteen Theme und fügen mithilfe eines Child Themes einen vierspaltigen Footer Widget Bereich hinzu.
Das Tutorial ist in drei Schritten aufgebaut. Zuerst registrieren wir die Widgets im Backend, anschließend erfolgt die Anzeige im Frontend und schlussendlich das Styling mit etwas CSS Code.
Footer Widgets im Backend registrieren
Als Erstes erstellen wir eine neue Funktion, welche vier neue Widget Bereiche im Theme registriert. Diese Funktion kopiert ihr in die functions.php eures Child Themes. Wichtig bei den Parametern für die register_sidebar() Funktion ist die Verwendung einer eindeutigen ID für jeden Widget Bereich.
Footer Widgets im Theme anzeigen
Der Code zur Anzeige der Widgets im Theme muss in die footer.php. Dazu könnt ihr die footer.php des TwentySixteen Themes in euer Child Theme kopieren, um die Template Datei zu überschreiben.
Den folgenden Code könnt ihr genau über <footer> einfügen. Mit is_active_sidebar() überprüfen wir, ob der Nutzer Widgets hinzugefügt hat. Damit stellen wir sicher, dass kein unnötiges HTML Markup ausgegeben wird, wenn alle Widget Bereiche leer sind.
Styling für Footer Widgets hinzufügen
Mit den ersten zwei Schritten werden unsere Footer Widgets bereits erfolgreich angezeigt, jedoch alle untereinander. Für die Darstellung der Widgets in vier Spalten benötigen wir etwas CSS, welches du in der style.css deines Child Themes hinzufügen kannst.
Jeder Widget Spalte wird eine Breite von 25% und etwas Abstand zur nächsten Spalte zugewiesen. Mit float werden alle Spalten nebeneinander und horizontal dargestellt.
Wir greifen auf das Standard Styling der Widgets vom TwentySixteen Theme zurück, aber du kannst natürlich mit etwas CSS Code die Farben nach deinen Wünschen anpassen. Viele Themes nutzen eine dunkle Hintergrundfarbe, um die Footer Widgets vom Rest der Seite abzuheben.
Flexible Anzahl von Widgets erlauben
Damit haben wir einen vierspaltigen Footer Bereich mit Widgets geschaffen. Was aber, wenn der Nutzer nur zwei oder drei Widgets anzeigen lassen will und keine vier Spalten benötigt? Mit einer statischen Spaltenanzahl entstehen damit unerwünschte Lücken im Layout.
Eine Möglichkeit ist etwa, eine extra Theme Option für verschiedene Anzahl von Spalten zu erstellen. Wesentlich eleganter ist aber die Methode, welche Leland Fiegel in seinem Blog vorstellt. Damit wird eine CSS3 Technik verwendet, mit der das Styling anhand der Anzahl von Kindelementen gesteuert werden kann.
Dieses zusätzliche CSS Schnipsel passt die Spaltenbreite den aktiven Widget Bereichen automatisch an:
Flexible Widget Anzahl mit Flexbox
Ich selbst bin ein großer Fan von Flexbox, weshalb ich auch eine Flexbox Lösung anstatt der Sibling Count Methode bevorzuge. Da Flexbox aber in manchen Browsern oft noch Bugs produziert, wollte ich beide Methoden erwähnen.
Für ein Spalten-Layout mit Flexbox kann dieser CSS Code verwendet werden. Mit flex-grow wird sichergestellt, dass die Spalten die komplette Breite des Themes ausfüllen. Die Angabe der Breite mit 25% ist notwendig, damit alle Spalten die gleiche Breite erhalten.
Eine flexible Spaltenanzahl wertet meiner Meinung nach die Benutzerfreundlichkiet von Footer Widgets deutlich auf – was denkt Ihr darüber? Ich freue mich über eure Kommentare!
Hallo vielen Dank, ich habe nur nicht verstanden, wie genau dann die footer.php auszusehen hat (Parent vs. Child). Ich bin gespannt! LG, Anja
Hallo Anja,
Kommt auf das Theme an. In meinem Beispiel verwende ich die footer.php von TwentySixteen. Diese kannst du ins Child Theme kopieren, um sie zu überschreiben.
Der Code zur Anzeige der Footer Widgets kann dann über dem eigentlichen Footer eingefügt werden.
Die komplette footer.php sollte dann so aussehen: https://gist.github.com/Netzberufler/4a7d024e7e4ac7823bb82bd2e23066d4
LG,
Thomas
Zum Vergleich hier noch die originale footer.php des Parent Themes:
https://github.com/WordPress/twentysixteen/blob/master/footer.php
Hallo Thomas,
ich hab mal die Footer genauso erstellt wie Du hier angegeben. Ich möchte jedoch die Footer-Widgets im -Bereich haben und über dem Seiten-Info. Geht das auch irgendwie zu machen?
Hallo Steven,
Die Footer-Widgets können an beliebigen Ort eingefügt werden, indem die relevante Template-Datei mit einem Child-Theme überschrieben wird.
Anstatt der footer.php kann also auch die header.php verwendet werden.
LG,
Thomas
Hallo Thomas,
vielen Dank für diese wertvollen Code-Schnipsel. Es hat bei mir auch das Verständnis für die ganze Theamtik gefördert! Vielen Dank.
Gerne 🙂
Danke für die geile Anleitung! Eine der Ersten die ohne Probleme 1 zu 1 umzusetzen war 😉
Gerne! Freut mich, dass die Umsetzung geklappt hat 🙂
Hallo Thomas,
danke für die tolle Anleitung, hat super geklappt!
Kennst du vielleicht auch eine Möglichkeit, die Widgets dazu zu bringen, sich bei geringen Auflösungen untereinander zu sortieren und (nur) dann die volle Bildschirmbreite in Anspruch zu nehmen? Insbesondere auf dem Smartphone werden die 4 Widgets nebeneinander ansonsten ziemlich gequetscht.
Vielen Dank im Voraus und schöne Grüße
Philipp
Hallo Philipp,
Die Lösung dafür sind CSS Media Queries. Damit kann für kleinere Auflösungen die Breite der Footer Widgets auf 100% gesetzt werden:
@media only screen and (max-width: 600px) {.footer-widget-column {
width: 100%;
}
}
Die Größe für den Umbruch kann beliebig festgelegt werden. Alternativ können auch zwei Media Queries mit 50% Breite für Tablets und 100% für Smartphones eingesetzt werden.
Viele Grüße,
Thomas