Mit Text scrollen die Struktur;
so TabMenü die Übersicht

Dem Leser ist eine Struktur des Contents sehr von Vorteil. In erster Linie, wenn die Artikel etwas größer und so Nebeninfos sind. So bietet sich das schon dem Titel HTML des aus- und einklappen von Text. Weiter ist nun hier das mit den überdeckt scrollbaren Inhalt, das da und dort recht gefällig sein kann. Im nächst ist etwas ganz anders ein Tabmenü. Das ist dann für große Inhalte zur Übersicht und gleich mit Inhaltsverzeichnis sehr gut! Also hier geht es weiter im Motto der Website den Textbereich strukturieren.

• Im Ersten ist gleich das mit Overflow scroll gradient
• und im Zweiten das Plug-in Tabby Responsive Tabs.

Overflow scroll gradient

Das Feature ‚Scroller‘ führt zu einem WebKit, welches Textinhalts im Overflow scroll gradient ist. Weiter fügt es hier dem Element einen ‚Überblendungsgradienten‘ (Scrollleiste sichtbar) hinzu, um anzuzeigen, dass mehr Inhalt gescrollt werden kann.

• So folgend CodePen. overflow-scroll-gradient.
• Zum responsiv dann für before + after mit width:100%;. Denn die höchste verfügbare Breite passt auf jedem Bildschirm und ist so auch am Handy passend.
• Weiter für .overflow-scroll-gradient__scroller ist das mit width: auto; konform, denn das setzt sich auf die niedrigste verfügbare Breite.

Das CSS

Mit Anpassung font-size, height, padding usw. individuell.

/* --- Scroller für Textauszug --- */
.overflow-scroll-gradient {
position: relative;
margin: 25px 0;
}

.overflow-scroll-gradient::before {
content: '';
position:absolute;
top:0px;
width:100%;
height:25px;
background: linear-gradient(white, rgba(255, 255, 255, 0.001));
}

.overflow-scroll-gradient::after {
content: '';
position:absolute;
bottom:0px;
width:100%;
height:25px;
background: linear-gradient(rgba(255, 255, 255, 0.001), white);
}

.overflow-scroll-gradient__scroller {
overflow-y: scroll;
background: white;
width: auto;
height: 200px;
padding: 15px 10px;
font-size: 15px;
}

/* Scrollleiste sichtbar */
::-webkit-scrollbar {
width: 8px;
}

::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}

::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

Zum Bspw die Erläuterung im Scroller

Siehe auch CSS :: Overflow scroll gradient

Scroller für Textauszug

1. position: relative zum Elternelement erstellt einen kartesischen Positionierungskontext für Pseudoelemente.
2. margin ist der Aussenabstand für oben und unten.
3. ::before und ::after definiert ein Pseudo-Element.
4. background-image: linear-gradient(...) fügt einen linearen Farbverlauf hinzu, der von Transparent zu Weiß übergeht (von oben nach unten vs).
5. position: absolute nimmt das Pseudoelement aus dem Fluss des Dokuments heraus und positioniert es in Bezug auf das übergeordnete Element.
6. width entspricht der Größe des Bildlaufelements (das ein untergeordnetes Element des übergeordneten Elements mit dem Pseudoelement ist).
7. height bei before und after ist die Höhe des Fading-Gradienten-Pseudo-Elements, das relativ klein gehalten werden sollte. Weiter bei ...__scroller ist height die sichtbare Höhe des zu scrollenden Contents.
8. top und bottom positioniert das Pseudo-Element jeweilig am Rand des Elternelements.

Anmerkung: Die Auszeichnung …

• Für .overflow-scroll-gradient::before + .overflow-scroll-gradient::after sind mit width:100%;. Denn so die höchste verfügbare Breite passt auf jedem Bildschirm.
• Das .overflow-scroll-gradient__scroller ist mit width: auto; einzustellen, da so die Response auch am Handy. Denn width:auto; setzt sich auf die niedrigste verfügbare Breite.

Scrollleiste sichtbar

Das ist für die Scrollleiste vorab zur Sichtbarkeit und zeigt so zu scrollenden Inhalt. Die Scrollbar würde sonst erst ab scroll sichtbar. Des Letztren mit der Scrollleiste rechts, das ist Browser Firefox nicht funktionell. Mithin ist so auch das background: linear-gradient von Vorteil, da der zu scrollende Inhalt sich etwas abhebt.

Browser Firefox siehe Symbolbild ↓

Browser Chrome und Safari siehe Symbolbild ↓

Das HTML zum scrolle

<div class="overflow-scroll-gradient">
 <div class="overflow-scroll-gradient__scroller">
 Content to be scrolled
 </div>
</div>

Das ist dann im Frontend visuell, also nicht im Editor.

Bspw der zweiten Scrollbar von CSS variiert

• Da ist nun mit .overflow-scroll-gradient2 dann height: 125px; des Scollers background + font-size anders und ohne der Codes für before und after.
• Die Scrollleiste schmäler mit separater Class sma. Das schmäler geht dort dem width hervor.

/* --- Small Scroller für Textauszug --- */ 
.overflow-scroll-gradient2 {
position: relative;
margin: 25px 0;
}

.overflow-scroll-gradient2__scroller {
overflow-y: scroll;
background: #fdfdfd;
font-size: 14px;
width: auto;
height: 125px;
padding: 5px;
/*line-height: 1,2;*/
/*text-align: center;*/
}

/* Scrollleiste mit Class 'sma' für small */
.sma::-webkit-scrollbar {
width: 6px;
}

.sma::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 5px;
}

.sma::-webkit-scrollbar-thumb {
border-radius: 5px;
box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

↑ Overflow scroll gradient. 

Das Tabmenü

Das Tab-Menü ist zur Übersicht wie zur Darstellung punktueller Inhalte. Das Plug-in ‚Tabby Responsive Tabs‘ hat es an sich.

Der Hinsicht SEO

In Hinsicht SEO sind in Suchmaschinen die Inhalte vom Tabmenü indexiert. Anders ist das nämlich dann, wenn die Inhalte extra im Plug-in zu erstellen sind, s. bspw Ditty News Ticker. Dort sind dann mittels Shortcode die Inhalte im Gesamten eingefügt. Im obigen Gebrauch von Shortcodes ist das aber nicht relevant, da der Inhalt direkt im HTML-Bereich ist.

Die direkte Suche im Beitrag

Gemeint ist das für konkret geforderten Suchbegriff. Die Wortsuche im Browser: cmd+f für Mac, strg+f für Windows [ˈvɪndoːs;] ). Nach dem Aufruf der Website sollten so in einem all die Informationen sichtbar sein. … Das möchte jedermann bejahen! – aber nun mit Tab Menü ist dem nicht so. Dennoch, der Inhalt so gut strukturiert in einem Tab-Menü, das ist der Pluspunkt!

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]]

[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. – dafür gib mir dann das sackerl futter.

[tabbyending]

Mehrere Tabgruppen

Im Vergleich mit andern Plug-in könnte man meinen, dass auch ‚Tabby Responsive Tabs‘ nicht so einfach und leicht mehrmals der selben Seite eingefügt werden kann. Allerdings ist das hier schlicht machbar:

[[tabby title="First Tab"]]

Content

[[tabby title="Second Tab"]]

Content

[[tabby title="Third Tab"]]

Content

[[tabbyending]]

Nun das zweite Tabmenü derselben Seite

[tabby title=“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

[tabbylink tabgroup=3 tab=3 offset=100 fade=400]→ Zurück Tabgruppe 3 zum Tab 3 ←[/tabbylink]

[tabby  title=“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

Der Link für von mehr als einem Tabmenü derselben Seite exakt zum Tab des Menüs:

[tabbylink tabgroup=3 tab=1 offset=100 fade=400]→ Zurück Tabgruppe 3 zum Tab 1 ←[/tabbylink]

[tabby title=“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

[tabbylink tabgroup=3 tab=3 offset=100 fade=400]→ Zurück Tabgruppe 3 zum Tab 3 ←[/tabbylink]

[tabbyending]

Das CSS lässt sich im Heute im Customizer anpassen. Laut Plug-in-Autor am besten gleich die ganze style.css vom Plug-in kopieren und im Customizer einfügen. Zudem den Code in die functions.php:

remove_action('wp_print_styles', 'cc_tabby_css', 30);

Denn, damit ist der Abruf dieser Datei ausgeschlossen und jene vom Customizer kommt zum Tragen. Nach dem Anpassen des CSS über Customizer kann das auch in das Child-Theme übertragen werden.

Bemerkung

Ein Tab-Menü direkt im Tab-Menü, das geht nicht! – aber das wäre nur hier zur Demonstration mal nützlich gewesen.

Das ADD-ON Tabby Link to Tab

Statt einer Spende für das Plug-in kann man sich neben anderen ADD-ONS das Feature Tabby Link to Tab aussuchen.

1. Zum Verknüpfen von Registerkarten auf derselben Seite über einen Shortcode.
2. Link zum Öffnen eines Tabs auf derselben Seite über einen Shortcode bereitzustellen.

Vorlage

[[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

Ferner ist hier zur Einarbeitung das mit der Verwendung, Gestaltung und so Beispiele. Nebenher das dritte Tabmenü derselben Seite.

Zum Beispiel mit Inhaltsverzeichnis

[tabbylink tabgroup=3 tab=1 offset=100 fade=400]Verwendung[/tabbylink]
[tabbylink tabgroup=3 tab=2 offset=100 fade=400]Design der Tab-Links[/tabbylink]
[tabbylink tabgroup=3 tab=3 offset=100 fade=400]Beispiele[/tabbylink]
[tabbylink tabgroup=3 tab=4 offset=100 fade=400]Link auf Webseite mit Tab-Menü exakt den Tab[/tabbylink]

[tabby title=“Verwendung“]

Verwendungszweck

Im Ersten ist das sehr gut für ein Inhaltsverzeichnis vor dem Tabmenü.

Eben wenn des mehreren von Tabs in Nummerierung sind. Siehe zum bspw. ⇔ Das Feedback-Plug-in Helpful. Weiter ist so auch den Tabs zum nächst zu leiten.

Im Zweiten ist das auch für von mehr als einem Tabmenü derselben Seite.

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

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

Es gibt fünf Parameter

Es gibt vier Parameter, denen im Shortcode Werte zugewiesen werden können.

1. Registerkartengruppe [tabgroup]. Dies ist der Index der Registerkartengruppe auf der Seite. Normal ist eine Gruppe auf einer Seite, aber es können auch des mehr sein. Wenn nun eine zweites Tabmenü vor einem vorhandenen hinzugefügt wird, erhöht sich der Registerkartengruppenindex des vorhandenen um den Wert 1.
2. Registerkarte [tab]. Dies ist die Indexregisterkarte innerhalb derselben Registerkartengruppe.
3. Versatz [offset]. Dies ist die Anzahl der Pixel, die über der Registerseite angezeigt wird. Also um die Registerkarten anzuzeigen, nachdem auf den Link geklickt wurde. Minuswerte gehen nicht.
4. Einblenden [fade]. Die Zeit in Millisekunden, die der ausgewählte Tab-Inhalt nach dem Klicken auf den Link eingeblendet wird.
5. Class [class]. Der Tabbylink-Classe als auch separat dazu siehe mehr im nächst Tab.

Parameter

Die Parameter sind optional. Wenn die Parameter nicht angewendet werden, so sind die Standardeinstellungen:

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

Beispiele von Parameter

Wenn die Seite nur eine Registerkartengruppe enthält und der Inhalt beim Klicken auf den Shortcode-Link nicht direkt eingeblendet werden muss, so ist mit dem folgenden Shortcode eine Verknüpfung zur dritten Registerkarte in derselben Registerkartengruppe herzustellen:

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

Das ist dann mit dem Standard-44-Pixel-Versatz (Offset).

Wenn mehr als eine Registerkartengruppe so ist die dritte Registerkarte in der zweiten Registerkartengruppe zu verknüpfen:

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

Wie oben, dazu mit eingeblendetem Inhalt und einem Versatz (offset) von 100px:

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

Wie oben, dazu mit dem Classennamen bspw. talifa (Tabylinkfarbe), der dem Link hinzugefügt wurde:

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

Im nächst Tab ist das von CSS der Tab-Links auch das für separat durch Class.

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

[tabby title=“Design“]

Das Design der Tab-Links …

Die Tab-Links der Tabbylink-Classe 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;
}

Zusätzlich zu der Tabbylink-Classe, die für alle über einen Tabbylink-Shortcode Links gilt. Also verfügt dann jeder Link über einen Classenwert, der der Tab-Gruppe und dem Tab entspricht, mit dem er verknüpft ist. Um bspw einen Link zum vierten Tab der zweiten Tab-Gruppe zu erstellen, ist die Classe ‚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, erhalten diese denselben Stil. Aber für erwünscht anderen Stil ist der Shortcode in ein anderes Element einzuschließen, um ihn dem CSS-Selektor zuweisen.

Tab Links im Akkordeon-Modus verstecken

Wenn die Registerkarten als Akkordeon angezeigt werden, ist es oft nicht gut, die Links zum nächst Tab anzuzeigen. Gemeint ist hier das, wenn die Verknüpfungscodes für Registerkarten am unteren Rand des Inhalts der Registerkarte ist. Also um so einen Link zur nächsten Registerkarte bereitzustellen. Somit können die Tab-Links im Akkordeon-Modus auch ausgeblendet werden. Indem ist eine Regel einzurichten, die dem Medienabfrageabschnitt entspricht und hinzugefügt wird:

CSS

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

Tab-Links separat stylen

Des ‚class-Parameters‘ sind einzelne 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…

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

[tabby title=“Bspw“]

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 ]

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

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

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

Der Link nach links floatet

Zu sehen ist, wenn der Link nach links floatet, ebd. das mit float: left;.

Text davor ist hernach. [ tabbylink tabgroup=2 tab=1 offset=100 fade=400 ]→ Link zu Tab 1 in Tabgruppe 1 [ /tabbylink ]

Text davor ist hernach. [tabbylink tabgroup=2 tab=1 offset=100 fade=400]→ Link zu Tab 1 in Tabgruppe 1 [/tabbylink]

Anmerkung

Die ‚Tabgruppe‘  wie  der ‚Tab‘ sind ist in Nummer anzugeben [ tabbylink tabgroup=1 tab=1 ], nicht in [ tabby title="Beispiele" ]. Der Tabgruppen die Nummer ergibt sich von selbst so oben nach unten.

[tabbylink tabgroup=3 tab=4 class=talifa offset=100 fade=400]Link auf Webseite mit Tab-Menü exakt den Tab[/tabbylink]

[tabby title=“Link exakt“]

Link auf Webseite mit Tab-Menü exakt den Tab

Das ist perform, wenn so Linkziel in anderem Tab als dem Ersten ist. Bspw klick an ↔ Interaktion SVG-Bild und Ditty News Ticker.

• Durch den Parameter ?target=9 der URL ist der neunte Tab geöffnet. Die Zahl ‚9‘ geht aus dem Beispiel hervor, da der Tab so benannt ist. D. h. da ist der Name des Tabs relevant. Auf wordpress.org des Plug-ins ist zu sehen, STEUERN, WELCHE REGISTERKARTE BEIM VERKNÜPFEN MIT DER SEITE GEÖFFNET IST.
• Im weiter ist dem Dokument ein Anker zu setzen.
• Der Link dann so https://wegerl.at/css-hover-bildwechsel-audio-js/?target=9/#interaktion.

[tabbyending]

[mybutton]

↑ Plug-in Tabby Responsive Tabs. 

↑ Overflow scroll gradient. 

OT: Zulernen kann man selbst einer kleinen Bewertung:

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   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 Tabmenü

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:

[/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 Features ist hier nicht in Anwendung. Infolge ist das hier nicht in Funktion.

[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]