In diesem ersten Kapitel geht es um Akkordions und Akkordeon-Fächer.
Um einen Akkordeon zu erstellen, wechsle ich immer gerne in den Textmodus.
Aber zur Erinnerung, Sie können im visuellen Modus unter Einfügen, RCD Elements auch immer
das allgemeine Grundgerüst für einen Akkordeon erstellen lassen, falls Ihnen mal entfällt,
wie der Shortcode eigentlich funktioniert.
Da ich in diesem Kurs das Ganze von Grund auf erstellen möchte, werde ich diesen Vorlagencode
erstmal wieder entfernen und einfach in einem leeren Texteditor das Ganze jetzt demonstrieren.
Jedes Akkordeon beginnt mit dem Shortcode Collapsibles.
Hierzu gehört ein öffnender und ein schließender Shortcode.
Alles was in diesen Shortcode hineinkommt, sind nun die Definitionen für das Akkordeon,
also die verschiedenen Akkordeonreiter.
Ohne Akkordeonreiter wird man hier auch nichts sehen, also ich kann die Seite aktualisieren,
dann in einem neuen Tab öffnen und ich werde nichts auf der Seite sehen, da ich keinen Akkordeonreiter
vergeben habe.
Um jetzt ein Akkordeonfach zu erstellen, kann ich Collapse verwenden und das ganze
wieder schließen.
Wenn ich das dann wieder anschaue, sehe ich meinen ersten Akkordeonfächer.
Allerdings hat dieser Fächer noch keinen Titel.
Natürlich kann ich gleich mehrere Reiter anlegen, das heißt ich kann hier natürlich noch einen
zweiten oder noch einen dritten oder einen vierten Fächer anlegen.
Das ganze aktualisieren und jetzt sollte ich im Akkordeon entsprechend vier Fächer
angezeigt bekommen.
Um jetzt einen Titel zu vergeben, benutze ich das ganz einfache Attribut Title.
Das kann ich dann für die anderen Fächer entsprechend wiederholen.
Und nach dem Aktualisieren der Seite wird der Akkordeon Fächer dann mit dem neuen Titel
ausgegeben.
Aktuell sind alle Fächer in klassischem Blau gehalten, also im FAU-Blau.
Um die Farbe auf eine Farbe der Fakultät zu ändern, kann das Ganze entsprechend über
das Attribut Color passieren.
In diesem Fall gebe ich jedem Reiter mal eine andere Farbe.
Das Kürzel wird dabei immer für die entsprechende Fakultät verwendet.
Für die technische Fakultät wäre das Kürzel TF.
Nach dem Aktualisieren erscheint jeder Reiter dann in der entsprechenden Fakultätsfarbe.
Inhalte werden immer zwischen dem öffnenden und schließenden Collapse Shortcode definiert
bzw. eingetragen.
Hier können klassische Überschriften verwendet werden, z.B.
eine H3 Überschrift, aber auch Bilder über Dateiten zufügen und Texte.
Auch hier kann man das ganze entsprechend aktualisieren und dann im neuen Tab öffnen.
Man hat jetzt noch die Möglichkeit einen Button zu erstellen mit einem weiteren Attribut.
Dieses wird entsprechend im Collapsibles Shortcode definiert.
Wenn man expand all, link true hier oben noch als Attribut quasi vergibt, also expand all,
link und dann is-gleich-true, dann wird dieser Button ausgegeben und zwar im oberen rechten
Reiter.
Wenn man hier dann draufklickt als Nutzer öffnen sich alle Fächer gleichzeitig und
schließen sich dann auch wieder.
Und man kann es notwendig sein, dass die Überschrift-Ebene der verschiedenen Fächer angepasst wird.
Zur Erinnerung, in diesem Beispiel wäre erste Akkordeon-Fächer eine H2-Überschrift.
Genauso die anderen verschiedenen Fächer hätten immer eine H2-Überschrift als entsprechende
Hierarchie-Ebene.
Der Seitentitel, also Akkordeons, ist eine H1-Überschrift.
Das bedeutet H1, H2, H3.
Wenn man jetzt aber über den Akkordeon-Fächern eine Überschrift hat, zum Beispiel eine
H2-Überschrift, dann sollten die Akkordeon-Fächer nicht auch eine H2-Überschrift beinhalten.
Deshalb verwendet man dann das Attribut H-Start und sagt, dass die Akkordeon-Fächer eine
Überschrift-Ebene von 3 besitzen.
Man muss dann auch natürlich darauf achten, dass in Akkordeon-Reiter selbst auch eine H4
verwendet wird.
Nach dem Aktualisieren sieht man zumindest am Frontend nicht viel, da entsprechend diese
Überschrift-Ebenen natürlich zumindest bei den Akkordeon-Fächern nicht direkt sichtbar
sind, sondern nur vom Prozer lesbar.
Es ist wichtig, eine sinnvolle Überschriftenhierarchie zu schaffen, vor allem für Suchmaschinen,
aber auch für die Nutzer am Ende.