Im Folgenden finden Sie ein Beispiel zur Darstellung von Inhalten in Accordions.
Inhaltsverzeichnis
Plugin JGU Content Layout einschalten
Aktivieren Sie das Plugin mit: Dashboard - JGU Tools - Plugins - Aktivieren
Dort dem Hinweistext folgen.
Ausführliche Anleitung zum Plugin aus- und einschalten
Live-Beispiel
So sieht das
→ JGU Content Layout – Accordions / Akkordeon aus.
Zugehöriger Quelltext
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
[jgu_content_layout display="accordion"] [jgu_content_layout_item title="Erster Block - Darstellung in grün" color="success"]Text Block #1 Dieser erste Block ist in grün gestaltet. Das kann man machen, indem man color="success" setzt.[/jgu_content_layout_item] [jgu_content_layout_item title="Zweiter Block - Darstellung in grau (Standard) - geöffnet" color="default" status="open"]Text Block #2 Dieser zweite Block ist in grau gestaltet. Das kann man machen, indem man color="default" setzt.[/jgu_content_layout_item] [jgu_content_layout_item title="Dritter Block - Darstellung in blau - geöffnet" color="info" status="open"]Text Block #3 Dieser dritte Block ist in blau gestaltet. Das kann man machen, indem man color="info" setzt.[/jgu_content_layout_item] [jgu_content_layout_item title="Dritter Block - Darstellung in rot - geöffnet (hat eine Verschachtelung!)" color="danger"]Text Block #4 Dieser vierte Block ist in rot gestaltet. Das kann man machen, indem man color="danger" setzt.[/jgu_content_layout_item] [jgu_content_layout_item title="Vierter Block - Darstellung in gelb" color="warning"]Text Block #5 Dieser verschachtelte Block ist in gelb gestaltet. Das kann man machen, indem man color="warning" setzt. [/jgu_content_layout_item] [/jgu_content_layout] |
Erläuterungen
Suchfeld über dem Accordion
Über dem Accordion wird rechts ein Suchfeld eingeblendet. Dies ist notwendig, da bei der Suche über Browserfunktion (z.B. über STRG + F) nur Inhalte gefunden werden, die auch im Browser "sichtbar" sind, d.h. die im Accordion aufgeklappt sind.
Das Suchfeld durchsucht alle Accordion Bereiche und zeigt nur Bereiche, die den eingegebenen Suchbegriff enthalten bzw. blendet die anderen Element aus.
Mit dieser dynamischen Suchfunktion ist diese Darstellung optimal einsetzbar für z.B. FAQ Seiten.
Es ist auch möglich, dieses Suchfeld auszublenden, indem man im Shortcode [jgu_content_layout] den Parameter searchbar="Off" hinzufügt (siehe auch unten).
Suchmaschinen finden die Inhalte auch des zugeklappten Textes. Gerade daher ist es wichtig, die Suche anzubieten, denn wenn man auf der Seite als Treffer landet und mit STRG + F nichts findet, ist das für Ihre Besucher frustrierend. Wichtiges Schlüsselworte sollten also in den Überschriften stehen!
Shortcode jgu_content_layout
Der Shortcode [jgu_content_layout] umgibt den gesamten Inhaltsbereich, der als Accordion dargestellt werden soll, d.h. am Ende muss dieser Shortcode mit [/jgu_content_layout] geschlossen werden. Dieser Shortcode benötigt den Parameter display="accordion".
Beispiel: [jgu_content_layout display="accordion"]...[/jgu_content_layout]
Weiterer Parameter (optional):
- Parameter:
searchbar
Funktion: Suchfeld ausblenden
Möglicher Wert: Off
Beispiel:[jgu_content_layout display="accordion"searchbar="Off"]...[/jgu_content_layout]
Die Punkte werden ersetzt durch den folgenden Shortcode [jgu_content_layout_item].
Shortcode jgu_content_layout_item
Der Shortcode [jgu_content_layout_item] umgibt den Inhalt eines Blocks im Accordion und muss am Ende mit [/jgu_content_layout_item] geschlossen werden. Innerhalb dieses Bereichs kann der Text auch formatiert werden (siehe Beispiel oben).
Der Shortcode kann über die folgenden Parameter angepasst werden:
- Parameter:
title
Funktion: Titel des Blocks (Freitext)
Beispiel:[jgu_content_layout_item title="Test"]Beispiel-Text[/jgu_content_layout_item] - Parameter:
color
Funktion: Farbe für die Darstellung des Blocks
Mögliche Werte: default (grau), success (grün), info (blau), danger (orange) und warning (rot)
(siehe http://holdirbootstrap.de/css/#helper-classes-colors)
Beispiel:[jgu_content_layout_item color="info"]Beispiel-Text[/jgu_content_layout_item] - Parameter:
status
Funktion: Möglichkeit zu beeinflussen, ob dieser Block beim Laden der Seite geöffnet dargestellt werden soll
Mögliche Werte: open, wenn dieser Parameter nicht gesetzt wurde, ist der Block beim Laden der Seite standardmäßig geschlossen
Hinweis: Es darf für beliebig viele Bereiche der Wertopengesetzt werden.
Beispiel:[jgu_content_layout_item status="open"]Beispiel-Text[/jgu_content_layout_item]