Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Beste Agenturen
  • Magazin
  • Beste Agenturen
  • Magazin
Dr. Web Logo seit 1997.
  • Kontakt
  • Anmeldung
  • Newsletter
  • Beste Agenturen
  • Magazin
Menü
  • Beste Agenturen
  • Magazin
Suche
Agenturpartner werden →
Dr. Web » WordPress » Tabbed Widgets: WP-Sidebar besser nutzen

Tabbed Widgets: WP-Sidebar besser nutzen

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • Keine Kommentare
Lesedauer: 3 Minuten
  • von Dieter Petereit
  • 30. Oktober 2008

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.

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

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 Technik-affine Medien wie T3N und Dr. Web. Dieter war acht Jahre lang Chefredakteur des Dr. Web Magazins.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

Rocket Backlinks Logo.

Rocket Backlinks

Aalen

Evergreen Media Innsbruck Logo.

Evergreen Media®

Innsbruck

Optimerch Agentur Logo Dortmund.

Optimerch GmbH

Dortmund

Arit Services Logo.

ARIT Services GmbH

Laatzen

dskom GmbH (ehem. SEO Profi Berlin)

Berlin

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Digitalagentur finden

Wir unterstützen Sie bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
Junger Mann, der in einer SEO-Agentur arbeitet arbeitet und in die Kamera lächelt.
SEO

SEO Agentur finden

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Inhaber einer WordPress-Agentur, am Tisch sitzt und in die Kamera schaut.
WordPress

WordPress Agentur finden

Wir unterstützen Sie bei der Auswahl Ihrer WordPress Agentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→

0 Antworten

  1. Herbelizer sagt:
    4. Mai 2009 um 18:42 Uhr

    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!

    Antworten
  2. Tilo sagt:
    7. Januar 2009 um 15:25 Uhr

    @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?

    Antworten
  3. Dieter Petereit sagt:
    7. Januar 2009 um 10:36 Uhr

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

    Antworten
  4. Tilo sagt:
    7. Januar 2009 um 5:04 Uhr

    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.

    Antworten
  5. Dieter Petereit sagt:
    1. November 2008 um 15:13 Uhr

    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 😉

    Antworten
  6. maksi sagt:
    1. November 2008 um 10:38 Uhr

    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?

    Antworten
  7. SiGa sagt:
    31. Oktober 2008 um 13:02 Uhr

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

    Antworten
  8. bee sagt:
    30. Oktober 2008 um 15:34 Uhr

    Sehr schick.
    Vielen Dank für die Vorstellung!

    Antworten

Schreibe einen Kommentar Antworten abbrechen

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

Dr. Web Logo weiss.
Fachmagazin für Online-Marketing. Seit 1997. Wissen, Software, Dienstleister: Wir bringen die Digitalisierung Ihres Unternehmens praxisnah voran. ✅

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Allgemein
  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • VPN
  • Webdesign
  • WordPress
  • Allgemein
  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • VPN
  • Webdesign
  • WordPress

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑