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

veröffentlicht:

aktualisiert:

description-list-wordpress

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 :mrgreen: . Aha. Genauso habe ich es bis jetzt auch behandelt, nämlcih gar nicht. :lol:

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 oder könnte man Glossare, Kalendereinträge oder Listen mit Kurzberschreibung verwenden. 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 8-)

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:

definition-list
WordPress Theme Test Data: Definition List

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 Vergangenehit zu zuordnen.

Hier trotzdem zwei wertvolle Links mit weiterführendem Inhalt:

Blogartikel von mediendesign-quer. WordPress, Webdesign, Social Media .. Alle Neuigkeiten erfahren >> Werde Fan auf Facebook

Veröffentlicht in Kategorie:

Top