Vor einigen Jahren hatte ich den Artikel Quellenangaben für das blockquote-Element für mein Joomla-basiertes Blog geschrieben. Dabei hatte ich Zitat und Quelle direkt im HTML-Editor in den jeweiligen Abschnitten definiert und bewusst auf den visuellen Editor verzichtet, da dieser damals stark proprietären und insbesondere DIV-lastigen HTML-Code erzeugte.
Da WordPress inzwischen intensiv mit Block-Elementen im visuellen Editor arbeitet und dabei deutlich semantischeren HTML-Code erzeugt, habe ich mich entschieden, das Thema neu aufzulegen und entsprechend anzupassen.
Bevor es an die Umsetzung geht, schauen wir uns kurz an, warum der Halbgeviertstrich bei Zitaten verwendet wird. Im Deutschen (und auch international) ist der Halbgeviertstrich (–) der Standard für:
- Autorenangaben bei Zitaten
- Gedankenstriche im Satz
- Aufzählungsähnliche Hervorhebungen
Diesen Halbgeviertstrich möchte ich vor der Quellenangabe automatisch per CSS einfügen, sodass keine manuellen typografischen Anpassungen im eigentlichen Inhalt mehr erforderlich sind. Dafür lohnt sich ein genauerer Blick auf die von WordPress erzeugte HTML-Struktur. Als Beispiel dienen das folgende Zitat und die zugehörige Quellenangabe.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
http://www.loremipsum.de
WordPress erzeugt aus dem Block folgenden HTML-Code, den ich zur besseren Lesbarkeit nachträglich eingerückt habe.
<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua.
</p>
<cite>http://www.loremipsum.de</cite>
</blockquote>Um den Halbgeviertstrich automatisch zu ergänzen, füge ich folgenden CSS-Code im Custom-CSS-Bereich meines WordPress-Themes hinzu. Auf diese Weise wird der Strich zentral über das Stylesheet gesteuert und bei allen Zitaten einheitlich dargestellt, ohne dass er manuell im Editor eingefügt werden muss. Das sorgt nicht nur für eine konsistente Typografie, sondern trennt auch sauber Inhalt und Darstellung
blockquote > cite::before {
content: "— ";
}