Tabbed Widgets: WP-Sidebar besser nutzen

Die meisten WordPress-Blogger, die ich kenne, verwenden immer dann dreispaltige Layouts, wenn sich aufgrund der relativen Fülle der vorgesehenen Widgets bei zweispaltigen Layouts eine zu lange Sidebar ergeben würde. Im Ergebnis kommt dann vielfach dabei heraus, dass im dreispaltigen zwar nun alle Widgets gut sitzen, das Theme nach unten hin aber viel Mut zur Lücke zeigt. Noch dazu sind die meisten zweispaltigen Layouts sowieso schöner und bloggiger. Ein Dilemma?

Nicht mehr, denn Kaspars Dambis hat ein schickes WordPress-Plugin entwickelt, dass es Ihnen erlaubt, eine nahezu unbegrenzte Menge Content in die Sidebar zu verlagern, ohne dabei unübersichtlich zu werden. Das Plugin hört auf den aufschlussreichen Namen Tabbed Widgets, beschreibt damit aber nur untertreibend seine Fähigkeiten.

Tabbed Widgets (TW) wird plugin-typisch installiert und bietet sodann eine Konfigurationsseite gleichen Namens unterhalb des “Design”-Menüs an, mit dessen Hilfe Sie es an Ihre inhaltlichen Bedürfnisse anpassen können.

Öffnen Sie die Optionenseite, stellen Sie fest, dass TW die Nutzung von bis zu acht verschiedenen Widgets mit unterschiedlichen Inhalten ermöglicht. Zur Auswahl steht die gesamte Funktionalität, die Sie auch separat als Widget in WordPress einbinden könnten. Speziell mit Text- und RSS-Widgets sind flexibelste Inhaltsbereiche denkbar.

Schauen wir uns ein Tabbed Widget etwas genauer an. Unter “Widget-Title” können Sie eine übergeordnete Überschrift ersinnen, die Sie allerdings erst mittels Klick auf “show Title” auch tatsächlich sichtbar machen. Die einzelnen Tabs 1 bis 6 bestücken Sie, entsprechend Ihrer Vorstellungen, mit vorhandenen Widgets und vergeben unter Titel den Text, der im jeweiligen Tab erscheinen soll. Der Radiobutton vor den einzelnen Tabs legt bei Aktivierung den jeweiligen Karteireiter als Startanzeige fest, während der Klick auf “Default start tab” bedeutet, dass immer Tab 1 bei Aufruf der Website angezeigt werden soll.

Die Option “Rotate tabs with interval” führt dazu, dass in Kombination mit einem vorzugebenden Sekundenintervall ein automatischer Wechsel stattfindet. So gelingt es, dem Unerfahrenen die Nutzung der Tabs automagisch begreiflich zu machen und den verborgenen Content zu zeigen, ohne dass der Besucher explizit klickend darum bitten müsste. Mittels “Choose random start tab” erreichen Sie die zufällige Auswahl des Starttabs beim Seitenaufruf.

Haben Sie Ihre Wunsch-Tabbed-Widgets vorbereitet, begeben Sie sich auf die Seite Design > Widgets und klicken sie in die Sidebar, wo sie dann per Drag and Drop angeordnet werden können. Die Tabbed Widgets sind zur Identifizierung entsprechend der Optionsseite durchnummeriert.

Rufen Sie nun Ihre Blog-Startseite auf, werden Sie ein Ergebnis ähnlich dem folgenden sehen.

Eine schöne Funktionalität habe ich Ihnen bislang unterschlagen. Nämlich die Möglichkeit, die Tabs auch als Accordion anzeigen zu lassen. Accordion ist eine hauptsächlich von Apple populär gemachte Slide-Technik, bei der ein Klick auf ein Navigationselement dazu führt, dass der Inhalt nach unten ausgeklappt wird, wobei die übrigen Accordion-Tabs mit nach unten wegrutschen. Accordion-Tabs sind zum Beispiel immer da sinnvoll, wo die Grenze nebeneinander anzuordnender Tabs erreicht wird, was bei Standard-Sidebars spätestens nach vier Tabs mit kurzen Titeln der Fall sein wird. Accordion-Tabs können längere Titel tragen und auch die maximale Zahl von sechs Tabs halten.

Normale Tabs und Accordion-Tabs können frei gemischt werden, ebenso wie animierte und nicht animierte Widgets. TW basiert auf jQuery und bietet mittels Einbindung des Cornerz-Plugins auch optisch abgerundete Tabs. Teilweise wird darüber berichtet, dass Accordion-Tabs nicht, wie gewünscht, funktionieren und anstelle eleganter Ausklapptechnik ganz profan sämtliche Inhalte ohne Slides präsentieren. Tritt dieser Effekt auch bei Ihnen auf, lohnt es sich wahrscheinlich, den Tipps in und nach diesem Kommentar zu folgen, die exakt beschreiben, was Ihr Theme-Autor nicht codex-konform implementiert hat und wie Sie das unkompliziert beheben können.

Design-Anpassungen nehmen Interessierte auf die gewohnte Art und Weise im Stylesheet uitabs.css vor, das sich im Unterverzeichnis “js” des Plugin-Verzeichnisses befindet. Viel Erfolg! ™