Willkommen beim WP Wegerl.at 'Lesemodus'!
Entspanntes Lesen und spannende Artikel warten auf dich.
Entdecke unsere besten Beiträge und genieße den Lesemodus.
Tab-Menü, tabmenü
smilies.4-user.de

Tab-Menü! – das ist zur Aufstellung des Inhalts 

Illustration von naobim
Info echo
OpenClipart-Vectors-katze-1

Ist der Classic-Editor schon zu kennen? –
"Advanced Editor Tools – ist so klasse!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-2

Anklickt Classic-Editor mit Advanced Editor Tools
"Advanced Editor Tools – ist das ausgezeichnete!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-3

Klassischen Editor anwenden! – und …
"Advanced Editor Tools – ist so sehr gut !"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-7

… die Welt gehört dem, der sie genießt.
"Advanced Editor Tools – und tut sehr gut!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-4

Advanced Editor Tools aktive Installationen: 2+ Millionen
"Advanced Editor Tools – ist so fabelhaft!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-5

Ansprechend! – so gehts hier zur Lancierung
"Advanced Editor Tools – ist de luxe!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-6

… und NEU! – Classic Widgets
"Classic Widgets – sind so grandiose!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-8a

Werkraum ist Werkraum und Frontend ist Frontend
Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker
"Advanced Editor Tools – ist so fein!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Das Tab-Menü eignet sich besonders zur Strukturierung von umfangreichen Inhalten auf einer Website. Es ermöglicht dem Nutzer, schnell und einfach zwischen den punktuellen Inhalten zu navigieren. Zudem kann ein Tab-Menü auch mit einem separaten Inhaltsverzeichnis versehen werden, um die Übersichtlichkeit zu erhöhen. Es erleichtert den Lesern, schnell zu den Informationen zu gelangen, die für sie am relevantesten sind.

Es kann auch für Produktseiten oder Kataloge verwendet werden, um verschiedene Produktkategorien oder Funktionen zu präsentieren. Die Verwendung eines Tab-Menüs kann dazu beitragen, dass der Inhalt einer Seite weniger überwältigend wirkt und den Lesern ein angenehmeres Leseerlebnis bietet.

Das Tab-Menü

Das Tab-Menü ist sowohl für eine übersichtliche als auch punktuelle Darstellung von Inhalten geeignet. Das Plug-in 'Tabby Responsive Tabs' eignet sich hierfür besonders gut.

Der Hinsicht SEO

Was die SEO betrifft, werden die Inhalte des Tab-Menüs in Suchmaschinen indexiert. Das ist anders, wenn die Inhalte separat im Plug-in erstellt werden müssen, wie beispielsweise beim Ditty News Ticker, wo die Inhalte über einen Shortcode eingefügt werden. Im oben genannten Fall ist dies jedoch nicht relevant, da der Inhalt direkt im HTML-Bereich eingefügt wird.

Tab-Menü und die Suche im Beitrag

Wenn man auf einer Website nach einem bestimmten Begriff suchen möchte, kann man in jedem Browser die Suchfunktion aufrufen, indem man die Tastenkombination cmd+f für Mac oder strg+f für Windows [ˈvɪndoːs] verwendet.

Allerdings ist diese Art der Suche innerhalb des Tab-Menüs nicht immer effektiv, da die Suchergebnisse auch Inhalte in anderen Tabs anzeigen können, die gerade nicht geöffnet sind. Daher ist diese Suchfunktion möglicherweise ungeeignet, wenn man gezielt nach einem bestimmten Begriff innerhalb des Tab-Menüs suchen möchte.

Der Inhalt so gut strukturiert in einem Tab-Menü!

TabMenü

Plug-in Tabby Responsive Tabs

… das Plug-in Tabby Responsive Tabs überzeugt in Anwendung und Performanz.

[tabby title="First Tab"]
Tabby kitty: "füttere mich".
[tabby title="Second Tab"] 
– und lege mir dann katzenminze in einem baum.
[tabby title="Third Tab"]
… ich klettere auch auf die vorhänge wie auf einen baum. – gib mir fisch.
[tabbyending]

First Tab

Tab-Menü
Tabby Kitty

Tabby Kitty: "… füttere mich".

Second Tab

– und lege mir dann katzenminze in einem baum.

Third Tab

… ich klettere auch auf die vorhänge wie auf einen baum. – dafür gib mir dann das sackerl futter.

Mehrere Tabgruppen

Im Vergleich zu anderen Plug-ins könnte man denken, dass es schwierig ist, 'Tabby Responsive Tabs' mehrmals auf derselben Seite einzufügen. Allerdings ist dies tatsächlich sehr einfach möglich.

[tabby title="First Tab"]

Content

[tabby title="Second Tab"]

Content

[tabby title="Third Tab"]

Content

[tabbyending]

Nun das zweite Tab-Menü derselben Seite

First Tab

Tabby kitty mag über den tisch spazieren und unordnung machen. Dafür gibts flauschiges schnurren frei haus.


Exempel von ADD-ON Tabby Link to Tab
→ Zurück Tabgruppe 3 zum Tab 3 ←

Second Tab

Ein kätzchen kann kratzen, dass es schmerzt. Aber es kommt wieder die zeit, wo sie  auf die sofa kommt. Zum schmeicheln und schnurren. – und dann gib Tabby kitty sein futter.


Exempel von ADD-ON Tabby Link to Tab

Mit dem 'Tabby Link to Tab'-Add-On kann man einen Link erstellen, der direkt zu einem bestimmten Tab in einem Tab-Menü führt, auch wenn es mehrere Tab-Menüs auf derselben Seite gibt.

→ Zurück Tabgruppe 3 zum Tab 1 ←

Third Tab

Tabby kitty springt in deinem schlaf auf dich und schnüffelt im gesicht. Und gibst du keine streicheleinheiten, So watscht und kratzt sie dich.


Exempel von ADD-ON Tabby Link to Tab
→ Zurück Tabgruppe 3 zum Tab 3 ←

Das CSS lässt sich heute im Customizer anpassen. Laut dem Autor des Plug-ins ist es am besten, die gesamte style.css des Plug-ins zu kopieren und im Customizer einzufügen. Zusätzlich sollte man den folgenden Code in die Theme functions.php einfügen:

/* Tabby von separates CSS verwenden */ 
remove_action('wp_print_styles', 'cc_tabby_css', 30);

Dadurch wird die Datei vom Plug-in ausgeschlossen und die im Customizer erstellte CSS-Datei wird verwendet. Nachdem man das CSS über den Customizer angepasst hat, kann man es auch in das Child-Theme übertragen.

Ein Tab-Menü innerhalb eines anderen Tab-Menüs funktioniert nicht! – das wäre hier nur zur Demonstration mal nützlich gewesen.

Das ADD-ON Tabby Link to Tab

Anstatt eine Spende für das Plug-in zu tätigen, kann man sich für das ADD-ON Tabby Link to Tab entscheiden.

Das Feature 'Tabby Link to Tab' ermöglicht es, Registerkarten auf derselben Seite über einen Shortcode zu verknüpfen. Es kann als Inhaltsverzeichnis verwendet werden und bietet auch die Möglichkeit, einen Link zum Öffnen eines Tabs auf derselben Seite oder sogar von einem Link auf einer anderen Seite genau zum gewünschten Menü-Tab zu erstellen.

[tabbylink tab=1 offset=100 fade=400]Tab 1: Im Ersten[/tabbylink]
[tabbylink tab=2 offset=100 fade=400]Tab 2: Im Zweiten[/tabbylink]
[tabbylink tab=3 offset=100 fade=400]Tab 3: Im Dritten[/tabbylink]

Anleitung

In dieser Anleitung wird die Verwendung des Plug-ins als Inhaltsverzeichnis mit Beispielen erläutert, ebenso wie die Gestaltung mit Beispielen und weitere Verwendungszwecke.

Inhaltsverzeichnis

Tab: Verwendung
Tab: Design der Tab-Links
Tab: Beispiele
Tab: Link auf Webseite mit Tab-Menü exakt den Tab

Verwendung

Verwendungszweck

Zum einen eignet es sich sehr gut als Inhaltsverzeichnis vor dem Tab-Menü. Zum anderen kann es genutzt werden, um von einem Tab zum nächsten weiterzuleiten, das ist am Ende jeweiligen Tabs angebracht.

Zum Weiteren kann es auch verwendet werden, um Tabs von verschiedenen Tab-Menüs auf derselben Seite miteinander zu verknüpfen.

[ tabbylink tabgroup=2 tab=3 offset=100 fade=400 ] Link zu Tab 4 in Tabgruppe 1 [ /tabbylink ]

→ Link zu Tabgruppe 2 zum Tab 2 ←
Es gibt fünf Parameter

Es gibt fünf Parameter, denen im Shortcode Werte zugewiesen werden können:

  1. Registerkartengruppe [tabgroup]: Dies ist der Index der Registerkartengruppe auf der Seite. Normalerweise gibt es eine Gruppe auf einer Seite, aber es können auch mehrere Gruppen vorhanden sein. Wenn beispielsweise ein zweites Tabmenü vor einem vorhandenen hinzugefügt wird, erhöht sich der Registerkartengruppenindex des vorhandenen um den Wert 1.
  2. Registerkarte [tab]: Dies ist der Index der Registerkarte innerhalb derselben Registerkartengruppe.
  3. Versatz [offset]: Dies ist die Anzahl der Pixel, die über der Registerseite angezeigt wird, um die Registerkarten anzuzeigen, nachdem auf den Link geklickt wurde. Minuswerte sind nicht möglich.
  4. Einblenden [fade]: Dies ist die Zeit in Millisekunden, die der ausgewählte Tab-Inhalt nach dem Klicken auf den Link eingeblendet wird.
  5. Class [class]: Dies ist die Tabbylink-Klasse. Weitere Informationen dazu finden Sie im nächsten Tab.
Parameter

Die Verwendung der Parameter ist optional. Wenn keine Parameter angegeben werden, sind die Standardwerte wie folgt:

tabgroup => 1
tab => 1
Offset => 44
Fade => 0
class => NULL (kein Wert)
Beispiele von Parameter

Wenn eine Seite nur eine Registerkartengruppe enthält und der Inhalt beim Klicken auf den Shortcode-Link direkt angezeigt werden soll, kann folgender Shortcode verwendet werden, um eine Verknüpfung zur dritten Registerkarte in derselben Registerkartengruppe herzustellen:

[ tabbylink tab=3 ] Link zu Tab 3 [ /tabbylink ]

Dies wird mit dem Standard-Offset von 44 Pixeln angezeigt.

Wenn es mehrere Registerkartengruppen gibt, kann folgender Shortcode verwendet werden, um eine Verknüpfung zur dritten Registerkarte in der zweiten Registerkartengruppe herzustellen:

[ tabbylink tabgroup=2 tab=3 ] Link zu Tab 2-3 [ /tabbylink ]

Um den Inhalt des Tabs nach dem Klicken auf den Link anzuzeigen und den Versatz auf 100 Pixel zu setzen, kann folgender Shortcode verwendet werden:

[ tabbylink tabgroup=2 tab=3 offset=100 fade=400 ] Link zu Tab 2-3 [ /tabbylink ]

Wenn benutzerdefiniertes CSS hinzufügen wurde, ist dem Link bspw. die Class talifa hinzufügen:

[ tabbylink tabgroup=2 tab=3 offset=100 fade=400 class=talifa ] Link zu Tab 2-3 [ /tabbylink ]

Es können die Tab-Links separat durch Verwendung von CSS angepasst werden, siehe nächstes Tab.


Nächst Tab: Design der Tab-Links

Design

Das Design der Tab-Links …

Die Tab-Links der Tabbylink-Klasse können gestaltet werden. In der folgenden CSS-Regel werden die Links als linksbündige Schaltflächen formatiert.

CSS so Muster

a.tabbylink {
    border: 1px solid #777;
    border-radius: 3px;
    font-weight: 400;
    color: #333;
    display: block;
    float: left;
    clear: both;
    padding: 0 10px;
    margin-bottom: 20px;
    margin-right: 8px;
    text-align: left;
    text-decoration: none;
}
a.tabbylink:hover {
    border: 1px solid #777;
    background: #e6e6e6;
    color: #333;
}

Diese Regel gilt für alle Links, die über einen Tabbylink-Shortcode erstellt werden. Jeder Link hat einen Klassenwert, der der Tab-Gruppe und dem Tab entspricht, mit dem er verknüpft ist. Um beispielsweise einen Link zum vierten Tab der zweiten Tab-Gruppe zu erstellen, ist die Klasse 'tabbylink-2-4' zu verwenden:

CSS

a.tabbylink-2-4 {
    border: 1px solid #cfdfb7 !important;
    color: #bada55 !important;
}
a.tabbylink-2-4:hover {
    background: #cfdfb7 !important;
    color: #fff !important;
}
Hinweis

Wenn es mehr als einen Link zu einer Registerkarte gibt, haben diese denselben Stil. Wenn Sie jedoch einen anderen Stil für einen bestimmten Link wünschen, müssen Sie den Shortcode in ein anderes Element einbetten und ihm einen eigenen CSS-Selektor zuweisen.

Tab Links im Akkordeon-Modus verstecken

In einem Akkordeon-Layout kann es unerwünscht sein, die Links zu den nächsten Registerkarten anzuzeigen, wenn sie am unteren Rand des Inhalts platziert sind. In diesem Fall können die Tab-Links im Akkordeon-Modus ausgeblendet werden, indem eine CSS-Regel erstellt wird, die einem Medienabfrage-Abschnitt entspricht.

Um die Tab-Links im Akkordeon-Modus auszublenden, füge folgende Regel in den entsprechenden Medienabfrage-Abschnitt deines Stylesheets ein:

CSS

@media (max-width: 768px) {
    a.tabbylink {
        display: none;
    }
}

Diese Regel versteckt alle Tab-Links mit der Klasse tabbylink, wenn die maximale Bildschirmbreite 768px beträgt.

Tab-Links stylen

Des 'class-Parameters' sind die Tab-Links zu stylen.

CSS bspw

.talifa {
    border: 1px solid #cfdfb7 !important;
    color: #bada55 !important;
}
.talifa:hover {
    background: #cfdfb7 !important;
    color: #fff !important;
}

HTML

[tabbylink tabgroup=3 tab=3 class=talifa offset=100 fade=400]Nächst Tab: Beispiele[/tabbylink]

Siehe hier…


Nächst Tab: Beispiele

Beispiele

Der Shortcode mit Link zu anderem Tab.

[ tabbylink tabgroup=3 tab=2 offset=100 fade=400 ] Link zu Tab 2 in diesem Tab-Menü [ /tabbylink ]

→ Link zu Tab 2 in diesem Tab-Menü und …

[ tabbylink tabgroup=2 tab=3 offset=100 fade=400 ]→ Link zu Tabgruppe 2 zum Tab 3 [ /tabbylink ]

→ Link zu Tabgruppe 2 zum Tab 3
Der Link nach links floatet

Wenn ein Link mit float: left; nach links verschoben wird, kann das so aussehen:

Text davor. Link zu Tab 1 in Tabgruppe 1

Text der davor ist dann danach. Link zu Tab 2 in Tabgruppe 1

Anmerkung

Beachte, dass die Tabgruppe und der Tab als Nummer angegeben werden müssen, z.B. tabgroup=1 und tab=1, und nicht als Titel wie in [tabby title="Beispiele"]. Die Nummerierung der Tabgruppen erfolgt von oben nach unten.


Link auf Webseite mit Tab-Menü exakt den Tab

Link exakt

Link zu einer Webseite mit Tab-Menü, der den exakten Tab öffnet

Es ist praktisch, wenn ein Link auf eine andere Webseite mit einem Tab-Menü verweist und dabei direkt der richtige Tab geöffnet wird. Ein Beispiel wäre der Link ⇔ Interaktion, SVG-Bild und Ditty News Ticker.

  • Durch den Parameter ?target=9 in der URL wird der neunte Tab geöffnet. Die Zahl "9" kommt aus dem Beispiel und ist der Name des Tabs. Es ist wichtig, den Namen des Tabs genau zu kennen, da dieser bei der Verwendung des Parameters relevant ist. Auf wordpress.org (des Linkziels kurz nach oberhalb scrollen) kann man sehen, wie man steuert, welcher Tab beim Verknüpfen mit der Seite geöffnet wird.

Beachte, dass der Name des Tabs keine Leerzeichen enthalten sollte. Es ist auch wichtig, einen Anker im Dokument zu setzen. Der Link sollte dann in der folgenden Form aussehen:

https://wegerl.at/css-hover-bildwechsel-audio-js/?target=9#interaktion.

Ein weiteres Beispiel mit einem Tab und dem Namen "Tab 4". Der Name des Tabs wird mit einem Bindestrich gesetzt (tab-4) also (/?target=tab-4), und der entsprechende Anker wird mit #info hinzugefügt, zum Beispiel:

https://wegerl.at/lesemodus-website/?target=tab-4#info

Die richtige Schreibweise für den Link mit dem Anker ist ?target=tab-4#info und nicht ?target=tab-4/#info. Der Anker sollte direkt nach dem Tab-Namen ohne Schrägstrich stehen.

Tabby im Einklang mit Dark-Mode

Durch den Einsatz des Dunkel-Modus auf der Website ergeben sich Anpassungen im CSS, die die Konformität sicherstellen. Dabei müssen nicht nur der Hintergrund, sondern auch die Tabs anders gestaltet werden.

Die Snippets zur functions.php ab in das Plug-in Code Snippets.
Mit Obhut von Codes! – bleibt das auch nach Theme-Update so.
Oder Child Theme! – zum Beispiel Quick Child Theme Generator.
So zum Workflow und Browser Cache s. das Plug-in reBusted!

Obwohl die Änderungen minimal sind, können sie nicht nur über den Customizer oder das Child-Theme vorgenommen werden. Stattdessen muss das CSS-File des Plugins in seiner Gesamtheit übernommen werden. Um dies zu erreichen, muss das CSS von Tabby erst mal umgeleitet werden. Dies kann zunächst in der functions.php des Themes durchgeführt werden:

/* Tabby von separates CSS verwenden */ 
remove_action('wp_print_styles', 'cc_tabby_css', 30);

Weiter kann man im Plugin-Editor die Datei tabby.css öffnen, den Inhalt kopieren und in die style.css des Childs-Themes einfügen und bearbeiten.

  • Die Änderung ist in Blau und die Zugabe ist in Gelb
.responsive-tabs .responsive-tabs__list__item:hover {
    color: #b04337;
    background: transparent;
}
.responsive-tabs .responsive-tabs__list__item--active,
.responsive-tabs .responsive-tabs__list__item--active:hover {
    background: none;
    border-color: #ddd;
    border-bottom: 3px solid #a12b00;
    color: #666;
    padding-bottom: 11px;
    margin-top: 0;
    position: relative;
    top: 1.5px;
}
.responsive-tabs .responsive-tabs__panel {
    background: none;
    border: 1px solid #ddd;
    border-top: 1px solid #ddd;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    -webkit-border-top-left-radius: 0px;
    -moz-border-radius-topleft: 0px;
    border-top-left-radius: 0px;
    clear: left;
    margin-bottom: 0;
    padding: 20px 20px 0;
    word-wrap: break-word;
}

Info echo zur Postierung von Inhalt

  • Siehe auch unterhalb, "Das könnte Dich auch Interessieren" Text Auf-Einklappen und Text scrollen die Struktur.

OT: Zulernen kann man selbst einer kleinen Bewertung:

„åiso, i find’ de’s super“
wegerl (@wegerl)

Instead of donating to the plug-in, you can choose the Tabby Link to Tab feature alongside other ADD-ONS. This then leads a menu directly to the tab in question.

… I hope this helps
Best regards

Moderator wrote:

@wegerl Thanks for the review but please keep it to your words here only. No links or links to images. That’s not permitted in reviews and I have removed yours.

Post Link: https://wordpress.org/support/topic/aiso-i-find-des-super/?view=all#post-11887887

Wo ist da der Unterschied?

https://wordpress.org/plugins/tabby-responsive-tabs/, der Spenden-Button: "Möchtest du die Weiterentwicklung dieses Plugins unterstützen?" → Für dieses Plugin spenden

Frage: Ist zum obigen Link ein Unterschied und dem Hinweis, der zur Bewertung zugefügt wurde? → Tabby Link to Tab. Demnach folgte nämlich der Rüffel: … No links or links to images. That’s not permitted in reviews and I have removed yours.

Es tut mir leid, falls das Missverständnisse verursacht hat. Ich wollte nur auf eine weitere Funktion des Plug-ins hinweisen, die für einige Benutzer interessant sein könnte. Ich werde mir merken, dass das Einfügen von Links in Bewertungen nicht gestattet ist und meine zukünftigen Beiträge entsprechend anpassen.



So Tests des anderem

…zum anklicke

Das nun folgende Plug-in WP Tabs war so im TEST, daher sind die Shortcodes leer. Mein Eindruck zu WP-Tabs, s. Hello! Die Bewertung ist in Relation zu sehen, welches der Programmierer wollte. Nämlich das mit den Features. Dank dem Autor des Plug-ins.

WP Tabs

Das Plug-in vormals im Namen 'Expand Tabs lite' ist ein Tabmenü. Das Schöne an 'Expand Tabs lite' ist, dass das Einschwenken des Tabinhalts gefällig ist.

'Expand Tabs lite' heißt seit dem Update zur Version 2.0.0 (21.09.19) 'WP Tabs'. Hiermit hat das Plug-in von ca. 109 KB auf 2 MB zugenommen und man hat das gesamte 'pro' mit auf dem Plug-in in einem.

Somit ist das neue WP-Tabs ein Tabmenü für Leute, welche etwas an mehr Features lieben. Erst mal gehört beim Erstellen der Tabs das spielerische Befassen dazu. Wenn – dann sind der Pro Version die Dinge dabei, die das kreieren erst so richtig Spaß machen. Das 'WP Tabs Pro' ist dann ein Tabmenü mit Sinn für Stil.

Anders als dem des Plug-ins Herzstück 'Expand Tabs lite', ist beim Plug-in 'WP Tabs' im WP-Editor nur mehr ein Aufruf zum Shortcode, der durch vorhergehende Erstellung des Inhalts direkt durch das Plug-in möglich ist. S. selbst Dialog Support.

Weiter ist auch hier die Vorlage, wie es mit Inhalt direkt im WP-Editor funktioniert:

[[tr_tabs][ir_item id="1" title="Tab title"]Tab item content ...[/ir_item] [ir_item id="2" title="Tab title"]Tab item content ...[/ir_item] [ir_item id="3" title="Tab title"]Tab item content ...[/ir_item][/tr_tabs]]

Die nun folgende Aufzeichnung ist aus der Version 'Expand Tabs lite 1.0' entstanden. Dieses ist in Installation des Plug-in 'WP Tabs' nur mehr durch ein Rollback zur Version 1.0 realisierbar.

[tr_tabs][ir_item id="1″ title="Tab title"]

Zur konformen Wiedergabe eignet sich Expand Tabs lite der Version 1.0 sowohl für "Standard-Template" mit Inhalts-Seitenleiste (re.) als auch in "Seite mit voller Breite".

Anmerkung für Bilder

Wenn mit Tabmenü mit Inhalt direkt in Beitrag/Seiten "Standard-Templates" keine Inhalts-Seitenleiste konfiguriert ist, wird Beitrag bzw. Seite in gesamter Seitenbreite angezeigt, und ein Bild das mit Text umfließen konfiguriert ist abgeschnitten. So  entweder Beitrag/Seiten mit Inhalts-Seitenleiste oder Bild ohne Textumfluss.

Bilder mit Beschriftung sind im Tab-Menü nicht geeignet, weil mit [ caption ] das nicht responsive ist und die Bilder in voller Größ darstellt. S. weiter im Tab Bspw.

[/ir_item] [ir_item id="2″ title="Design"]

– Die pro Version bietet variables Design, aber an und für sich leistet die freie Version das worauf es ankommt (hier wie immer angebracht: Danksagung dem Könner! – des Plug-ins.

Die Tabs diesem Beispiel sind Farbe und Größe zugeschnitten. Die Farbe ist hier über php-Datei zu verändern, da es im Gegensatz zur Größeneinstellung über CSS nicht ansprach – das php-Programm es so mag.

Die Farbe

Dashboard/Plugin/Editor/WP Expand/wp-expand-tabs-free/plugin-main.php (aktiv), modifiziert:

'background' => '#a4d3ee',
'color' => '#2B566E',

function tr_easy_tabs_pro_wrapper( $atts, $content = null ) {

 extract( shortcode_atts( array(
 'id' => '',
 'background' => '#a4d3ee',
 'color' => '#2B566E',
 'border' => '#f1f1f1',
 'effect' => 'scale',
 'open' => 1,
 'width' => '100%',
 'position' => 'horizontal',
 'hposition' => 'top',
 'vposition' => 'left',
 'rtl' => 'false',
 ), $atts ) );
Die Größe

Dashboard/Plugin/Editor/WP Expand/wp-expand-tabs-free/css/jquery.pwstabs.css (inaktiv), modifiziert:

padding: 8px 16px;

.pws_tabs_container ul.pws_tabs_controll li a{
 display: block;
 background-color: #46B3E6;
 padding: 8px 16px;
 text-decoration: none;
 color: #fff;
 margin-right: 3px;position: relative;
}

[/ir_item] [ir_item id="3″ title="Varia"]

List Stil und Links

Links welche innerhalb des Tabmenü in einer Aufzählungsliste dargestellt sind, sind nur durch Rechtsklick und Auswahl neuen Tab/Fenster zu öffnen.

Beispiel:
  • Demo (wp-expand-tabs-free), der Link ist nicht durch anklicke aufrufbar, kann nur durch Rechtsklick und Auswahl im neuen Tab/Fenster geöffnet werden.

Demo (wp-expand-tabs-free), Link ohne Listenpunkt öffnet normal, im gleichen oder neuen Fenster.

Inline-Quelltext – PHP Codes

Tabmenü: Im fortlaufenden Text sind die Tags lediglich der Schriftart in HTML "Courier New" mit farbiger Hinterlegung. Weitere Erklärung hier im Artikel. Folgendes ist nur eine Aufzeichnung, deren zur richtigen Darstellung gereichte es dann mit dem Plug-in 'Tabby Responsive Tabs'. Siehe die nächste Plug-in Beschreibung! 

Zur Darstellung von PHP Codes kann das Tab-Menü ungeeignet sein, da hiermit der Text nach rechts verschoben würde. Da helfen auch keite weiteren Tricks, dies zu umgehen.

Folgendes scheint anderem Zusammenhang zu sein:

Im Tabmenü wie auch im Showhide (Text aus- einkappen) ist scheinbar die Darstellung von Inline-Quelltext durch <code>Inline-Quelltext</code>, ohne Zeilenumbruch vor dem schließenden Tag </code>, nicht möglich.

Beispiel, ohne Zeilenumbruch (Texteditor):

Markiert Text als <code>Inline Quelltext</code> und hier geht’s textlich weiter …

… in etwa angezeigt (pseudo):

Markiert Text als
MARKDOWN_HASH7…tgf2133d89h usw.
und hier geht’s textlich weiter …

Anmerkung, vorbeugend Fehlschluss zur Anzeige MARKDOWN_usw. – Im Tabmenü sowie Showhide (Text aus- einklappen) wird obiges ohne Zeilenumbruch (Enter) vor </code> eben so angezeigt – (ob mit oder ohne Aktivierung "Markdown", s. Dashboard/Einstellungen/Diskussion).

Und, mit Zeilenumbruch (Enter):

Markiert Text als <code>Inline Quelltext ↵
</code> und hier geht’s textuell weiter …

Darstellung:

Markiert Text als Inline Quelltext
und hier geht’s textuell weiter…

Darstellung ist CSS: Also der Text kann im Tabmenü nach "Inline Quelltext" nicht normal weiter gereiht werden außerdem ist durch den Zeilenumbruch nach "Inline Quelltext" das rechte Padding vom Background nicht vorhanden und würde erst nochmaligen Zeilenumbruchs (Enter) konform.

Bemerkung: Der Code &nbsp; zur Darstellung eines Leerzeichens nach "Inline Quelltext" folgt nach umschalten in den Visuellmodus Löschung und würde, im Textmodus abgespeichert, ein lägeres Padding darstellen. 

Normaler Vorformatierung <pre>, oder wie folgend dargestellt mit <pre><code> und Zeilenumbruch vor dem schließenden Tag </code> – sehr wohl konforme Darstellung im Tabmenü:

Normaler Vorformatierung <pre>, oder <code> und Zeilenumbruch vor dem schließenden Tag </code> – sehr wohl konforme Darstellung :-)
Kategorie/Schlagwort

Beiträge mit Tabs, welche durch aufrufe von Kategorie, Tag (Schlagwort) oder Sucherebnissen in einem Fenster aufscheinen, sind die Tabs durch Überschneidung doppelt angezeigt.

Also bei spezifischen Aufruf (Kategorie, Tag, Suchergebnissen) wird das Tabmenü ggf. doppelt angezeigt – daher sollte vor dem Tab-Menü ein More-Tag (weiterlesen → ) eingefügt sein.

Ankerziel im Tab-Menü

Ein Ankerziel im Tabmenü ist nur im ersten Tab möglich, dessen Ankerziel konform dargestellt wird. Um danach denselben (ersten Tab) oder nächsten Tab korrekt zu öffnen, erfordert dies, vorerst den Letzten zu öffnen – somit ist eigentlich von einem Ankerziel im Tabmenü Abstand zu nehmen, s. Beispiel (öffnet in neuem Browsertab/Fenster).

[/ir_item] [ir_item id="4″ title="Bspw."]

Bspw.

Da die folgenden Beispiele dies erfordern, ist hier die kurze Erklärung, so, wiedergegeben.

  • Wenn der Inhalt direkt im Editor des Plug-ins 'Add New Tab' erstellt ist, würde folgendes funktionell sein. Also mit anschließenden einfügen des Shortcodes, bspw. [ wptabs id="124″ ] in den WP-Editor.
  • Hingegen den selben Inhalt direkt im WP-Editor im Tabmenü erstellt, als wie hier bspw. die Darstellung unzureichend ist:

 

1. Bei der Darstellung von gewissen Codes im Pre-Tag und / oder Code-Tag verschiebt sich der Inhalt (der Code ist ein bspw.).

add_filter('autoptimize_filter_main_hookpagecachepurge','__return_false');

2. Im Li-Tag gesetzte Links werden durch Anklicken nicht an die URL weitergeleitet.

  • Siehe hierzu im Tab 'Varia' List Stil und Links.

3. Bilder mit Bildbezeichnung, so dass in [ caption ] das Bild in voller Größe dargestellt ist:

Farbroller

[/ir_item] [/tr_tabs]

Also obige Ungereimtheiten dürfte im neuen 'WP Tabs' nicht mehr ganz so vorhanden sein, da dies durch die Erstellung direkt im WP Tab Editor funktioniert. – das welches System ich nicht bevorzugen möchte.

Noch mal so Test

Das Plug-in war im TEST okay! – wenns gefällt, bitte schön!

 Text aus- einklappen

Das folgende Plug-in ist hier nicht aktiviert, daher funktioniert es der Beispiele nicht. Bitte beachte, dass der folgende Text nur ein Entwurf ist und bleibt.

[showhide type="pressrelease"]
Im "Editor visuell" kann man den Code einfügen  [ showhide type="pressrelease" ] hier ist Text oder/und Bild [ /showhide ]

Es funktioniert auch nur mit Code [ showhide ] , aber ab zwei Infobuttons per Beitrag/Seite heißt es, da sonstiger Überschneidung, z. B.  [ showhide type="pressrelease1″ ]  und  [ showhide type="pressrelease2″ ] *.

* Jeweils ohne Lehrzeichen an den Innenklammern.

Um nach [ showhide type="pressrelease" ] verlässlich den richtigen Abstand zum folgenden Text evtl.:

Text aus- einklappen[showhide type="2"]<br class="clear" />Text …
Anmerkungen:

Text, der im Shortcode von "showhide" gefasst ist, wird über Lesemodus (Adresszeile im Browser) erst nach Ausklappen des Info Buttons angezeigt. Dann ist die Seite vorheriger Ansicht im Lesemodus erneut zu laden.

Direkt Einstellungsmöglichkeit des Plug-ins sind keine vorhanden, also auch die Geschwindigkeit des öffnen/schließen ist im 'Plug-in Editor' zu bewerkstelligen. Weitere Informationen s. Dashboard/Plugins/Editor wp-showhide/readme.txt.

Text des Öffnen/Schließen Hinweis ändern:

Dashboard/Plugins/Editor in der php-Datei wp-showhide/wp-showhide.php kann der Text modifiziert werden, z. B.: die Wortanzahl (%s More/Less Words) weglassen und ein Image einfügen :

Das Image ist hier so ein kleines Bildchen, wie es bspw. über iPads eigene Tastatur eingefügt werden kann.

// Extract ShortCode Attributes
 $attributes = shortcode_atts( array(
 'type' => 'pressrelease',
 'more_text' => __( '🔘 Info off/on', 'wp-showhide' ),
 'less_text' => __( '⚪ Info on/off', 'wp-showhide' ),
 'hidden' => 'yes'
 ), $atts );

Das zu 'Info off/on' und 'Info on/off' derlei des Bildchens funktionierte erst mit Emoji-Support deaktivieren. S.  https://fastwp.de/4903/.

Die Geschwindigkeit des Aus- und Einklappens definieren:

In selbiger PHP Datei wp-showhide/wp-showhide.php. Im unteren Teil des Scipts kann die Geschwindigkeit des Aus- und Einklappens geändert werden.

Siehe im Plugin Editor, originär:

.toggle('');

Siehe hier, modifiziert:

.toggle('slow');

 <?php else : ?>
 <script type="text/javascript">function showhide_toggle(a,b,d,f){var e=jQuery("#"+a+"-link-"+b),c=jQuery("a",e),g=jQuery("#"+a+"-content-"+b);a=jQuery("#"+a+"-toggle-"+b);e.toggleClass("sh-show sh-hide");g.toggleClass("sh-show sh-hide").toggle('slow');"true"===c.attr("aria-expanded")?c.attr("aria-expanded","false"):c.attr("Arie-expanded","true");a.text()===d?a.text(f):a.text(d)};</script>
 <?php endif; ?>
<?php
}

.toggle('')
= medium (Default), slow ist langsamer und fast ist fast kein sichtbarer Unterschied zu medium (Standard).

Anmerkung, Showhide und "Inline Quelltext":  Die Darstellung im <code> ist ohne Zeilenumbruch vor dem Schlusstag nicht möglich, s. Tabmenü ? "Inline Quelltext".

Im sowohl obiger Version gefällig als auch jQuery Effects, siehe "jQuery fadeToggle() Method", hier im Beispiel .fadeToggle('slow');
gleich der Ausführung dieses Beitrags "Text aus- einklappen":

<?php else : ?>
 <script type="text/javascript">function showhide_toggle(a,b,d,f){var e=jQuery("#"+a+"-link-"+b),c=jQuery("a",e),g=jQuery("#"+a+"-content-"+b);a=jQuery("#"+a+"-toggle-"+b);e.toggleClass("sh-show sh-hide");g.toggleClass("sh-show sh-hide").fadeToggle('slow');"true"===c.attr("aria-expanded")?c.attr("aria-expanded","false"):c.attr("aria-expanded","true");a.text()===d?a.text(f):a.text(d)};</script>
 <?php endif; ?>
<?php
}
  • Methode: .fadeToggle('fast');
    ist schon ähnlich .toggle('')
  • 'slow' 'fast'
     mit Hochkomma,
  • millisecunden (z. B. 3000)
    ohne Hochkomma.
Falls die internen Links mit Unterstrich sind…
/* Info-Button on/off ohne Unterstrich */
.sh-link A {
text-decoration: none;
}

[/showhide]


Aktualisiert im Jahr 2023-Juli