Text aus- einklappen und Tabmenü (JavaScripts / jQuery)

Einen schöneren Effekt als mit HTML des aus- und einklappens 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.

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) – meiner Beobachtung* „bing“ – die Inhalte beider Features indexiert.

* … meiner Beobachtung: da dieser meiner Website derweil nur die Suchmaschine „bing“ mithin „Yahoo!“ eingeladen ist.

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) die normale Form der gesamten Sichtbarkeit durchaus ein Vorteil ist.

Siehe: Google wertet versteckte Inhalte in Tabs und Akkordeons nicht

Text aus- einklappen:

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

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.