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

  • Einen hübscheren Effekt als mit HTML des aus- und einklappen von Text (s. Hinweis), erreicht man mit dem Plug-in WP ShowHide.
  • Mit überdeckt, scrollbaren Inhalt – für hin und wieder – ist ebenso eine Strukturierung für die Website.
  • Anders ein Tabmenü. Dessen ist für volumnöse Inhalte zur Übersicht geeignet.

Somit sind hier drei so Features kurz beschrieben.

Text aus- einklappen

Das aus- und einklappen von Text ist eher für kurzen Textauszug geeignet. Infolge längeren Auszugs wiederum die Übersichtlichkeit der Website infrage stellt und ein Verzicht gegeben ist. Darum erscheint es für längeren Text im sog. „Overflow scroll gradient“ wiederzugeben. Aber dies alles ist nur für Nebeninformationen geeignet. Der Fokus ist ohnehin in normaler Ansicht wiederzugeben.

Overflow scroll gradient
Überdeckter scrollbarer Inhalt

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

Ein Tab-Menü ist zur Übersicht einladend und praktisch. Die Plug-ins 'WP Tabs' und 'Tabby Responsive Tabs' hat jedes für sich sein gutes.

WP Tabs

Das Plug-in vormals im Namen 'Expand Tabs lite' ist ein Tabmenü und eignet sich zur Darstellung punktuell verschiedener Inhalte. 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. S. evtl. meine Bewertung, Hello!

Anders als dem des Plug-ins Herzstück von Stil, ist 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.

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.

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

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

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

 

Also obige Ungereimtheiten sind im neuen 'WP Tabs' nicht mehr vorhanden, da dies duch die Erstellung direkt im WP Tab Editor funktioniert.

↑ Plug-in Expand Tabs lite. 

Tabby Responsive Tabs

… das Plug-in Tabby Responsive Tabs überzeugt in einfacher Anwendung und Performanz. Dazu sind eben kein Bug von Darstellung der Bilder, den Links in Aufzählungszeichen und Codes vorhanden. Ebd. dessen ist auch der gefällige 'Einschwenk' des Inhalts nicht möglich. 

[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 – gib mir fisch.

Mehrere Tabgruppen

Wie man aber im Vergleich mit Plug-in 'Expand Tabs lite' meinen könnte, kann 'Tabby Responsive Tabs' nicht so einfach und leicht mehrmals der selben Seite eingefügt werden. Allerdings ist das 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 kommt auf die veranda zum schmeicheln und schnurren – gib Tabby kitty seinen fisch.

Third Tab

Tabby kitty springt in deinem schlaf auf dich und schnüffelt im gesicht. Und gibst du keine streicheleinheiten, so kratzt sie dich. – so gib tabby kitty seinen fisch.

Das CSS lässt sich im Heute im Customizer anpassen. Laut Plugin-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 ist das auch in das Child-Theme zu übertragen.

Bemerkung

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

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 im Text-Modus:

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

  • Add-On-Plugin 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 = 4 offset = 44 fade = 400] Link zu Tab 4 in Tabgruppe 1 [/tabbylink]

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 haben Sie nur eine Registerkartengruppe auf einer Seite, aber Sie können mehr als eine haben. Wenn Sie eine neue Registerkartengruppe vor einer vorhandenen hinzufügen, erhöht sich der Registerkartengruppenindex der vorhandenen um den Wert 1.

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, um die Registerkarten anzuzeigen, nachdem auf den Link geklickt wurde.

Viertens Einblenden [Fade]

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

Alle Parameter sind optional. Die Standardeinstellungen werden angewendet, wenn sie weggelassen werden. Diese sind:
tabgroup => 1
tab => 1
Offset => 44
Fade => 0
class => NULL (kein Wert)
Beispiele

Wenn die Seite nur eine einzige Registerkartengruppe enthält, der Inhalt beim Klicken auf den Link nicht eingeblendet werden muss und der Standard-40-Pixel-Versatz für Ihre Site geeignet ist, können Sie mit dem folgenden Shortcode eine Verknüpfung zur dritten Registerkarte in der Registerkartengruppe herstellen:

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

Verknüpfen Sie die dritte Registerkarte in der zweiten Registerkartengruppe mithilfe des Shortcodes:

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

Wie oben, jedoch mit eingeblendetem Inhalt und einem Versatz von 100px:

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

Wie oben, jedoch 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.

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 auch einzelne Tab-Links für das Styling ausgewählt werden. Zusätzlich zu der Tabbylink-Klasse, die für alle über einen Tabbylink-Shortcode hinzugefügten Links gilt, verfügt jeder Link über 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, können Sie die Klasse 'tabbylink-2-4' verwenden:

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. Wenn Sie einen anderen Stil benötigen, können Sie den Shortcode in ein anderes Element einschließen, um ihn dem CSS-Selektor hinzuzufügen.

Tab Links im Akkordeon-Modus verstecken

Wenn die Registerkartengruppen als Akkordeon angezeigt werden, ist es wahrscheinlich nicht angebracht, die Links anzuzeigen, wenn die Verknüpfungscodes für Registerkarten am unteren Rand des Registerkarteninhalts verwendet werden, um einen Link zur nächsten Registerkarte bereitzustellen. Die Tab-Links können im Akkordeon-Modus ausgeblendet werden, indem Sie sie in den Regeln ausrichten, die dem entsprechenden Medienabfrageabschnitt hinzugefügt wurden:

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

↑ Plug-in Tabby Responsive Tabs. 

Zulernen kann man selbst einer kleinen Bewertung zu einem Plug-in:

„å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.

Anmerkung in Hinsicht SEO

In Hinsicht SEO sind in Suchmaschinen die Inhalte dieser Features indexiert. Anders, nämlich dann, wenn die Inhalte im Gesamten* mittels Shortcode eingefügt sind. Im obigen Gebrauch von Shortcodes ist das aber nicht relevant, da die Inhalte direkt im HTML-Bereich sind.

*Im Gesamten, d. h. bspw. der Content ist über Plug-in WP Tabs direkt in dessen Editor erstellt, gleich, wie bei Ditty-News-Ticker und nur mit Shortcode [ ditty_news_ticker id=“123″ ] in den Beitrag eingefügt ist.

… und die direkte Suche im Beitrag

Die Vorgehensweise, dass beim Aufruf von der Suchmaschine besagte Informationen bereits der Website sichtbar sein sollten, möchte jedermann bejahen. Jedoch bei vielgestaltig Illustration eines Beitrags die strukturierte, übersichtliche Wiedergabe ein Pluspunkt ist. Hingegen für konkret geforderten Suchbegriff innerhalb der Seite (Wortsuche im Browser: cmd+f für Mac, strg+f für Windows [ˈvɪndoːs;] ) die normale Form der gesamten Sichtbarkeit durchaus ein Vorteil ist.

Der Beitrag ist so weit, so gut …