von Theme gestalltetes Zitat

Neben Absätzen, Überschriften und Bildern sind Zitate ein häufig verwendetes Element innerhalb von Blogposts und Seiten auf Websites.
Das HTML-Markup um das eigentliche Zitat und die zitierte Person ordnungsgemäß auszuzeichnen ist recht komplex und etwas, das Autoren oder Website-Mitarbeitern nicht immer einfach von der Hand geht.

Als ich genau mit diesem Problem konfrontiert wurde, habe ich nach einem Weg gesucht, der es erlaubt dass die Information so einfach wie möglich eingefügt werden kann ohne Markup schreiben zu müssen. Aber bei der Ausgabe im Frontend vollständiges Markup verfügbar ist.

Meine Lösung

Ich habe mich dazu entschieden eine Kombination aus Shortcake UI und einem eigenen Mini-Plugin zu verwenden.

Hier die Links dazu:

Was es macht

Nachdem beide Plugins installiert und aktiviert sind, lässt sich bei der Erstellung von Inhalten neben dem alt-bekannten „Datei einfügen“-Button über den nun neuen „Element hinzufügen“-Button ein Overlay öffnen und das Zitat auswählen. Im nächsten Schritt gibt es ein einfaches Textfeld für das eigentliche Zitat und ein kleines Textfeld für die zitierte Person/Quelle. Dann noch auf „Einfügen“ geklickt und das CMS kümmert sich um die nötige Arbeit korrektes Markup einzufügen.

Abhängig vom verwendeten Theme wird das Zitat nun in einer besonderen Gestaltung dargestellt und hebt sich von normalen Absätzen ab. Gleiches gilt auch für die Vorschau innerhalb des visuellen Editors.

Als letztes teile ich noch eine Webseite als Beispiel in der meine Lösung aktiv ist: www.Schafsnase.com