Wordpress Performance Wordpress SEO Wordpress Security Wordpress Themes Wordpress Hosting Mein Setup Das Buch

Drop Caps mit CSS3

Drop Caps mit CSS 3

WordPress Drop Caps mit CSS3

Eben erst habe ich euch das WordPress Plugin Simple Drop Caps genauer vorgestellt und bin dort zu dem Schluss gekommen, dass dies für Anfänger zwar praktisch ist, per se aber keinerlei echten Mehrwert bietet. Warum? Weil Drop Caps auch mit CSS3 umgesetzt werden können und zwar extrem simpel, performant und mit keinerlei echtem Aufwand. So lassen sich automatisch WordPress Drop Caps generieren. Drop Caps sind große Buchstaben am Anfang eines Artikels, genauer genommen ist der erste Buchstabe übergroß. Das sieht, bei viel Text und wenig Bildern bzw. Videos, deutlich hübscher aus und bringt ein bisschen die Eleganz der Typografie zurück. Wer Drop Caps in WordPress erzeugen möchte, kann dies mit dem Snippet unten tun, oder dem oben verlinkten Plugin. Das wandelt dann automatisch den ersten Buchstaben um und zwar genau so, wie ihr es per CSS festgelegt habt. Das Styling ist demnach vollkommen frei anpassbar.

Folgendes in eure CSS Datei einfügen:

p:first-child:first-letter {
	float: left;
	color: #000;
	font-size: 75px;
	padding: 10px 10px 0 0;
}

Drop Caps in WordPress hinzufügen

Das Snippet oben ist nun extrem simpel und deshalb auch so unglaublich performant. Es sucht sich den ersten Buchstaben eines Paragraphs heraus und wandelt diesen entsprechend um. Damit dies nicht überall passiert, müsst bzw. könnt ihr das Snippet weiter anpassen. Zum Beispiel indem ihr eine weitere CSS-Klasse festlegt, sodass nur die P-Tags der entsprechenden Klasse oder der ID, (article, .post usw.) umgewandelt werden. Das bleibt aber euch überlassen und kann frei gewählt werden. Eventuell möchtet ihr es auch so bestehen lassen, damit der komplette Blog und auch dessen Widgets mit Drop Caps ausgestattet werden. Eine noch simplere Möglichkeit, Drop Caps in Worpdress hinzuzufügen, gibt es jedenfalls nicht. Sehr schnell, sehr simpel und ganz ohne Plugin.



Wordpress Performance eBook