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!

7 Kommentare

  1. 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?

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

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

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.