Mit JGU Content Layout gruppieren Sie den Inhalt Ihrer Seite, z.B. als auf- und zuklappbare Liste, sogenannte Accordions.
Plugin JGU Content Layout einschalten
Plugin einschalten
Manche besondere Eigenschaften werden nur in einigen WordPress-Projekten benötigt. Da jede neue Eigenschaft Ihre Seite ein wenig langsamer macht, sind diese Erweiterungen standardmäßig deaktiviert. Die Erweiterungen heißen in WordPress Plugins. Zuerst müssen Sie ein Plugin (einmalig) aktivieren. Sie steuern die Plugins durch sogenannte Shortcodes. Shortcodes sind Kommandos auf Ihrer Webseite, mit dem Sie dem Plugin sagen, was genau es tun soll. Sie erkennen Shortcode-Kommandos daran, daß sie in der Webseite in eckigen Klammern stehen.
Bevor Sie das Plugin verwenden können, müssen Sie es zuerst einschalten!
Ansonsten werden Ihre Shortcodes nur auf der Seite angezeigt anstatt ausgeführt zu werden.
Gehen Sie zu Dashboard -> JGU Tools -> Plugins und aktivieren Sie das Plugin. Ausführliche Anleitung zum Plugin aus- und einschalten
Achtung : ❗ Wechseln Sie auf der Seite, an der Sie das Plugin durch den Shortcode verwenden wollen, in den Modus Text (Kartenreiter oben rechts), bevor Sie etwas an den Shortcodes ändern!
Live-Demo
So sieht das
→ JGU Content Layout – Accordions / Akkordeon aus.
Shortcode-Beispiel der Live-Demo
Text Block #1
Dieser erste Block ist in grün gestaltet.
Das kann man machen, indem man color="success" setzt.
Text Block #2
Dieser zweite Block ist in grau gestaltet.
Das kann man machen, indem man color="default" setzt.
Text Block #3
Dieser dritte Block ist in blau gestaltet.
Das kann man machen, indem man color="info" setzt.
Text Block #4
Dieser vierte Block ist in rot gestaltet.
Das kann man machen, indem man color="danger" setzt.
Text Block #5
Dieser verschachtelte Block ist in gelb gestaltet.
Das kann man machen, indem man color="warning" setzt.
Text Block #5
Dieser fünfte Block ist in weiß gestaltet.
Das kann man machen, indem man color="no-background" setzt.
Notwendiger äußerer Shortcode jgu_content_layout
Dieser Shortcode besteht aus einer äußeren Klammer und beliebig vielen Elementen in dieser äußeren Klammer.
Der Shortcode [jgu_content_layout] umgibt einmal 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]
display
Display steuert, wie der Inhalt Ihrer Seite dargestellt wird
Standard: lassen Sie den Parameter display weg, so wird Ihr Inhalt mit Reitern (tabs) dargestellt.
Werte: accordion, tab
Beispiel: [jgu_content_layout display="accordion"...[/jgu_content_layout]
searchbar
Damit blenden Sie das Suchfeld aus. Wir empfehlen, diesen Parameter nicht einzusetzen, weil sie dadurch wirklich alles in den Akkordeonfalten verstecken! Andersrum gesagt: 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 Elemente 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
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. Alles, was der Besucher potentiell sucht, also die Schlüsselworte, sollten also in den Überschriften stehen!
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].
Innerer 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 wird über die folgenden Parameter angepasst:
title
Titel des Blocks (Freitext)
Wert: eine beliebige unformatierte Zeichenkette
Beispiel: [jgu_content_layout_item title="Test"]Beispiel-Text[/jgu_content_layout_item]
color
Farbe für die Darstellung des Blocks
Werte: default (grau), success (grün), info (blau), warning (orange), danger (rot) und weiß (no-background)
(siehe http://holdirbootstrap.de/css/#helper-classes-colors)
Beispiel: [jgu_content_layout_item color="info"]Beispiel-Text[/jgu_content_layout_item]
status
Möglichkeit zu beeinflussen, ob dieser Block beim Laden der Seite geöffnet dargestellt werden soll
Standard: wenn dieser Parameter nicht gesetzt wurde, ist der Block beim Laden der Seite standardmäßig geschlossen
Werte: open,
Tipp: 💡 Es darf für beliebig viele Bereiche der Wert open gesetzt werden.
Beispiel: [jgu_content_layout_item status="open"]Beispiel-Text[/jgu_content_layout_item]
Zugänglichkeit
💡: Aus Gründen der Zugänglichkeit: Eine Verschachtelung von mehreren Accordions untereinander ist nicht vorgesehen. Im Hinblick auf die zunehmende Nutzung von Smartphones und auf die Barrierefreiheit (u.a. Screenreader) ist die Verwendung von Accordions eher zu vermeiden.
Nutzen Sie besser Links zu den gewünschten Unterseiten oder gliedern Sie Ihre Inhalte mit Hilfe von Überschriften.
Einschränkung
Diese Darstellungsform darf es jeweils nur einmal pro Seite geben!
Sie darf nicht kombiniert oder ineinander geschachtelt auf einer Seite verwendet werden, da es sonst zu ungewünschten Darstellungsproblemen führen kann.
Warnung: ⚠️ Es darf also auf einer Seite entweder ein Akkordeon oder eine Zielgruppenreiterleiste oder eine Tableiste geben!
Achtung: ❗ Diese Funktionen benötigen Javascript. Sollte Javascript im Browser deaktiviert sein, werden automatisch alle Inhalte dargestellt.
Häufiger Fehler
💡: Ihr Akkordeon verhält sich "komisch", die Suche funktioniert nicht, die Abstände zwischen den "Falten" sind zu groß, das auf- und zuklappen klappt nicht richtig? Der häufigste Grund ist das fehlende schließende [/jgu_content_layout]