Das Plugin gestaltet die Zitat-Ausgabe nicht — das vollständige visuelle Styling bleibt dem Theme überlassen. Die einzige mitgelieferte CSS-Datei dient ausschließlich der Skeleton-Loader-Animation während des Seitenaufbaus.
Zeilenumbrüche im Zitat Feld bleiben erhalten und werden ausgegeben.
Die Ausgabe verwendet Klassennamen im BEM-Stil, die Sie in Ihrem Theme-Stylesheet oder über den WordPress-Customizer beliebig ansprechen können.
Verfügbare Klassen
| Klasse | Element |
.citatly | Äußerer Container (wrapper) <div> |
.citatly__text | Der Zitat Text |
.citatly__meta | Container (wrapper) um Autor und Zusatzangabe |
.citatly__separator | Em-Dash vor dem Autor (Standard: „— “) |
.citatly__author | Autor Name |
.citatly__divider | Punkt zwischen Autor und Quelle (Standard: „ · “) |
.citatly__source | Optionales Zusatz Feld (Ort, Jahr etc.) |
Das Trennzeichen (—) und (·) zwischen Autor und Quelle sind in eigene CSS-Klassen eingebettet: .citatly__separator und .citatly__divider. Sie können diese mit display: none ausblenden oder durch benutzerdefinierte Zeichen ersetzen, indem Sie die im Beispiel „Custom“ unten gezeigte Technik font-size: 0 + ::after verwenden.
Interaktive Beispiele
there lies a trembling spring.
Wenn Sie den Shortcode-Parameter class verwenden, wird die benutzerdefinierte Klasse dem .citatly Wrapper hinzugefügt. Nutzen Sie diese Funktion, um unterschiedliche Stile auf verschiedene Einbettungsstellen derselben Website anzuwenden.
Skeleton Loader
Während das Zitat über die REST-API geladen wird, zeigt das Plugin einen Skeleton-Platzhalter mit Shimmer-Animation an. Das minimiert Layoutverschiebungen (CLS) und gibt dem Besucher visuelles Feedback.
Der Skeleton Loader ist das einzige CSS, das das Plugin mitbringt — die Darstellung des Zitats selbst bleibt vollständig dem Theme überlassen.
Hier sehen Sie den Skeleton Loader in Aktion. Sobald der Browser die REST-API-Antwort gecacht hat, lädt das Zitat sofort und der Skeleton ist nicht mehr sichtbar.
Die Farben des Skeleton Loaders lassen sich über zwei CSS Custom Properties an das eigene Theme anpassen:
.citatly {
--citatly-skeleton-base: #d0d0d0;
--citatly-skeleton-shine: #e8e8e8;
}Die Standardwerte sind #e0e0e0 (Basis) und #f0f0f0 (Schimmer) — passend für helle Hintergründe. Für dunkle Themes eignen sich dunklere Werte:
.citatly {
--citatly-skeleton-base: #2a2a2a;
--citatly-skeleton-shine: #3a3a3a;
}Wer die Skeleton-Animation komplett deaktivieren möchte, kann sie ausblenden:
.citatly[data-citatly-loading="1"] .citatly__text,
.citatly[data-citatly-loading="1"] .citatly__author {
background: none;
animation: none;
}