Internetkurse Köln

Die Standardthemes der letzten drei Jahre boten sie gar nicht mehr. Viele andere Themes verzichten ebenfalls auf sie. Und auch im Zuge des Full Site Editing ist kaum mehr die Rede von ihr. Die Sidebar gilt halt nicht mehr als chic. Und doch möchten viele sie noch nutzen. Deshalb geht es hier nun um die Frage, wie Sie zu Twenty Twenty-One eine Sidebar hinzufügen können.

Sidebar: ja, nein, oder?

Die letzten drei Twenty-Themes bieten ihren Widget-Bereich – und nichts anderes ist eine Sidebar: ein Bereich für Widgets – im Footer an. Dies tun sie vor allem deshalb, weil die meisten Zugriffe auf Websites mittlerweile mit Mobilgeräten stattfinden. Und die bieten nun mal nicht so viel Platz für den Widget-Bereich rechts oder links vom Content. Wenn der auf Smartphones und Tablets sowieso unterhalb des Contents verschwindet, kann man also gleich auf die Sidebar verzichten und die Widgets direkt im Footer unterbringen.

Dennoch können Sidebars Sinn machen. Dieses Blog zum Beispiel hat hauptsächlich Nutzer/innen, die mit ihrem Desktop zugreifen. Woher ich das weiß? Google Search Console erzählt mir dergleichen.

Ein anderer guter Grund für die Sidebar ist, dass Nutzer/innen ohne diesen Bereich allzu oft auf die Idee kommen, den Content in voller zur Verfügung stehender Breite auszugeben. Solch lange Textzeilen, die dann auf dem Desktop entstehen, kann aber kein Mensch vernünftig lesen.

Jedes Theme kann Sidebar

Grundsätzlich kann man jedem Theme eine Sidebar verpassen. Die Frage ist nur, wie viel Aufwand dies bedeutet. Und ob es im Einzelfall überhaupt sinnvoll ist. Ein Theme zum Beispiel, das seinen Header links wie eine Sidebar ausgibt und dort auch seine Widgets unterbringt, braucht sicherlich nicht noch eine Sidebar auf der anderen Seite.

Bleiben wir aber bei den Standardthemes. Twenty Nineteen / Twenty / Twenty-One bieten auf Desktops sicherlich genug Platz für eine Sidebar. Und ganz sicher kann man hingehen und für diese manuell Widget-Bereiche rechts oder links des Contents erstellen. Aber das ist nicht mal eben so gemacht.

Sidebar für Twenty Twenty-One manuell erstellen

Eine schöne Anleitung für das manuelle Erstellen gibt es bei Themecoder. In kurzen Worten lautet das Vorgehen:

Wenn das Theme wie Twenty Twenty-One aber noch gar keine Sidebar kennt, dann macht vor allem der letzte Punkt viel Mühe. Denn Twenty Twenty-One versteht unter einem Widget-Bereich immer seinen Footer. Also bringt das Theme auch nur dafür CSS-Angaben mit.

Nun kommen Sie mit Ihrer frisch registrierten und in das Theme eingebauten Sidebar an – und was Twenty Twenty-One daraus? Es packt sie unter seinen Content, nicht allzu weit entfernt von seinem Footer.

Auch dem lässt sich natürlich entgegenwirken. Aber nicht hier und heute.

Sidebar für Twenty Twenty-One erstellen mit Plugin

Für Twenty Twenty-One gibt es zwei Plugins, die beide für die gewünschte Sidebar sorgen können: Twentig und Options for Twenty Twenty-One.

Twentig

Beide Plugins können eine Menge mehr als nur den Wunsch nach einer Sidebar erfüllen. Vor allem Twentig, das sowohl für Twenty Twenty-One als auch für Twenty Twenty erstellt wurde, pimpt das Standardtheme ordentlich auf. Mit seiner Fülle an Block-Stilen und Block-Vorlagen ist es sicherlich eine Bereicherung.

In Hinblick auf das Hinzufügen der Sidebar sind die Möglichkeiten hier allerdings sehr überschaubar. Nach dem Installieren und Aktivieren von Twentig bietet es seine Funktionen über den Customizer des Themes. Im Panel Twentig Options > Blog lässt sich die Sidebar für die Single Posts aktivieren (Display Sidebar). Daraufhin entsteht der Widget-Bereich Blog Sidebar, der sich wie sonst auch befüllen lässt.

Das war es aber auch schon. Eine Sidebar für einzelne Seiten, für die Blogseite oder einzelne Archive (Kategorie, Schlagwörter etc.) lässt sich mit Twentig nicht erstellen. Und: Wenngleich das Plugin auch für Twenty Twenty gemacht ist, gibt es hier gar keine Option für eine Sidebar.

Options für Twenty Twenty-One

Anders als mit Twentig lässt sich mit Options for Twenty Twenty-One die Sidebar nicht nur für einzelne Beiträge, sondern auch für alle anderen Seiten-Arten produzieren.

Die Option findet sich bei diesem Plugin ebenfalls im Customizer. Den erweitert das Plugin gleich um mehrere Panels, so auch um die General Options. Und in diesen findet sich die Möglichkeit, die Sidebar an den gewünschten Stellen zu injizieren (Inject Sidebar).

Bemerkenswert ist, dass die Options for Twenty Twenty-One jede Seitenart erkennen. Dazu gehören auch die Custom Post Types und die Custom Taxonomies, die Sie vielleicht für Ihr Theme registriert haben. Mit anderen Worten: Von alle (everywhere) über Beiträge und Seiten bis hin zu allen Archiven im Gegensatz zu den Kategorie- und/oder Schlagwort-Seiten können Sie den Erscheinungsort Ihrer Sidebar wählen.

Aber: Ich spreche hier nicht für umsonst von einer Sidebar. Kein Plural. Das Plugin erstellt für Sie eine Sidebar, die dann an den gewählten Stellen ausgegeben wird. Unterschiedliche Sidebars mit unterschiedlichen Widgets, passend zum jeweiligen Content der gewählten Ausgabestellen, sind somit nicht möglich.

Wenn Sie solche Unterschiede wünschen, kommen Sie nicht darum herum, Ihre Sidebars doch manuell zu erstellen. Oder Sie nutzen ein Plugin wie Custom Sidebars zu. Über das hatte ich zu einem früheren Zeitpunkt schon einmal geschrieben: Custom Sidebars – clever die WordPress Seitenleiste bearbeiten.

Was aber auch funktioniert: beide Plugins (Twentig und Options for Twenty Twenty-One) zu benutzen. Das ergibt dann zumindest zwei neue Widget-Bereiche (Sidebar und Blog Sidebar), die sich gegenseitig nicht stören. Wenngleich die beiden Sidebars sich dann in feinen Details, zum Beispiel in Ihrer Breite und dem Abstand zum Content, doch unterscheiden.

Sidebar für Twenty Twenty-One bearbeiten

Wenn Sie nun also eine Sidebar haben, könnte man die nun auch noch ein wenig aufhübschen. Das Befüllen funktioniert mittlerweile auch mit Gutenberg-Mitteln. Und sofern die Widget-Blöcke keinen Ärger bereiten, funktioniert das Ganze auch recht komfortabel.

Nun wäre es zumindest in meinen Augen aber ganz schön, wenn auch die Sidebar vergleichbar plakative Überschriften nutzen würde wie der Content. Im Moment gibt Twenty Twenty-One hier zwar h2-Überschriften aus. Die erscheinen aber vergleichsweise klein und fett.

Auch könnte man auf die Idee kommen, den einzelnen gruppierten (!) Widgets eine farbigen Hintergrund zu geben. Sagen wir: ein dezentes Hellgrau. So hebt sich die Sidebar mit ihren Widgets ein wenig vom Content ab.

Schließlich braucht es auch noch eine Anpassung an den Dark Modus (dunkler Modus).

Und wenn man dann auch noch tatsächlich beide Plugins (Twentig und Options für Twenty Twenty-One) benutzt, braucht es die Definitionen auch für beider Klassen. Die Options belassen es nämlich bei den Twenty Twenty-One Klassen, während Twentig eigene aufmacht: .blog-sidebar .widget

/* Anpassung für Twentig- und Options-Plugin Sidebar */

/* Hintergrund für einzelne Widgets */
.widget-area > *, .blog-sidebar .widget {
	background-color: #e2e2e2;
	padding:1rem;
}
.is-dark-theme .widget-area > *, .is-dark-theme .blog-sidebar .widget { 
	background-color: #39414d;
}

/* Überschrift Widgets */
.widget h2 {
	font-size:1.5em;
	font-weight: normal;
}

---

Beitragsbild: Britta Kretschmer