16.05.11

Es gibt einige Anwendungsfälle, in denen man in Tabs unterteilte Artikel gut gebrauchen könnte. Dies lässt sich auch ohne Programmierkenntnisse einfach umsetzen. Mit dem WordPress Plugin „Post UI Tabs“ lassen sich einfach Tabs und Tab-Boxen in einen WordPress-Artikel einfügen.

Einsatzzwecke

Einsetzen könnte man Tabs für verschiedene Zwecke. Ein paar Beispiele wären:

  • Glossar oder Lexikon (Aufteilung in Buchstaben oder Buchstaben-Gruppen)
  • Produktvorstellungen (Aufteilung in Beschreibung, Screenshots, Fazit, Preisvergleich, usw.)
  • Erhöhung der Page-Impressions (Mal bei den großen Magazinen einen Artikel gelesen? ;-))

Es gibt sicherlich noch mehrere Anwendungsbeispiele. Ich persönlich schreibe demnächst ein kleines Affiliate-Glossar zur Vervollständigung der Artikelserie From Noob to Affiliate, die ich in den letzten Wochen bei eisy geschrieben habe. Für dieses Glossar könnte ich mir das Plugin z.B. sehr gut vorstellen.

Den dritten Punkt der Aufzählung empfehle ich übrigens nicht unbedingt. Klar, wenn man Werbeformate nutzt, die nach Page-Impressions bezahlt werden, dann erhöht man diese dadurch. Aber eines ist sicher, der Leser ist im Normalfall eher genervt wenn Artikel unnötig unterbrochen werden. Das können sich vielleicht die großen Magazine leisten, als eher kleinerer Blog würde ich darauf verzichten, wenn es keinen Grund hat, der eher Vorteile bringt (z.B. ein Glossar).

Das Plugin – Post UI Tabs

Mit dem WordPress Plugin Post UI Tabs lassen sich eben solche Dinge leicht umsetzen, ohne Programmierkenntnisse zu haben. Nach der Installation des Plugins, findet man ein kleines Panel in den Admin-Einstellungen von WordPress, über das man ein paar Einstellungen vornehmen kann.

Post-UI-Tabs-EinstellungenIn einem DropDown-Menü kann man sich für eines der 25 vordefinierten Styles entscheiden. Natürlich kann man auch selbst via CSS die Ausgabe steuern in dem man vorhandene Styles bearbeitet oder gleich ein eigenes Design erstellt.

Zudem lassen sich Cookies aktivieren, die dafür sorgen, dass man bei Rückkehr zum Artikel wieder den zuletzt geöffneten Tab angezeigt bekommt. Nützlich finde ich auch die Option „Enable Tab Navigation“, die dafür sorgt, dass man übe eine kleine Pfeilnavigation am Ende des Artikels zum nächsten oder vorherigen Tab switchen kann. So muss man nicht immer hoch scrollen, sollte der Inhalt etwas länger sein.

Das Plugin hat also die nötigsten Einstellungen und nicht mehr.

Tabs einfügen

Um Tabs im Artikel einzufügen ist eine gewisse Syntax notwendig:

So würde das Ergebnis dann aussehen:

Post-UI-Tabs-Example

Das Ergebnis zeigt ein Beispiel, wie das nun z.B. für ein Glossar oder Lexikon aussehen könnte.
Hier könnt ihr euch das Plugin herunterladen.

Über den Autor Ralf Bohnert

Servus. Hat dir der Artikel gefallen? Freue mich über Kommentare oder wenn ihr die Artikel mit anderen teilt! Und denkt an den Feed ;-)

32 Kommentare für “Post UI Tabs: Tabs in WordPress Artikel einfügen”

  1. Ein nettes Plugin gut vorgestellt. Danke für diese ausführliche Beschreibung.

    Ich bin der Meinung, dass die TAB-Funktion bei Artikelserien durchaus Sinn macht, würde in normalen Artikeln aber, wie du schon selbst sagst, eher darauf verzichten.

    Vielleicht werde ich es mal testen.

  2. Interessantes Plugin, das werd ich mir bei Gelegenheit mal etwas näher anschauen. Mir fallen da gerade wirklich einige nette Spielereien ein, die man damit erzeugen könnte 🙂

  3. Ein sehr nettes Plugin, wobei ich gerne eine Live-Demo auf deinem Blog gesehen hätte 😉 Trotzdem nicht schlecht, ist bestimmt ab und zu ganz nützlich so ein paar Tabs.

  4. @Christian, so eine Live-Demo ist immer so eine Sache. Wenn ich das Plugin ausmiste, ist die Demo auch weg 😉 Deswegen lieber so, zumal ich es für bohncore auch nicht einsetzen werde!

  5. Generiert das Ding auch einzigartige urls oder sind da alle Inhalte einfach in einem Artikel für Bots lesbar?

  6. Jaja die lieben Tab-Spielereien… Sehr praktisch um viel Inhalt in einen kleinen Raum zu zwängen ;). Das Plugin macht auf den ersten Blick einen guten Eindruck, mal sehen ob ich das irgendwo mal ausprobiere, denn bis Dato hatten alle Themes auf die ich zurückgegriffen hatte die Möglichkeit von Tabs schon eingebaut 🙂

  7. Nein, es werden leider keine einzigartige URLs erzeugt. Im Quelltext ist alles in einem Inhaltsbereich. Es wird lediglich ein Anker gesetzt und vie jQuery die Anzeige der Tabs umgesetzt.

  8. @Lars, ich gehe mal davon aus, das du hauptsächlich Premium-Themes nutzt, da ist das ja oft als Shortcode integriert. Vielleicht schreib ich mal ne kleine Anleitung wie man das ohne Plugin und mithilfe von Shortcodes umsetzen kann!

  9. Ah okay, dachte ich mir 🙁 Demnach nicht wirklich für ein Glossar geeignet 🙁

  10. Naja, es kommt darauf an wie umfangreich und für welchen Zweck das Glossar sein soll und in welcher Umgebung es zum Einsatz kommt.

    Aber klar, alleine zwecks SEO wären die URLs sinnvoll.

  11. Klingt interessant, damit lassen sich längere Fachartikel sicher auch besser unterteilen und lesenswerter machen.

  12. Danke! Wenn ich sowas wie ein „Nischen“ Lexikon veröffentliche, werde ich darauf zurückgreifen! Gruß Vincent

  13. Hallo Ralf,

    ich will auf diesen Artikel im WordPress-Newsletter hinweisen, darf ich den letzten Screenshot im Newsletter einsetzen?

    Grüße

  14. Danke für die Vorstellung des Plugins! Ist es nur für posts geeignet oder auch für pages? Danke für eine kurze Info!

  15. @Frank, sorry, ich hatte dein Kommentar gelesen und wollte gleich nachgucken. Irgendwie ist es dann untergegangen…:-(

  16. Das Plugin finde ich für einige Situationen nützlich, wie z. B. Dossiers oder Pressematerial. Hier kann ich unterteilen in Text, Audio, Video, Bild zu einem Thema, werd’s gleich mal herunterladen, danke dafür! Wird das Plugin dann auch gepfelgt? Auf einer kommerziellen Seite sollte ich keine Probleme bekommen 😉
    Wäre die Shortcode-Variante denn bald fertig?

  17. @Ramona, momentan wird das Plugin gepflegt. Letztes Update ist aus dem April. Wie es in Zukunft aussieht weiß natürlich nur der Entwickler selbst 😉

    Welche Shortcode Variante meinst du denn? Kann dir gerade nicht folgen…

  18. Du schriebst an Lars: „Vielleicht schreib ich mal ne kleine Anleitung wie man das ohne Plugin und mithilfe von Shortcodes umsetzen kann!“

  19. Stimmt, das hatte ich übersehen 😉
    Noch hab ich in der Richtung nichts gemacht. Muss mal schauen ob ich das in nächste Zeit hinbekommen!

  20. Ich bin gerade auf der Suche und werdees mal ausprobieren. Danke für den Tipp.

    Gruß Mika

  21. Netter Artikel, aber schade, dass du nicht aufgeführt hast, wie man die Tabs in das Theme einbauen kann. Oder habe ich es übersehen?

  22. @Zocker, unter „Tabs einfügen“ ist es Beschrieben. Ein Einbinden direkt ins Theme ist soweit ich weiß nicht ohne weiteres möglich 😉

  23. Hallo Bohn, vielen Dank für den Tipp mit dem Plugin. Hatte vorher ein anderes Plugin, welches auch funktionierte, aber keine multiblen Tabs konnte. Da ist dieses besser geeignet. Nur die Anpassung per CSS ist bisschen schwieriger, wenn man was eigenes draus machen will. Sonst aber auf jeden Fall eine Empfehlung wert. Grüße Falko

  24. Dein vorgestelltes Plugin funktioniert bei mir leider überhaupt nicht (Link im Kommentar), ich habe ein anderes Plugin verwendet, aber das stellt mich nicht zufrieden. Bin jetzt schon die ganze Zeit auf der Suche nach einem passenden Plugin!

  25. Danke für den Hinweis auf das Plugin. Wenn Google jetzt nicht so ein Problem mit immer wiederkehrenden Texten hätte könnte man wunderbar Shopinformationen in Artikel einfügen, inklusive Versandkosten, etc.
    Kriegt man ja aber vermutlich gleich auf die Mütze von der Suchmaschine.
    Trotzdem werde ich es mal ausprobieren.
    Gruß, Max

  26. Für meine neue Internetseite suchte ich ein Plugin mit Tabs. Auf Themeforest kann man für um die 10 US-Dollar eins kaufen, aber deine Möglichkeit dient genau so gut und man kann auch noch Geld sparen. Top! 🙂

Trackbacks/Pingbacks

  1.  Techmec » Linktipps #1
  2.  Blogstatistiken im Mai 2011 – Zahlen und Fakten zu bohncore » bohncore

Schreibe einen Kommentar

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