Text aus- einklappen. – Text scrollen. – TabMenü.

Den Websites ist im Textbereich eine weitere Strukturierung sehr von Vorteil. Besonders wenn die Artikel etwas größer und da so Infos sind. So bietet sich das schon dem Titel HTML des aus- und einklappen von Text. So ist netter Effekt ob dem Plug-in WP ShowHide. Weiter ist das auch für hin und wieder mit den überdeckt scroll Inhalt. Ganz anders ist ein Tabmenü. Das ist dann für große Inhalte zur Übersicht sehr gut! Also der Website Textbereich strukturieren. Dazu sind hier drei so Dinge kurz gezeigt.

Drei so Features. – kurz beschrieben

 Text aus- einklappen

Das Features ist hier nicht in Anwendung. Infolge ist das hier eine Aufzeichnung und nicht in Funktion.

Das aus- und einklappen von Text ist eher für kurzen Textauszug. Infolge das für längeren Auszugs die Übersichtlichkeit der Website infrage stellen kann. Darum wäre das von längeren Text viel besser im  "Overflow scroll gradient". Sehe den nächst Tipp.

Dies ist also nur für Nebeninformationen geeignet. Der Fokus des Artikels ist ohnehin in normaler Ansicht wiederzugeben.

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

 

Overflow scroll gradient 

Das Feature 'Scroller' führt zu einem WebKit, welches Textinhalt im Overflow scroll gradient darzustellen ist. Hierzu fügt es einem überlaufenden Element einen 'Überblendungsgradienten' hinzu, um anzuzeigen, dass mehr Inhalt gescrollt werden kann.

Dem obigen Linkhinweis Button EDIT ON CODEPEN folgen! – ein fulminanter HTML-, CSS- und JS-Editor empfängt Dich.

HTML

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

CSS

Mit Anpassung font-size, width und padding und /* auskommentiert */ line-height und text-align:

/* Scroller für Textauszug */
.overflow-scroll-gradient {
 font-size: 14px;
 position: relative;
}

.overflow-scroll-gradient::after {
 content: '';
 position: absolute;
 bottom: 0;
 width: 474px;
 height: 25px;
 background: linear-gradient(rgba(255,255,255,0.001),white);
/* transparent keyword is broken in Safari */
 pointer-events: none;
}

.overflow-scroll-gradient__scroller {
 overflow-y: scroll;
 background: white;
 width: 474px;
 height: 200px;
 padding: 15px;
/*line-height: 1,2;*/
/*text-align: center;*/
}

Das wird sodann auf der Webseite visuell, also nicht im Editor.

Explanation (Erläuterung)
  1. position: relative zum Elternelement erstellt einen kartesischen Positionierungskontext für Pseudoelemente.
  2. :: after definiert ein Pseudo-Element.
  3. background-image: linear-gradient(...) fügt einen linearen Farbverlauf hinzu, der von Transparent zu Weiß übergeht (von oben nach unten).
  4. position: absolute nimmt das Pseudoelement aus dem Fluss des Dokuments heraus und positioniert es in Bezug auf das übergeordnete Element.
  5. width: 240px entspricht der Größe des Bildlaufelements (das ein untergeordnetes Element des übergeordneten Elements mit dem Pseudoelement ist).
  6. height: 25px ist die Höhe des Fading-Gradienten-Pseudo-Elements, das relativ klein gehalten werden sollte.
  7. bottom: 0 positioniert das Pseudo-Element am unteren Rand des Elternelements.
  8. pointer-events: none gibt an, dass das Pseudo-Element kein Ziel von Mausereignissen sein darf, so dass Text dahinter immer noch auswählbar / interaktiv sein kann.

Anmerkung: Wenn z. B. der Contentbereich auf 524px erweitert, anstatt der normalen 474px, so muss die Auszeichnung für .overflow-scroll-gradient::after und .overflow-scroll-gradient__scroller für "width" dennoch width: 474px; eingestellt sein. Warum? – da es Response im Mobilprogramm über den Inhaltsbereich hinausragen würde.

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.

… und 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!

  • In Performanz und Funktionalität so nächst das Plug-in 'Tabby Responsive Tabs'. Zudem bietet es Add-ons, die von Nutzen sind.

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

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

Also:

First Tab

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

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.

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.

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

Anstatt einer Spende für das Plug-in kann man sich neben anderen ADD-ONS das Feature Tabby Link to Tab aussuchen. Hiermit führt dann ein Menü direkt zum betreffenden Tab.

Ein bspw. siehe ⇔ https://wegerl.at/autoptimize-und-async-javascript/#ih. Hier ist ein Ausschnitt:

[tabbylink tab=1 offset=100 fade=400]Tab 1: Autoptimize im Prinzip (3)[/tabbylink]
[tabbylink tab=2 offset=100 fade=400]Tab 2: Die Konfigurierung und manches zur Fehlerbehebung (6)[/tabbylink]
[tabbylink tab=3 offset=100 fade=400]Tab 3: Das 'Inline und Defer CSS', zur Erklärung ein paar Worte und zur Ausführung mehr. (3)[/tabbylink]
Die originäre txt-Datei des ADD-ON Tabby Link to Tab
  • Das Add-On zum Verknüpfen von Registerkarten auf derselben Seite über einen Shortcode.
  • Add-on für Tabby-responsive Tabs, um einen Link zum Öffnen eines Tabs auf derselben Seite über einen Shortcode bereitzustellen.

Verwendung

Verwendungszweck:

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

→ Link zu Tab 3 in Tabgruppe 1

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

Erstens Registerkartengruppe [tabgroup]

Dies ist der Index der Registerkartengruppe auf der Seite. Normalerweise ist eine Registerkartengruppe auf einer Seite, aber es können auch des mehr sein. Wenn nun eine zweite Registerkartengruppe vor einer vorhandenen hinzufügt ist, erhöht sich der Registerkartengruppenindex der vorhandenen um den Wert 1. … Ebd. ist das nur mit des ADD-ON Tabby Link to Tab mit [tabgroup] relevant.

Zweitens Registerkarte [tab]

Dies ist die Indexregisterkarte innerhalb der Registerkartengruppe.

Drittens 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.

Viertens Einblenden [Fade]

Die Zeit in Millisekunden, die der ausgewählte Tab-Inhalt nach dem Klicken auf den Link eingeblendet wird.

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:

* … zur direkten Einblendung des Links, der auch unterhalb zu einer Überschrift und / oder von anderer Website her leitet, dazu ist dann das ADD-ON Tabby Tab to URL Link.

[ 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 Klassennamen custom-tablink, der dem Link hinzugefügt wurde:

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

Gestaltung

Die Gestaltung der Tab-Links …

Die Links können durch Ausrichten der Tabbylink-Klasse gestaltet werden. In den folgenden CSS-Regeln werden die Links beispielsweise als einfache rechtsbündige Schaltflächen formatiert.

CSS

a.tabbylink {
border: 1px solid #777;
border-radius: 3px;
color: #555;
display: block;
float: right;
clear: both;
padding: 0 10px;
margin-bottom: 20px;
text-align: right;
text-decoration: none;
}

a.tabbylink:hover {
background: #777;
color: #fff;
}

Es können einzelne Tab-Links gestylt werden. Zusätzlich zu der Tabbylink-Klasse, die für alle über einen Tabbylink-Shortcode Links gilt. Also verfügt dann jeder Link über einen Klassenwert, 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 Klasse 'tabbylink-2-4' zu verwenden:

CSS

a.tabbylink-2-4 {
border: 1px solid #bada55;
color: #bada55;
}

a.tabbylink:hover {
background: #bada55;
color: #fff;
}

Eine zusätzliche Klasse zum Gestalten einzelner Links kann auch mithilfe des class-Parameters angegeben werden.

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;
}
}

Nun 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 …

→ Link zu Tab 1 in diesem Tab-Menü Weiter …

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

→ Link zu Tab 1 in Tabgruppe 1

Und zu berücksichtigen ist, dass der Link nach links floatet, egal ob davor ein Text ist.  Das ist erst mal zu Durchblicken … bspw also:

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

Text davor ist hernach. → Link zu Tab 1 in Tabgruppe 1

Auch so, wenn nach dem Shortlink ein Text ist.

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

Text davor. → Link zu Tab 1 in Tabgruppe 1 Text danach.

Etc.

Anmerkung: Die Tabgruppe ist nur [ tabbylink tabgroup=1 tab=1 ], nicht in [ tabby title="Nun Beispiele!" ]. Die Reihung von Tabgruppen ergibt sich selbst.

↑ Plug-in Tabby Responsive Tabs. 

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://de.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.

Fazit: blass SinNvoll.

 

Hinweis: Das nun folgende Plug-in WP Tabs ist hier leider nicht aktiv, so sind die Shortcodes leer. Dies ist also nur eine Aufzeichnung von Erfahrungswert und das Plug-in hat auch etwas für sich. 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.

Plug-in WP Tabs

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. Und vorab der Hinweis zum GNU Betriebssystem.

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

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.

… Und wie ist dein Erfolg des Beitrags?