Der Kampf mit der Seitenleiste (Sidebar)

Das Rich Master Theme ist so gebaut, dass jeder der 3 Sidebars für alle Seiten und Beiträge denselben Inhalt anzeigt. Wir möchten jedoch unseren sidebar so gestalten, dass zu jedem Beitrag oder Reiseland spezifische Informationen erscheinen. Dies sind zum Beispiel Hinweise auf nützliche Bücher. Wir beschreiben hier, für welches sidebar plugin wir uns warum entschieden haben. Danach erklären wir, wie wir damit mehrere sidebars nutzen und wie wir den sidebar Inhalt gestalten. Zuletzt beschreiben wir, wie wir im sidebar Bilder mit umlaufendem Text erhalten.

Welches Sidebar Plugin?

Wir haben uns für das Plugin «Easy Custom Sidebars» entschieden. Die Gründe dafür sind im Beitrag «Plugins, die kleinen Helferlein» im Abschnitt «Flexible Sidebars» beschrieben.

Dieses Plugin erlaubt es, individuelle Sidebars sehr flexibel zu gestalten. Für jedes von ihnen kann man festlegen, welchen Main Sidebar des Theme es für welche Beiträge ersetzen soll. Hier sind eine Reihe von verschiedenen Auswahlkriterien angeboten, so dass unser Bedürfnis bestens erfüllt wird. Ob nun für eine bestimmte Seite oder Beitrag, eine Kategorie oder Schlagwort, oder alle Beiträge einer Kategorie spezifische Information angezeigt werden soll, (fast) alles ist möglich. Auf allen anderen Seiten und Beiträgen wird dann der zentral im jeweiligen Main Sidebar festgelegte Inhalt weiterhin angezeigt. Die Bedienung des Plugin und die Konfiguration der Sidebars war für mich deutlich einfacher als beim «Custom Sidebars – Dynamic Widget Area Manager».

Das Easy Custom Sidebars Plugin fügt dem WordPress Design Menü einen weiteren Eintrag mit Namen «Theme Sidebars» hinzu:

Easy Custom Sidebars Plugin im WordPress Menu
Easy Custom Sidebars Plugin im WordPress Menu

Darunter öffnet sich eine Seite, auf der ihr spezifische Sidebar Container erstellen und benennen könnt. Auch ihre Zuordnung zu spezifischen Seiten, Beiträgen, Kategorien könnt ihr dort definieren. Schliesslich legt ihr dort auch fest, welchen Main Sidebar des Theme euer Sidebar ersetzen soll. So lässt sich euer Sidebar sehr individuell gestalten.

Easy Custom Sidebars Kategorien
Auswahl der Zuordnung eines Custom Sidebar zu bestimmten Beiträgen, Seiten etc.
Easy Custom Sidebars Zuordnungen
Liste der Zuordnungen des Custom Sidebar, und Einstellung des zu ersetzenden Main Sidebar

Mehrere Sidebars nutzen

Im Moment nutzen wir die vom Theme «mitgebrachten» 3 Main Sidebars für verschiedene Aspekte. So zeigen wir im Ersten Sidebar die Information über uns, die überall sichtbar ist. Der Zweite Sidebar enthält die generellen Links zu Buchversand und Unterkünften. Diese sind ebenfalls überall sichtbar. Den Dritten Sidebar schliesslich nutzen wir für spezifische Einträge je Land. Sie enthalten zum Beispiel von uns dazu empfohlenen Büchern zum Reisen.

Ich habe im Theme noch weitere zwei Main Sidebars definiert. Dies, falls wir auf noch detaillierterer Ebene, zum Beispiel bei einem einzelnen Beitrag, spezifische Informationen geben möchten. Hierzu musste ich die zusätzlichen Sidebars im WordPress registrieren. Dies geschieht in der functions.php Datei des Themes. Man sucht dazu nach der Funktion «register_sidebar», kopiert einen bestehenden Eintrag für eine Sidebar Registrierung und passt ihn entsprechend an. Darüber hinaus muss man dann meist in allen .php Dateien für die Darstellung von Seiten oder Posts Anpassungen vornehmen. Die zusätzlichen Sidebars sind dort zu berücksichtigen, wo immer der Theme-Programmierer Sidebar-spezifische Codezeilen verwendet hat.

Solange jedoch keine Inhalte in die Widgets dieser zusätzlichen Sidebar gestellt werden, erscheinen sie auch nirgends.

Inhalt des Sidebar gestalten

Die Inhalte für den oder die Sidebars pflegt ihr unter dem WordPress Menüpunkt «Design – Widgets»:

Wordpress Menu Deutsch Design Widgets
WordPress Menu Deutsch: Design – Widgets

Auf der Widgets-Seite sieht es dann je nach eingestelltem Theme sehr unterschiedlich aus. Jedes Theme bringt nämlich in der Regel schon Widget Container für Sidebar, Footer oder Header mit. Über diese Widget Container wird definiert, in welchem Bereich der Seite der entsprechende Inhalt erscheint. Die Inhalte der Container werden durch die Widgets definiert. Dies sind Elemente, welche im linken Bereich der Widgets-Seite aufgeführt sind, wie z.B. Text, Bild, Video. Die folgenden Screenshots zeigen, wie es beim Twentyseventeen Theme aussieht.

Widgets Seite beim Twenty Seventeen Theme, linker Teil
Widgets Seite beim Twenty Seventeen Theme, linker Teil
Widgets Seite beim Twenty Seventeen Theme, rechter Teil
Widgets Seite beim Twenty Seventeen Theme, rechter Teil

In einem Container könnt ihr mehrere verschiedene Widgets kombinieren. Diese werden dann aber in der Reihenfolge, in der sie in dem Widget angeordnet sind, auch untereinander dargestellt. Im Bild oben für das Widget «Blog Sidebar» könnt ihr das erkennen.

Wir haben neben Text- und Bild-Widgets auch andere Formate gewählt, um unseren Sidebar zu gestalten. Zum Beispiel haben wir für unsere Buchreferenzen Bild mit umlaufendem Text kombiniert. Das brauchte jedoch einen zusätzlichen Eingriff mit CSS Code. Ein Widget, das dies unterstützt gibt es nämlich nicht.

Bild und umlaufender Text vereint im Sidebar

Sidebar Element: Bild mit umlaufendem Text
Sidebar Element: Bild mit umlaufendem Text

In zwei Schritten haben wir das erreicht. Zuerst haben wir die Angaben zum Bild als HTML code aus einem Bild-Widget mit Hilfe des Website-Inspektors kopiert. Schaut dazu in den Beitrag «Farbe für das Theme». Dann haben wir diesen Teil mit HTML und CSS code in einem Text-Widget zusammengeführt.

Der folgende erste Code-Block referenziert die Bild-Datei und beschreibt ihre Position und Abstände. Letztere sind in dem gelb hinterlegten Code definiert. Für die verschiedenen Abstands- und Breitenangaben muss man selber experimentieren. Der blau hinterlegte Code sorgt dafür, dass das Bild am linken Rand der Sidebar Box orientiert bleibt.

Bild mit umlaufendem Text: Code-Block Bild
Bild mit umlaufendem Text: Code-Block Bild

Den Textteil gestalten wir im folgenden zweiten Code-Block. Der Klassenname «no-link» wird in der zentralen Style Sheet Code-Datei verwendet. Er legt dort für alle no-link Elemente fest, dass sie nicht wie in Hyperlink dargestellt werden, wenn man mit der Maus darüber fährt. Denn manchmal erbt ein Text solches Verhalten von übergeordneten Elementen. Der gelb hinterlegte Code sorgt für Abstände und die Textfarbe. Der blau hinterlegte Code ist hier ebenfalls der relevante Teil. Er sorgt dafür, dass der Text umlaufend zum Bild erscheint. Das Textelement wird nämlich als «relative» zum vorhergehenden Block, dem Bild, positioniert.

Bild mit umlaufendem Text: Code-Block Text
Bild mit umlaufendem Text: Code-Block Text
Dir hat der Beitrag gefallen? Dann würden wir uns freuen, wenn Du ihn teilst.

Wir freuen uns über Kommentare, Anregungen und Diskussionen zu unseren Beiträgen

Wenn euch die Seite gefällt oder ihr Ergänzungen, Aktualisierungen oder sonstige Hinweise habt, helft uns, die Seite aktuell zu halten.