• Zum Inhalt springen
  • Zur Navigation springen
  • Zum Seitenende springen
Organisationsmenü öffnen Organisationsmenü schließen
Friedrich-Alexander-Universität Dokumentation der WordPress-Themes und -Plugins
  • FAUZur zentralen FAU Website
  1. Friedrich-Alexander-Universität
  2. Regionales Rechenzentrum Erlangen
  • RRZE
  • Videoportal
  • Lageplan und Anfahrt
  1. Friedrich-Alexander-Universität
  2. Regionales Rechenzentrum Erlangen
Friedrich-Alexander-Universität Dokumentation der WordPress-Themes und -Plugins
Menu Menu schließen
  • Grundlagen
    • Rahmenbedingungen für Webauftritte
    • Über WordPress
      • Grundsätzliches zum Webpublishing
      • Login und Navigation im Backend
      • Profil
      • Dashboard
      • Der Customizer
      • Einstellungen im Backend
      • Einen neuen Benutzer anlegen
    • Seiten
      • Eine Seite erstellen
      • Mehrere Seiten gleichzeitig konfigurieren
      • Seiten und Beiträge freigeben
    • Beiträge
    • Inhalte bearbeiten
      • Mediathek
      • Bilder
      • Galerie
        • Bildergalerie im Gridformat
      • Tabellen
      • Zitate
      • Formeln, Daten und Quellcode
    • Seitenstruktur erstellen
      • Kategorien und Schlagworte
      • Die Sidebar
    • Menüs
      • Menüs mit Widgets erstellen
    • Häufig gestellte Fragen
    Portal Grundlagen
  • Plugins
    • Plugins aktivieren
    • Externe Daten einbinden
      • Calendar
      • CRIS
      • FAU oEmbed
      • Jobs
      • Remoter
      • Statistik
      • UnivIS
      • Video
    • Neue Inhaltstypen erstellen
      • Expo
      • FAQ
      • Glossary
      • Person
      • Legal (ehemals ToS – „Terms of Service“)
      • RSVP
      • Synonym
    • Inhaltsseiten mit Funktionen erweitern
      • Contact Form 7
      • Downloads
      • Elements
      • Multilang
      • Ratebutton
      • TinyMCE Advanced
      • Verfallsdatum für Beiträge („Post-Expiration“)
    • Zugang beschränken
      • Access Control
      • Private Site
    • Beiträge teilen
      • Auto-Tweet
      • RSS
    • Plugin-Help
    • Spezialplugins
      • Newsletter
      • Progressive Web-App (PWA)
      • Workflow
    • Über Externe Plugins
    • Über FAU- und RRZE-Plugins
    Portal Plugins
  • Themes
    • FAU Einrichtungen
      • Umsetzungsbeispiele
      • Templates
        • Standardtemplate
        • Die Inhaltsseite mit Navi
        • Portalseite
        • Portalindexseite
        • Startseite
        • Startseite Fakultät
      • Shortcodes
        • Blogroll
        • Portalmenüs
        • Bildlinks
    • FAU Events
      • Startseite
      • Widget-Bereiche und Footer-Inhalt
      • Referenten und Vorträge
      • Shortcodes für Referenten und Vorträge
      • Call for Papers
      • Externe Anmeldeformulare einbinden
    Portal Themes
  • Entwicklung
    • Design
      • Farben (Markendesign 2021)
      • Logos
        • Logos zentraler Anwendungen
        • Einsatz im Videoportal
        • Einsatz im Social Media und auf Online-Plattformen
      • Schriften
    • Einsatzkontext (Statistik)
      • Einrichtungsbezeichnungen
    • Versionsverwaltung Git
    • Einheitliche Vergabe von Versionsnummern
    • Vorgaben an Themes
    • Vorgaben an Plugins
    • Eigene Testinstanz
    • Serverkonfiguration
    • Statistiken zu Webauftritten
    Portal Entwicklung
  • Tutorials
    • Schnelleinstieg FAU Events
    • Hinweise zur redaktionellen Arbeit
    • Publikationsliste erstellen
    • Tipps und Tricks
    • Neue Daten in die FAU-Karte einbinden
    • Vortragsliste erstellen
    • Schnelleinstieg FAU Einrichtungen
      • Vorbereitungen
      • Navigation im Backend und allgemeine Grundlagen in WordPress
      • Ein Theme auswählen
      • Seitenlogo und Seiteninformationen ergänzen
      • Eine Startseite erstellen
      • Rechtstexte generieren
      • Inhaltsseiten erstellen für Anfänger
      • Beiträge und die dynamische Sidebar
      • Abmessungen für Bilder und Grafiken
      • Beiträge und die dynamische Sidebar
      • Portale und die Seitennavigation
      • Blogroll und Finetuning
    • Barrierefreiheit
      • Vorwort und Überblick
      • Einführung und Hintergründe
      • Bereitstellung und Pflege von Inhalten
      • Entwicklung und Design
      • Organisatorische und rechtliche Anforderungen
      • Satzungen
      • Tests der Barrierefreiheit
      • Weitere Leitfäden und relevante Informationsangebote
      • Kurzanleitung zur Verbesserung der digitalen Barrierefreiheit in Dokumenten aus Büroanwendungen
    • SEO – Search engine optimization
      • SEO Inhalte gestalten
      • SEO Grundlagen
      • SEO und Barrierefreiheit
    Portal Tutorials
  1. Startseite
  2. Plugins
  3. Inhaltsseiten mit Funktionen erweitern
  4. Elements
  5. Accordion

Accordion

Bereichsnavigation: Plugins
  • Plugins aktivieren
  • Externe Daten einbinden
    • Calendar
      • Erste Schritte
      • Termine einbinden
      • Darstellungsbeispiele
    • CRIS
      • Typen-Filter
      • Einstellungen
      • Erweiterte Optionen
      • Automatische Synchronisierung
    • FAU oEmbed
      • Einbindung von Karten
      • Fragen & Antworten
    • Jobs
    • Remoter
    • Statistik
    • UnivIS
      • Attribute
      • Einzelne Lehrveranstaltungen
      • Einzelne Mitarbeiter
      • Voreinstellung der UnivIS-OrgNr.
      • Organisationsdaten einbinden
      • Mitarbeiterdaten einbinden
      • Lehrveranstaltungsdaten einbinden
      • Publikationsdaten einbinden
      • UnivIS im Gutenberg Editor
      • FAQ
    • Video
  • Neue Inhaltstypen erstellen
    • FAQ
      • Attribute
        • category
        • class
        • glossary
        • hide
        • id
        • order
        • show
        • sort
        • tag
      • Beispiele
        • Alle Attribute in Verwendung
        • Einzelne FAQ in vorgegebener Reihenfolge
        • FAQ nach Schlagwörtern filtern und in Kategorien gruppieren
        • Glossar mit expliziten Kategorien als A-Z Register
        • Glossar mit expliziten Kategorien als Tabs
        • Glossar mit expliziten Kategorien als Tagcloud
        • Glossar mit expliziten Schlagwörtern als A-Z Register
        • Glossar mit expliziten Schlagwörtern als Tabs
        • Glossar mit expliziten Schlagwörtern als Tagcloud
        • Glossar mit Kategorien als Tagcloud Register
        • Glossar mit Schlagwörtern als Tabs
      • FAQ von anderen Quellen beziehen
        • Domains registrieren
        • Protokoll
        • Synchronisieren
    • Person
      • Alle Formate in der Übersicht
      • Sortierung
      • Standardausgabe
      • Format card
        • Anwendungsbeispiele card
      • Format table
      • Format kompakt
      • Format page
      • Format sidebar
      • FAQ
      • Eine Kontaktübersicht anlegen
        • Kontaktübersicht Musterseite A
        • Kontaktübersicht Musterseite B
        • Kontaktübersicht Musterseite C
        • Kontaktübersicht Musterseite D
    • Legal (Rechtliche Pflichttexte)
    • Expo
    • Glossary
    • RSVP
      • Hilfsmittel und Hinweise zur Nutzung
      • Analoge Kontaktverfolgung
    • Synonym
  • Inhaltsseiten mit Funktionen erweitern
    • Contact Form 7
    • Downloads
    • Elements
      • Accordion
        • Accordions verschachteln
        • Accordion Sprungmarken
        • Accordion – Häufige Probleme und Fragen
      • Alerts / Hinweisboxen
      • Assistant
      • Buttons
      • Content-Index
        • Beispielseite Shortcode Content-Index
      • Content-Slider / Text-Slider
      • Einschub
      • Galerie
      • Hidden Text
      • LaTeX
      • Legal-text
      • Mehrspaltiger Inhalt
      • News
        • Custom News Beispielumsetzung
      • Notices / Absatzklassen
      • Timeline
    • Multilang
      • Mehrsprachigen Webauftritt mit einer einzelnen Instanz bereitstellen
      • Mehrsprachigen Webauftritt mit mehreren Instanzen bereitstellen
    • Ratebutton
    • TinyMCE Advanced
    • Verfallsdatum für Beiträge („Post-Expiration“)
  • Zugang beschränken
    • Access Control
    • Private Site
  • Beiträge teilen
    • Auto-Tweet
    • RSS
  • Plugin-Help
  • Spezialplugins
    • Progressive Web-App (PWA)
    • RRZE Newsletter
      • Newsletter-Module (Erweiterungen)
    • Workflow
      • Einstellungen
      • Redaktion
      • Dashboard
      • Benutzergruppen
      • Autoren
      • Versionierung
      • Aufgabenliste
      • Benachrichtigungen
      • Übersetzung
      • Netzwerk
      • Fremdsprachigen Webauftritt managen
  • Über Externe Plugins
  • Über FAU- und RRZE-Plugins

Accordion

Information in Ausklappmenüs verpacken

Beratung und Support

Webteam

Webteam

  • E-Mail: webmaster@fau.de
Beschreibung: Für alle Fragen rund um WordPress, Webhosting & Co.

GitHub

  • Repository
  • Fehler melden
Elements ist auf allen CMS-Instanzen vorinstalliert und bereits aktiviert. Sie können alle Elements-Shortcodes ohne vorangegangene Aktivierung benutzen.
Elements Accordions Übersicht
Elements Accordions Übersicht

Standard-Accordions

Leider unterstützt Ihr Browser keine HTML5-Videoformate. Rufen Sie dazu das Video RRZE Elements | Ein klassisches Akkordeon anlegen aus dem Videoportal der FAU auf.

Wenn Sie viel Information auf kleinem Raum anbieten möchten, können Sie statt der üblichen Absätze mit Überschriften auch ein Accordion verwenden. So werden nur die Überschriften angezeigt, die eigentliche Information erhält man auf Klick. Als Beispiel wählen wir hier einen Speiseplan:

Shortcode

Elements-Accordion-Shortcode
Elements-Accordion-Shortcode

Alle Anführungszeichen müssen im Backend für den Shortcode oben stehen. Bitte achten Sie darauf, dass die Anführungszeichen oben stehen, falls Sie einen Shortcode mit deutschen Anführungszeichen kopieren und in Ihrem eigenen Backend einfügen.

Shortcode

Ein einfaches Accordion können Sie folgendermaßen erzeugen:

[collapsibles]<- Shortcode für den Beginn des Accordions
[collapse title="Name" color=""] <- Shortcode für den Balken mit der Überschrift
Inhalt des Abschnitts (im Beispiel eine Tagesmenüauswahl im Speiseplan)
[/collapse] <- Ende des Abschnitts
[/collapsibles] <- Ende des Accordions

Der Shortcode collapse hat die Attribute title=““ und color=““. Das Attribut title=““ dient dazu, die Überschrift im Accordionbalken zu erzeugen – in unserem Beispiel ist das für den Menüplan am Montag also title=“Montag“.

Mögliche Attribute

Parameter Erklärung Beispiel eines gefüllten Parameters
title = „“ Erzeugt die Überschrift im Accordionbalken title = „Meine Überschrift“
load= „“ Das Akkordionfach ist beim Laden der Seite geöffnet load = „open“
color = „“ Färbt den Accordionbalken in eine der folgenden Fakultätsfarben:

phil
med
nat
rw
tf
Wird das Attribut leer gelassen, ist es die Standard-FAU Farbe

color = „philfak“
expand-all-link=““ Erzeugt einen Button um alle Akkordionfächer auf einmal zu öffnen expand-all-link=“true“
hstart=““ Bestimmt die Überschriften-Hierarchie-Ebene. Standardwert: 2. hstart=“2″

Akkordeons durch Icons und Suffix erweitern

Alle verfügbaren Icons können unter https://fontawesome.com/v4.7.0/icons/ nachgeschlagen werden.

Leider unterstützt Ihr Browser keine HTML5-Videoformate. Rufen Sie dazu das Video RRZE Elements | Icons und Suffixe aus dem Videoportal der FAU auf.
[collapsibles]<- Shortcode für den Beginn des Accordions
[collapse icon="pencil" title="Name" color="med" suffix="Text"] <- Shortcode für den Balken mit der Überschrift
Inhalt des Abschnitts (im Beispiel eine Tagesmenüauswahl im Speiseplan)
[/collapse] <- Ende des Abschnitts
[/collapsibles] <- Ende des Accordions

Name Text

Inhalt des Akkordeonfachs

Beispiele

Accordions mit „Open-All“ Button

Montag

Gericht 1
Gericht 2
Gericht 3

Dienstag

Gericht 4
Gericht 5
Gericht 6

Mittwoch

Gericht 7
Gericht 8
Gericht 9

Donnerstag

Gericht 10
Gericht 11
Gericht 12

Freitag

Gericht 13
Gericht 14
Gericht 15

Samstag

Gericht 16
Gericht 17
Gericht 18

Genutzer Code im Beispiel:

[collapsibles expand-all-link="true"]
[collapse title="Montag" color="" name="Montag"]
Gericht 1
Gericht 2
Gericht 3
[/collapse]

[collapse title="Dienstag" color="" name="Dienstag"]
Gericht 4
Gericht 5
Gericht 6
[/collapse]

[collapse title="Mittwoch" color="" name="Mittwoch"]
Gericht 7
Gericht 8
Gericht 9
[/collapse]
[collapse title="Donnerstag" color="" name="Donnerstag"]
Gericht 10
Gericht 11
Gericht 12
[/collapse]
[collapse title="Freitag" color="" name="Freitag"]
Gericht 13
Gericht 14
Gericht 15
[/collapse]
[collapse title="Samstag" color="" name="Samstag"]
Gericht 16
Gericht 17
Gericht 18
[/collapse]
[/collapsibles]

 


Accordionfarben

Farbe phil

Füllen Sie das Farb-Attribut mit color = „phil“ für die dargestellte Farbe.

Farbe med

Füllen Sie das Farb-Attribut mit color = „med“ für die dargestellte Farbe.

Farbe nat

Füllen Sie das Farb-Attribut mit color = „nat“ für die dargestellte Farbe.

Farbe rw

Füllen Sie das Farb-Attribut mit color = „rw“ für die dargestellte Farbe.

Farbe tf

Füllen Sie das Farb-Attribut mit color = „tf“ für die dargestellte Farbe.

Farbe Fau

Füllen Sie das Farb-Attribut mit color = „fau“ für die dargestellte Farbe.

Code

[collapsibles]
[collapse title="Farbe phil" color="phil" name="colsprungmarke1"]
Füllen Sie das Farb-Attribut mit color = "phil" für die dargestellte Farbe.
[/collapse] 
[collapse title="Farbe med" color="med" name="colsprungmarke2"]
Füllen Sie das Farb-Attribut mit color = "med" für die dargestellte Farbe.
[/collapse]
[collapse title="Farbe nat" color="nat" name="colsprungmarke3"]
Füllen Sie das Farb-Attribut mit color = "nat" für die dargestellte Farbe.
[/collapse]
[collapse title="Farbe rw" color="rw" name="colsprungmarke4"]
Füllen Sie das Farb-Attribut mit color = "rw" für die dargestellte Farbe.
[/collapse]
[collapse title="Farbe tf" color="tf" name="colsprungmarke5"]
Füllen Sie das Farb-Attribut mit color = "tf" für die dargestellte Farbe.
[/collapse]
[collapse title="Farbe Fau" color="fau" name="colsprungmarke6"]
Füllen Sie das Farb-Attribut mit color = "fau" für die dargestellte Farbe.
[/collapse]
[/collapsibles]

 


Regionales Rechenzentrum Erlangen
(RRZE)

Martensstraße 1
91058 Erlangen
  • Kontakt
  • Webworking Blog
  • Impressum
  • Datenschutz
  • Barrierefreiheit
  • RSS Feed
  • GitHub
  • Twitter
Nach oben