Mulischaf

Ein kleines WordPress-Template IV

23. Mai 2021

Und noch ein kleines Update fügen wir in das aktuelle Template ein. Ich bin letztens wieder unterwegs über einen Beitrag auf der Guardian-Webseite gestoßen und in der mobilen Version ist der erste Buchstabe des ersten Absatzes groß geschrieben, was mir in dem Moment recht gut gefallen hat. Ist auch irgendwie ein Klassiker der alten Schule, den man hier auch gut einbringen kann.

Ursprünglich wollte ich eine reine CSS-Lösung, allerdings ist das gar nicht so leicht, da die Verkettung von first-child, first-letter, usw… eines Paragraphen bei einer Vielzahl von Content-Blöcken so eine mmmhhh-Sache ist. Stattdessen gehen wir einen anderen, etwas leichteren Weg, der mehr Freitheiten bietet und zwar über die bereits bekannte function.php-Datei.

function wcs_first_paragraph_highlight( $content ) {
return preg_replace( '/<p([^>]+)?>/', '<p$1 class="highlight">', $content, 1 );
}
add_filter( 'the_content', 'wcs_first_paragraph_highlight' );
add_filter( 'the_excerpt', 'wcs_first_paragraph_highlight' );

Wir ersetzen den Standard-Tag des ersten Paragraphen und fügen ihn erneut ein, allerdings mit einer CSS-Klasse, die wir hier „highlight“ nennen. Damit das Ganze nicht nur auf der Beitrags-Seite, sondern auch in der Übersicht klappt, fügen wir zwei add_filters ein – einmal für den gesamten Content und einmal für den Text-Auszug. Damit müssen wir auch sonst keine der Template-Dateien mehr angreifen, außer der style.css.

p.highlight::first-letter {
color: #9a0026;
float: left;
font-family: Georgia, serif;
font-size: 75px;
line-height: 60px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
}

Hier bleibt die Gestaltung allerdings wieder jedem selber überlassen, da der Fantasie keine Grenzen gesetzt sind – mein Code hier ist nur ein Beispiel. Und das war es eigentlich schon wieder… wir haben den ersten Buchstaben bei allen Text-Auszügen, als auch den vollen Texten bei den Beiträgen in einem großen Letter und das Alles mit sehr wenig Aufwand. Sozusagen ein 5 Minuten-Fix.

Und noch eine Kleinigkeit habe ich angepasst und zwar die Länge des Text-Auszuges auf der Start-Seite bzw. auf den Kategorien-Seiten. Auch hier ebenfalls mit zwei kleinen Zeilen in der functions.php-Datei.

function my_excerpt_length($length){
return 90;
}
add_filter('excerpt_length', 'my_excerpt_length');

Der Code ist relativ selbsterklärend und schnell eingesetzt. In meinem Fall habe ich die Länge des Textes eben auf 90 Wörter gesetzt, was ausreichend ist, um visuell nicht ganz so trocken, aber auch nicht zu voll zu wirken.

Foto von Annie Spratt

Technik / Template

3 Antworten zu “Ein kleines WordPress-Template IV”

  1. Mark sagt:

    Gibt es das WordPress-Template eigentlich als Gesamtpaket zum Herunterladen irgendwo?

  2. emanuel sagt:

    Mmmhh, bisher nicht. Ich hatte mir mal überlegt, eines direkt bei WordPress zu veröffentlichen, aber der Aufwand, das Template sauber(er) umzusetzen und alles so anzupassen, dass das Ding den Kriterien entspricht und so weiter, hat mich jetzt nicht so angesprochen. Mal schauen, welche Anpassungen ich noch vornehme, dann kann ich zumindest den Gesamt-Code zentral auf einer Seite abbilden, falls ihn jemand nutzen möchte. 🙂

  3. emanuel sagt:

    Übrigens kann man auch im WordPress-Editor beim Schreiben selber unter der Blockformatierung ebenfalls den ersten Buchstaben groß setzen lassen. Ich habe es aber lieber automatisch.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

·
Nach oben