Eine Sidebar ist ein Widgetbereich in einem WordPress-Theme, der ausserhalb des Hauptinhalts positioniert ist und frei mit Widgets befüllt werden kann, zum Beispiel mit Suchfeldern, Kategorielisten oder Werbebannern.
Was bedeutet das?
Der Begriff „Sidebar“ kommt aus dem traditionellen zweispaltigen Website-Layout: Neben dem Hauptinhalt (Content) gibt es eine schmalere Spalte rechts oder links, die Zusatzinformationen enthält. In WordPress ist eine Sidebar technisch jedoch kein festes Layout-Element, sondern ein „Widgetized Area“, also ein registrierter Bereich, der dynamisch mit Widgets befüllt werden kann. Diese Bereiche können sich überall im Theme befinden: klassisch als seitliche Spalte, aber auch im Footer, im Header oder als Off-Canvas-Navigation.
Themes registrieren Sidebar-Bereiche in der functions.php-Datei mit der Funktion register_sidebar(), die an den widgets_init-Hook gebunden ist. Jeder Bereich erhält eine eindeutige ID, einen Namen und optionale HTML-Wrapper-Elemente, die jeden Widget-Eintrag umschliessen. Im WordPress-Dashboard unter Design sind alle registrierten Widget-Bereiche sichtbar und können per Drag-and-Drop mit Widgets bestückt werden.
Seit WordPress 5.8 lassen sich Widgets im Block-basierten Widget-Editor verwalten, der dieselbe Benutzeroberfläche wie der Gutenberg-Editor verwendet. Block-Themes (Full Site Editing) lösen das klassische Sidebar-Konzept vollständig ab: Dort werden Widget-Bereiche durch Block-Templates ersetzt, und die Sidebar wird direkt im Site Editor als Block-Struktur aufgebaut. Bei klassischen Themes mit PHP-Templates ist das traditionelle Sidebar-Widget-System nach wie vor der Standard.
Beispiel aus der Praxis
Ein klassisches Blog-Theme registriert drei Widget-Bereiche: „Sidebar Primary“ für die rechte Inhaltsspalte, „Footer Column 1-3“ für drei Footer-Spalten. Im Widget-Editor zieht der Seitenbetreiber ein Suchfeld-Widget, ein Kategorie-Widget und ein aktuelles-Beiträge-Widget in die „Sidebar Primary“. Beim Laden eines Blogbeitrags rendert WordPress die Sidebar rechts neben dem Artikel mit genau diesen Inhalten.
Ein Wartungsunternehmen nutzt die Sidebar auf der Blog-Seite, um auf aktuelle Angebote hinzuweisen: Ein Text-Widget mit einem HTML-Teaserblock verlinkt auf die aktuelle Angebotsseite. Änderungen an der Sidebar gelten sofort auf allen Seiten, die diesen Widget-Bereich einbinden, ohne dass einzelne Seiten bearbeitet werden müssen.
Tipp aus der Praxis
Viele Themes laden Sidebar-spezifische JavaScript- und CSS-Dateien auf jeder Seite, auch wenn die Sidebar auf bestimmten Seiten gar nicht angezeigt wird. Mit der Funktion is_active_sidebar('primary-sidebar') lässt sich im Template prüfen, ob der Bereich überhaupt Widgets enthält, bevor er gerendert wird. Das spart unnötige HTTP-Anfragen und verbessert die Ladezeit. Wer Performance optimieren möchte, sollte ausserdem prüfen, welche Widgets externe Ressourcen nachladen, zum Beispiel Social-Media-Widgets oder Wetter-Widgets, da diese die Core Web Vitals negativ beeinflussen können.