In WordPress kannst du unterschiedliche Inhalte in der Sidebar anzeigen – beispielsweise je nachdem, ob deine Leser gerade einen Artikel lesen oder auf einer statischen Seite unterwegs sind oder auch je nach Kategorie.
Gerade bei gröĂeren Blogs ist es gar nicht so leicht, die Navigation ĂŒbersichtlich zu halten. SchlieĂlich sollen deine Leser sich ja nicht erschlagen fĂŒhlen von lauter Links. Gleichzeitig sollen sie aber tunlichst alle wichtigen Inhalte sehen!
Klar, die einzelnen Kategorien und Unterseiten deines Blogs willst du vermutlich auf jeden Fall verlinken. Die Links zu deinen Social Media-Accounts dĂŒrfen nicht fehlen, vielleicht auch die letzten Fotos aus deinem Instagram-Account? Eine kurzer Text ĂŒber dich gehört zu den Must-Haves eines Blogs. Die neuesten Kommentare sind ebenfalls eine feine Sache, und dann war da ja noch das Widget mit der Suchfunktion… und so weiter.
Du siehst schon: anbetrachts so vieler Schnipselchen besteht schnell die Gefahr, dass deine Leser sich verlaufen oder wichtige Links gar nicht entdecken.
Was tun?
Weniger ist mehr!
Frag dich als erstes, welche dieser ganzen Inhalte du tatsĂ€chlich zeigen möchtest – oder ob du sie nur verwendest, weil dein Theme sie halt mitbringt. Instagram beispielsweise… so ein eingebundener Fotostream mag nett aussehen, aber wenn du dich sowieso alle paar Wochen dazu treten musst, dort endlich mal wieder ein Bild zu posten, ist das vielleicht gar nicht dein Ding.
Das Gleiche gilt fĂŒr die Seiten selber: frage dich, ob du wirklich 15 Unterseiten brauchst oder ob du diese nicht teilweise zusammenlegen kannst. Je mehr Links du prĂ€sentierst, desto schwieriger wird es fĂŒr deine Leser, die fĂŒr sie jeweils relevanten Inhalte zu finden. Und kaum ein Besucher klickt sich durch alles durch – das kennst du von deinem eigenen Surfverhalten auf anderen Seiten.
Wohin mit dem ganzen Zeug?
Okay. Du hast ausgemistet und hast immer noch jede Menge Inhalte? Kein Problem, denn schlieĂlich bietet so ein Blog je nach Layout ja jede Menge Stauraum: đ
- Im MenĂŒ kannst du mit einer verschachtelten Navigation arbeiten, sodass Unterseiten aufgeklappt werden können. Mehr als zwei Ebenen werden aber kritisch und potentiell verwirrend, also verzichte lieber von vornherein auf ein paar MenĂŒpunkte.
- Eine Sidebar ist verdammt praktisch! Aus gutem Grund findest du sie auf fast jedem Blog. Sie bietet jede Menge Platz fĂŒr die ganzen Infos, Links und sonstigen Schnipselchen.
- Ab ans FuĂende – im Footer kannst du ebenfalls diverse Inhalte unterbringen. Drei Spalten fĂŒr Widgets haben sich als Klassiker etabliert.
Konsistente Navigation, individuelle Sidebar
Wichtig ist, dass deine Leser sich zurechtfinden. Daher solltest du die Navigation auf allen Seiten konsistent halten. Das betrifft in erster Linie das HauptmenĂŒ – deine Leser sollten sich schlieĂlich nicht verlaufen.
In der Sidebar hast du allerdings mehr Freiheiten. Es kann eine sehr elegante Lösung sein, je nach gerade aufgerufener Unterseite oder Kategorie ganz unterschiedliche Inhalte in der Sidebar auszugeben. So könntest du etwa die letzten Kommentare nur bei BlogeintrĂ€gen anzeigen, auf der „Ăber dieses Blog“-Unterseite stattdessen deine Blogroll-Links, und auf der Startseite hilft deinen Lesern vielleicht eine Auflistung der 5 meistgelesensten BlogeintrĂ€ge weiter.
Wie du verschiedene Sidebars in WordPress realisierst, erfĂ€hrst du in diesem Tutorial. đ
Plugin oder selber coden?
Wie immer gilt: ein Plugin ist der komfortablere Weg. Hier musst du nicht mit Code herumhantieren, sondern nimmst alle Einstellungen ĂŒber das Backend vor. Allerdings können zu viele Plugins deinen Blog langsam werden lassen – und manchmal bietet ein Plugin auch gar nicht genau das, was du brauchst.
Im Folgenden habe ich beide Methoden fĂŒr unterschiedliche Sidebars beschrieben, sowohl mit Plugins als auch selber gecodet.
WordPress-Plugin fĂŒr unterschiedliche Sidebars
Ich habe ein Plugin getestet, das dir das Leben mit unterschiedlichen Sidebars erleichtert: Custom Sidebars.
Hier legst du die Widgets zunĂ€chst ganz normal an. AnschlieĂend kannst du bei jeder einzelnen Seite und sogar bei jedem einzelnen Beitrag gezielt auswĂ€hlen, welche Widgets in welchem widgetfĂ€higen Bereich angezeigt werden sollen.
FĂŒr Selbermacher: verschiedene Sidebars definieren
Keine Sorge, das ist keine Raketenwissenschaft, und explodieren kann auch nichts. đ
Wie entsteht eine Sidebar?
Durch ein paar Zeilen Code in der Datei functions.php deines Themes.
Das sieht dann so Àhnlich aus:
add_action( 'widgets_init' );
function widgets_init() {
register_sidebar( array (
'name' => 'Sidebar',
'id' => 'sidebar',
'before_widget' => '<aside>',
'after_widget' => '</aside>',
'before_title' => '<header><h3>',
'after_title' => '</h3></header>',
) );
}
Hier wird eine Sidebar angelegt – genauer gesagt: ein Bereich, in dem du Widgets platzieren kannst. Er wird umschlossen von aside
-Tags, die Ăberschrift steht in einem header
-Bereich und ist mit einer h3
ausgezeichnet. Fertig ist die Laube!
Mehr Sidebars
Nach dem gleichen Prinzip kannst du jetzt noch mehr Widgetbereiche anlegen – beispielsweise drei Bereiche fĂŒr die besagten drei Spalten im Footer, oder eben fĂŒr eine alternative Sidebar.
FĂŒr zwei Sidebars erweitern wir einfach die Funktion widgets_init()
. Dann sieht der Code so aus:
function widgets_init() {
register_sidebar( array (
'name' => 'Sidebar 1',
'id' => 'sidebar1',
'before_widget' => '<aside>',
'after_widget' => '</aside>',
'before_title' => '<header><h3>',
'after_title' => '</h3></header>',
) );
register_sidebar( array (
'name' => 'Sidebar 2',
'id' => 'sidebar2',
'before_widget' => '<aside>',
'after_widget' => '</aside>',
'before_title' => '<header><h3>',
'after_title' => '</h3></header>',
) );
}
Ja, wo laufen sie denn…? – Die Sidebars anzeigen
Wenn du den obigen Code in deiner functions.php eingefĂŒgt hast, tauchen im Backend unter Design » Widgets deine beiden Sidebars auf. Du kannst sie nach Herzenslust mit Widgets fĂŒllen.
Aber was fehlt jetzt noch, um die Sidebars auch in deinem Blog auftauchen zu lassen? – Richtig, sie mĂŒssen irgendwo in einem Template eingebunden werden.
GrundsÀtzlich funktioniert das so:
<?php if ( is_active_sidebar( 'sidebar1' ) ) : ?>
<?php dynamic_sidebar( 'sidebar1' ); ?>
<?php endif; ?>
Diese paar Zeilen kannst du beispielsweise an der entsprechenden Stelle in deiner index.php einfĂŒgen. Hier taucht dann also schon mal deine Sidebar No. 1 auf.
Eine alternative Sidebar fĂŒr die Beitragsansicht
Sagen wir, auf den Beitragsseiten selber möchtest du stattdessen Sidebar No. 2 anzeigen. Dann rufst du das entsprechende Template single.php auf.
In die single.php schreibst du also analog zur ersten Sidebar:
<?php if ( is_active_sidebar( 'sidebar2' ) ) : ?>
<?php dynamic_sidebar( 'sidebar2' ); ?>
<?php endif; ?>
Dieses Feature machen wir uns jetzt zunutze:
Ăblicherweise weist ein WordPress-Theme nĂ€mlich eine Datei namens sidebar.php auf, in der ebenjene enthalten ist. Sie wird in den Templates eingebunden, welche die Ausgabe der Bloginhalte steuern: index.php, single.php und so weiter.
Wir erstellen nun zunĂ€chst verschiedene Versionen dieser Sidebar. AnschlieĂend legen wir fĂŒr die statischen Seiten eigene Templates fest und binden dort die jeweils benötigte Sidebar ein. In einem nĂ€chsten Schritt kĂŒmmern wir uns um die Einzelansicht der BlogeintrĂ€ge (single.php) sowie die KategorienĂŒbersicht (category.php) – auch hier werden dann je nach Kategorie unterschiedliche Sidebars verwendet.
Eigene Sidebars fĂŒr bestimmte Seiten, Kategorie-Ăbersichten & Co.
Nach diesem Prinzip kannst du dir beliebig viele Widget-Bereiche bzw. Sidebars zusammenbauen und in den entsprechenden Templates deines Themes aufrufen.
FĂŒr statische Seiten gibt es die page.php, fĂŒr einzelne Seiten kannst du sogar eigene Templates anlegen. Auch in der category.php, die alle BeitrĂ€ge einer bestimmten Kategorie auflistet, kannst du somit eine andere Sidebar einziehen. Die Möglichkeiten sind grenzenlos. đ
Ein paar RatschlÀge
Nichtsdestotrotz solltest du es natĂŒrlich nicht ĂŒbertreiben – zu viele unterschiedliche Sidebars machen deinen Blog schnell wieder verwirrend statt einfacher.
Sofern du die meisten Inhalte in allen Sidebars anzeigen möchtest und nur wenige nicht auf bestimmten Seiten, kannst du einzelne Bereiche etwa auf der Startseite auch quick & dirty einfach ĂŒber CSS ausblenden, statt eigens eine neue Sidebar dafĂŒr aufzusetzen.
Ich hoffe, dieses Tutorial hat dir weitergeholfen. đ
Viel SpaĂ damit!
Dn Eintrag hab ich mir gleich mal unter Tutorials abgespeichert, mein Blog lĂ€uft zwar ĂŒber blogspot, aber alleine auch wegen meinem Studium möchte ich mich mal mehr mit wordpress beschĂ€ftigen.
Hallo, Anne,
das ist doch mal eine super verstĂ€ndliche und dabei noch sehr ausfĂŒhrliche ErklĂ€rung, vielen Dank dafĂŒr!
Ich hatte nĂ€mlich nicht gewusst, wie man es hinbekommen kann, fĂŒr verschiedene Seiten (pages) verschiedene Sidebars einzubinden. Jetzt klappt es. Man lernt halt nie aus.
Ein Fehlerchen habe ich allerdings entdeckt: in deinem Beispielcode fĂŒr die functions.php, also im Abschnitt Die unterschiedlichen Sidebar-Templates, fehlt ganz unten die schlieĂende geschweifte Klammer, wenn mich nicht alles tĂ€uscht.
Nochmals danke und viele GrĂŒĂe!
Torsten
Hallo Torsten,
schön, dass dir mein Tutorial weitergeholfen hat! đ
Mit der verschĂŒtt gegangenen Klammer hast du natĂŒrlich recht, die habe ich gerade ergĂ€nzt. Danke!
Genau nach dem habe ich gesucht und dann ist der Artikel auch noch von dir đ Schon ein lustiger Zufall. Danke fĂŒr das Tutorial!
Ein BlogBoard Kollege đ
Hallo Stephan,
hehe, da ist ja witzig. đ
Hallo Anne,
sorry habe da noch eine Frage:
Wo genau muss ich im Falle von BlogeintrĂ€ge und Kategorien, das Snippet einfĂŒgen?
Hallo Cyrus,
an der Stelle im Template, an der du deine Sidebar einbinden möchtest. Das heiĂt, du guckst in deinem Theme-Ordner, welche das richtige Template ist, und packst den Code darin an die gewĂŒnschte Stelle. Welche Template-Dateien das genau sind, ist leider von Theme zu Theme unterschiedlich. In der single.php (fĂŒr einzelne BeitrĂ€ge) oder category.php (fĂŒr Kategorien) zu suchen, ist ein guter Anfang. Eventuell gibt es aber bspw. keine category.php, sondern in der index.php werden ĂŒber Abfragen verschiedene andere Templates fĂŒr die unterschiedlichen FĂ€lle gezogen… das kann leider etwas kompliziert sein und lĂ€sst sich so pauschal nicht sagen.
Ich hoffe, ich habe dich damit jetzt nicht verwirrt. đ Das Bild hier gibt einen guten Ăberblick ĂŒber die Hierarchie von WordPress-Templates… man kann das sehr weit ausreizen. đ https://wphierarchy.com/
Pingback: Wie sieht die optimale Sidebar aus? | Bloghexe