WordPress: Definitionslisten HTML5 Description List – Verwendung – Styling mit CSS – so geht’s

Dieser Beitrag zeigt dir die Definitions Listen in WordPress. Gibt es sie überhaupt noch und wozu wenn ja ?

Definitions Listen und Block Editor

Im WordPress Block Editor (Gutenberg) gibt es standardmäßig keinen dedizierten Block für Definitionslisten (<dl>, <dt>, <dd>). Während der Editor einfache Aufzählungszeichen und nummerierte Listen unterstützt, müssen Sie für Definitionslisten auf Alternativen zurückgreifen. 

Hier sind die gängigsten Möglichkeiten, Definitionslisten dennoch zu nutzen:

1. Verwendung des „Individuelles HTML“-Blocks

Dies ist der direkteste Weg, um semantisch korrekte Definitionslisten zu erstellen.

• Füge einen neuen Block hinzu und suche nach Individuelles HTML.
• Gib den HTML-Code manuell ein. Ein Beispiel:html<dl> <dt>Begriff 1</dt> <dd>Die Erklärung für Begriff 1.</dd> <dt>Begriff 2</dt> <dd>Die Erklärung für Begriff 2.</dd> </dl> Verwende Code mit Vorsicht. 

2. Plugins für zusätzliche Blöcke

Es gibt zahlreiche Plugins, die den Standard-Satz an Blöcken um eine Definitionsliste erweitern. Beliebte Sammlungen, die oft einen solchen Block enthalten, sind: 

• Gutenberg Blocks and Templates Library by Otter: Bietet oft erweiterte Listen-Optionen.
• Ultimate Addons for Gutenberg (Spectra): Eine umfangreiche Bibliothek, die spezialisierte Inhaltsblöcke bereitstellt.
• Getwid: Enthält über 40 zusätzliche Blöcke, darunter oft auch Definitionslisten oder ähnliche strukturierte Listen. 

3. Umweg über den „Tabelle“-Block

Wenn es Ihnen primär um die Optik (Begriff links, Beschreibung rechts) und weniger um die HTML-Semantik geht, können Sie eine einfache Tabelle mit zwei Spalten verwenden. Dies lässt sich im Block Editor ohne Zusatztools umsetzen.

4. Formatierung mit dem „Spalten“-Block

Sie können den Spalten-Block nutzen, um ein ähnliches Layout zu erzielen:

• Erstellen Sie zwei Spalten (z. B. im Verhältnis 33/66).
• Schreiben Sie den Begriff in die linke und die Definition in die rechte Spalte.
• Duplizieren Sie die Spaltengruppe für weitere Einträge

Dieser Beitrag zeigt euch, was in WordPress Definitionslisten sind, wie sie verwendet werden und wie du sie mit CSS stylen kannst.

Nachdem ich die WordPress Theme Test Data heruntergeladen habe um ein Theme wieder einmal zu testen, wobei es immer wieder vom Groben ins Feine geht , bin ich auf die WordPress Definitionslisten gestoßen.

Will heißen, in der style.css bzw. in WordPress waren diese einmal unter “ Diverser Kleinkram „ abgelegt 😂 . Aha. Genauso habe ich es bis jetzt auch behandelt, nämlich gar nicht. 😂

Mit den Theme Test Data wird man natürlich auch darauf hingewiesen und nun bin ich der Sache einmal näher nachgegangen und habe bemerkt, das diese Definitionslisten in WordPress  nicht direkt wie Listenpunkte ansprechbar sind.

Defintionslisten nur über Texteditor möglich

Somit sind Definitionslisten in jedem WordPress Standardtheme zwar in der style.css formatiert und angegeben. Allerdings besteht keinerlei Möglichkeit, diese über den Visuellen Editor irgendwie zu nutzen oder einzufügen.

Wofür brauche ich Definitionslisten in WordPress

Mit Definitionslisten kann man verwenden für:

• Glossare
• Kalendereinträge
• Listen mit Kurzberschreibung

Sie sind sozusagen der kleine oder große unbeachtete Bruder von Listen Elementen.

Da allerdings die Listenpunkte direkt im Visuellen Editor vorhanden sind und man für Kalendereinträge jede Menge WordPress Plugins verwenden kann, stellt sich die Frage, wozu eigentlich Definitionslisten ?

Anwort:
Kein Mensch wird sich das noch antun, über den Code Editor dl,dt, dd und so weiter einzugeben. Da es aber in den Theme Test Data angegeben ist und man für ein Theme ebenfalls diese Styles zur Verfügung stellen muss, muss man zumindest wissen, wozu sie sind und was man damit machen kann 😆

Definitionslisten in HTML 5 nun Description List

Diese ähneln den ungeordnete Listen und man kann eine Description List für

• Glossare
• Kalendereinträge
• Listen mit Kurzbeschreibungen

verwenden:

HTML dl

– für Definitionen / Beschreibungen

Der dl Tag umschließt die Definitions List und ist das Pendant zum ul Tag in Listen. Somit kann man es sich besser vorstellen.

HTML dt

– Begriff definieren

HTML dd

– Erklärender Text

So findest du es in WordPress Theme Test Data:

Und der Code dazu:

<h2>Definition Lists</h2>
<dl>/* ist der umschliessende Tag, Pendant zu ul in Listen*/

   <dt>Definition List Title</dt> /*Titel */
    <dd>Definition list division.</dd>/*Beschreibung */
   <dt>Startup</dt>
   <dd>A startup company or startup is a company or temporary organization designed to search for a repeatable and scalable business model.</dd>
   <dt>#dowork</dt>
    <dd>Coined by Rob Dyrdek and his personal body guard Christopher "Big Black" Boykins, "Do Work" works as a self motivator, to motivating your friends.</dd>
   <dt>Do It Live</dt>
    <dd>I'll let Bill O'Reilly will <a title="We'll Do It Live" href="https://www.youtube.com/watch?v=O_HyZ5aW76c">explain</a> this one.</dd>
</dl>

Der obige Code ist das klassische Styling, welches du auch in WordPress Standard Themes findest.

FAZIT:

Im Prinzip sind Definitions Listen so gut wie nicht in Verwendung. Ursache dafür dürfte schon auch sein, dass diese nicht in den visuellen Editor von WordPress aufgenommen wurden.Weiters sind sie auch nicht im TinyMCE Advanced Plugin integriert. Ebenfalls auch im neuen Gutenberg Editor von WordPress nicht zu finden.

Allerdings, wenn die Styles schon in WordPress Standard Themes integriert sind, sollten sie wenigstens einmal Erwähnung finden.

Und wer sich mit Styles und CSS ein wenig auskennt, hat mit diesen Description Lists natürlich eine Möglichkeit, Glossare oder beschreibende Listen und Kalender zu erstellen. Wie gesagt, wird man normalerweise dafür etwas anderes verwenden. Es sei denn, irgend jemand lässt sich etwas einfallen, Definitions Listen einfacher zu verwenden.

Im Zuge dessen, dass WordPress nun auf einen Page Builder umstellt und auch im neuen Gutenberg Editor neue Blocks, wie mit Experimental Columns gearbeitet wird, sind diese Definitions Listen wohl der Vergangenheit zu zuordnen.

Hier trotzdem zwei wertvolle Links mit weiterführendem Inhalt:

• mediaevent.de
• maxdesign.com
  der Beitrag ist aus dem Jahre 2004 !
  immerhin, ist er sehr vollständig und aufschlussreich