Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Dieter Petereit 30. Oktober 2008

Tabbed Widgets: WP-Sidebar besser nutzen

Kein Beitragsbild

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?

Wix Webseiten — echt superpraktisch. ↬ Mehr erfahren

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.

Anzeige

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.

Die Optionenseite zu TW

Ö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.

Auswahlmöglichkeiten im einzelnen Tab

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.

Beispielkonfiguration

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.

Einfügen ins Theme per Design > Widget

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

Beispiel einer tabbed Navigationsoptik

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.

Ein Accordion-style Tabbed Widget

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! ™

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design.

8 Kommentare

  1. Ich benutze dank Exec-PHP recht viele selbstgecodeten Text-Widgets. Besteht bereits beim blanken WordPress das Problem, dass einmal angelegte Text-Widgets nicht gespeichert werden können, wenn sie deaktiviert werden („Remove“=weg!), macht dies das hier vorgestellte, großartige Plugin leider nutzlos:
    „Tabbed Widgets“ bündelt ja lediglich bereits vorhandene Widgets. Meine eigenen Text-Widgets müssten also an anderer Stelle aktiv sein, um sie überhaupt in ein tabbed Widget aufzunehmen.
    Entferne ich ein Text-Widget, verschwindets auch aus dem Tabbed Widget.

    Bitte sag mir jemand, dass ich nur einen Denkfehler mache und es eine ganz einfache Lösung für mein Problem gibt!

  2. @Dieter Petereit: Danke für den Tipp. Habs mir durchgelesen aber kam bisher noch nicht zu dem gewünschten Ergebniss, bzw. hat sich noch garnichts geändert.

    in meiner functions.php stand folgendes:

    if (function_exists(‚register_sidebar‘)) {
    register_sidebar(array(
    ’name‘ => ‚Side Bar‘,
    ‚before_widget‘ => “,
    ‚after_widget‘ => “,
    ‚before_title‘ => “,
    ‚after_title‘ => “,
    ));
    }

    hab dann bei dem ‚before_widget‘ mal paar Werte ausprobiert hat aber alles nichts gebracht.

    Weißt du was ich falsch gemacht habe?

  3. @Tilo: Das wird an Deinem Theme liegen. Im Artikel gibt es einen Link dazu.

  4. Hey, bei mir ist das komisch, sobald ich ein Tabed Widget aktiviere, verschwindet das Background-image und auf die Accordions kann man auch klicken soviel man will, aber öffnet sich nichts. Jemand ne Idee? Hab WP 2.7 und es liegt auch nicht an anderen Plugins, hab schon getestet.

  5. Am 2.6.3 liegt es nicht, eher an einem anderen Deiner Plugins. Deaktivier mal alle, dann aktiviere Tabbed als einziges und wenn es dann funktioniert, schrittweise immer eines dazu, bis Du das findest, was den Fehler verursacht. Dann entscheidest Du ganz pragmatisch, welches der beiden wichtiger ist ;-)

  6. Also bei mir funktioniert es überhaupt nicht. Ich sehe zwar den neuen Menüpunkt unter „Design“, aber wenn ich dann auf „Tabbed Widgets“ klicke, bekomme ich eine leere Seite. Beim Download steht allerdings auch dabei, dass es nur bis WordPress v2.6.1 kompatibel sein soll. Ich habe jedoch v2.6.3 … sicher liegt’s daran. Oder hat jemand eine Idee für mich, wie ich es doch zum Laufen bekomme?

  7. Ja, das sieht sehr vielversprechend aus, nach so etwas hatte ich schon Ausschau gehalten. Toll, dass es verschiedene Möglichkeiten bietet – danke für den Hinweis!
    P.S.: Ich MAG diese Footer-Trennlinie, die ihr da habt (hr?), ist sehr originell! ;-)

  8. Sehr schick.
    Vielen Dank für die Vorstellung!

Schreibe einen Kommentar

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