Text aus- einklappen. – Überdeckter scrollbarer Inhalt. – TabMenü.

Einen hübscheren Effekt als mit HTML des aus- und einklappen von Text (s. Hinweis), erreicht man mit dem Plug-in WP ShowHide, jedoch vom zusätzlichen Programm her (JavaScripts jQuery) unvergleichlich aufwendiger. Aber auch der Möglichkeit in allen Browsern darzustellen, ist es ein Plug-in der Wahl.

Dessen obige Möglichkeit eher für kurzen Textauszug geeignet ist, weil dessen längeren Auszugs wiederum die Übersichtlichkeit der Website infrage gestellt ist und ein Verzicht gegeben sein wird. Darum erscheint es für längeren Text besser, diesen im sog. „Overflow scroll gradient“ in kompakter Form wiederzugeben.

Ebenso einladend und praktisch ist ein „Tabmenü“ durch das Plug-in “Expand Tabs lite“ , das der Darstellung ohne weitere Worte überzeugt.

In Hinsicht SEO werden in Suchmaschine(n) die Inhalte dieser Features indexiert.

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 durch Features als Pluspunkt scheint. Des Weiteren aber, für konkret geforderten Suchbegriff innerhalb der angezeigten Website (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.

Siehe: Google wertet versteckte Inhalte in Tabs und Akkordeons nicht.

Text aus- einklappen (Info off/on)

Overflow scroll gradient
Überdeckter scrollbarer Inhalt

Hinweis folgend führt zu einem WebKit-Feature, welches Textinhalt in zweiter Linie des Hauptinhalts dargestellt werden kann:  Overflow scroll gradient, d. h. soviel wie „überdeckter scrollbarer Inhalt“: Fügt 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 Feature 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.

Kleine Anmerkung: Wenn z. B. wie hier 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, da es Response am iPad, also Mobilprogramms über den Inhaltsbereich hinausragen würde.

Tabmenü

Das Plug-in „Expand Tabs lite“ (jQuery) ist ein Tabmenü und eignet sich zur Darstellung punktuell verschiedener Inhalte (Demo)

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

Anmerkung für Bilder

Wenn mit Tabmenü einem 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.

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

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

Tabmenü: Im fortlaufenden Text sind die Tags lediglich der Schriftart in HTML „Courier New“ mit farbiger Hinterlegung (Erklärung hier im Artikel).

Im Tabmenü wie 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 wie folgend dargestellt mit <pre><code> und Zeilenumbruch vor dem schließenden Tag </code> – sehr wohl konforme Darstellung :-)

Anmerkung: Die farbige Hinterlegung geht aus dem CSS für <code> (<pre><code>) hervor.

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

 

Dem Features TabMenü könnte man diesen Hinweises „Mein Buttton“ zur Gefälligkeit für Besucher der Website einrichten.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Blog Website wegerl.at bedient sich dem Dienst Gravatar der Automattic Inc. In Angabe der E-Mail-Adresse, welche deiner Nutzung von Gravatar, erfolgt der Service nach Art. 6 Abs. 1 lit. f) DSGVO. – und nachdem dein Kommentar von wegerl.at freigegeben wurde, ist dein Profilbild öffentlich im Kontext deines Kommentars sichtbar.