Aufklappbare Link- und Downloadlisten in WordPress verwalten
PDF-Dateien, Videos, Audiodateien und weiterführende Seiten erhalten in einer gemeinsamen Liste eine erkennbare Ordnung. Der «Details Dropdown Block» bündelt die Einträge in einem aufklappbaren Bereich und kennzeichnet jeden Typ automatisch mit dem passenden Icon.
Link- und Downloadlisten führen Dokumente, Medien und weiterführende Seiten an einer Stelle zusammen. Eine sichtbare Unterscheidung hilft Besucherinnen und Besuchern, den Inhalt eines Links vor dem Öffnen einzuordnen.
Für diese Aufgabe haben wir den «Details Dropdown Block» entwickelt. Der Gutenberg-Block verwaltet die Einträge direkt im Editor, ordnet sie in einer Linkgruppe und gibt sie im Frontend als aufklappbaren Bereich aus.
Links und Downloads in einer Liste pflegen
Titel der Linkgruppe und einzelne Einträge werden über eine gemeinsame Eingabemaske bearbeitet. PDF-Dateien, Videos, Audiodateien sowie interne und externe Links lassen sich hinzufügen und per Drag-and-drop in die gewünschte Reihenfolge bringen.
Der Block erkennt den jeweiligen Link- oder Dateityp und ergänzt im Frontend das dazugehörige Icon. So wird beispielsweise ein Download als PDF, eine interne Seite als Seitenlink und eine externe Website als externer Verweis erkennbar.
Pflege im Editor und Ausgabe auf der Website
Im Editor verwaltet die Redaktion Titel, Linkziele und Reihenfolge der Einträge. Im Frontend fasst ein aufklappbarer Bereich die Liste kompakt zusammen. Besucherinnen und Besucher öffnen die Linkgruppe und gelangen direkt zu Dokumenten, Medien oder weiterführenden Seiten.
Links im passenden Kontext öffnen
Interne Links und PDF-Dateien öffnen sich im selben Tab. Externe Links führen in einen neuen Tab. Der Block übernimmt diese Zuordnung anhand des jeweiligen Linktyps.
Damit bleibt der Umgang mit den verschiedenen Zielen nachvollziehbar: Downloads und Seiten der eigenen Website führen innerhalb des aktuellen Besuchs weiter, externe Angebote bleiben als separates Ziel erkennbar.
Technische Grundlage für die Gestaltung
Der Block basiert auf @wordpress/scripts und verwendet DND Kit für die Sortierung per Drag-and-drop. Die Ausgabe besteht aus strukturiertem HTML und lässt sich über CSS an das jeweilige WordPress-Theme anpassen.
Ergebnis
Linklisten kompakt pflegen und schnell erfassen
Der Block verbindet eine übersichtliche Pflege im Gutenberg-Editor mit einer gut lesbaren Linkliste im Frontend. Icons, Reihenfolge und Linkverhalten machen unterschiedliche Inhalte unmittelbar verständlich.
Links direkt pflegen
PDF-Dateien sowie interne und externe Links werden in einer gemeinsamen Eingabemaske verwaltet.
Reihenfolge selbst bestimmen
Die Einträge lassen sich per Drag-and-drop so anordnen, wie sie auf der Seite erscheinen.
Ziele sofort erkennen
Icons und Linkverhalten unterscheiden Download, interne Seite und externe Website sichtbar voneinander.