WordPress-Tutorial: unterschiedliche Inhalte in der Sidebar

WordPress: Unterschiedliche Inhalte in der Sidebar anzeigen

Gerade bei größeren Projekten 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 facebook, Twitter & Co. 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 neusten 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.

Tipp: Ruf dir noch einmal das Prinzip der Templates in WordPress ins Gedächtnis: ausgehend von der index.php, die alle Inhalte präsentiert, kannst du für die verschiedenen Bereiche ja immer differenziertere Templates festlegen. Für die Anzeige einzelner Artikel beispielsweise ist die single.php zuständig. Rein theoretisch kannst du somit sogar für jeden einzelnen Blogeintrag ein eigenes Template verwenden! Diese Grafik illustriert die Hiarchie der Templates sehr gut.

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!

8 Kommentare

  1. Kim sagt:

    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.

  2. Torsten sagt:

    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

  3. Stephan sagt:

    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 😉

  4. Cyrus sagt:

    Hallo Anne,
    sorry habe da noch eine Frage:
    Wo genau muss ich im Falle von Blogeinträge und Kategorien, das Snippet einfügen?

    • Anne sagt:

      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/

  5. […] du in WordPress verschiedene Sidebars bzw. widgetfähige Bereiche im Footer nutzen kannst, habe ich in diesem Tutorial […]

Schreibe einen Kommentar

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

Ich freue mich über jeden ehrlichen Kommentar und gebe mein Bestes, alle Kommentare zeitnah zu beantworten!

Ein Hinweis an die Spam-Fraktion: Ich überprüfe die Kommentare vor dem Freischalten. Wer etwa scheinheilig fragt, ob wir einen Malerbetrieb empfehlen können, nur um selber einen ebensolchen als Link anzugeben - der kann sich seine Mühe sparen.