Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

Agentur eintragen →
Dr. Web » WordPress » Tabbed Widgets: WP-Sidebar besser nutzen

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?

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • Keine Kommentare
Lesedauer: 3 Minuten
  • von Dieter Petereit
  • 30. Oktober 2008
Bookmarke mich
Share on pocket

Khoa Nguyen - Online Marketing Beratung & SEA / Social Ads / SEO Freelancer

netkin digital Marketing

Carmen Hurst | Webdesign

TYPO3 & Shopware Agentur München - 3m5.

YOYABA

wolli ruf - mediendesign

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

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

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.

Agenturpartner

SEO-Sicht

Berlin

4eck Media GmbH & Co. KG

Waren (Müritz)

YOYABA

Hamburg

SEOlist.IO Frankfurt – SEO-Spezialist & SEO-Freelancer

Frankfurt am Main

Orange Services

München

Alle Agenturpartner

Jobs

Projektmanager – Vollzeit

Remote

Media Manager in München

München

Elektroinstallateur – Rechenzentrum

Karlsruhe

WordPress Developer – Vollzeit

Remote

Frontend Development & Project Management

Remote

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

WordPress Block Editor: das ist der neueste Stand

Mit dem Block Editor in WordPress kannst du eigene Blöcke und „Block Patterns“ erstellen. In diesem Beitrag möchte ich dir zeigen, wie du mit dem Block-Editor einen Beitrag mit einer Überschrift, einem Bild und einem Absatz erstellst, unabhängig vom verwendeten Theme.

 →   

WordPress Website erstellen 2022: Eine Anleitung, Schritt für Schritt

WordPress ist das mit großem Abstand führende CMS, aus guten Gründen. Eine WordPress Website zu erstellen ist einfach, wie Du in der folgenden Anleitung sehen wirst:

 →   

Die 17 besten WooCommerce Snippets für die functions.php

Dir gefallen bestimmte Dinge in WooCommerce nicht und willst sie anpassen? Diese 17 WooCommerce Snippets werden Dir dabei helfen:

 →   

0 Antworten zu „Tabbed Widgets: WP-Sidebar besser nutzen“
— was ist Deine Meinung?

  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.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.