WordPress content filtern für CSS-Erweiterung

Und weiter geht es mit meiner kleinen Serie zu Anpassungen, die man im Rahmen eines Themes für WordPress eventuell mal benötigt. Dieser Beitrag soll den Content filtern und den ersten p-Tag ersetzen, ersetzen mit einem p-Tag und einer Klasse.

Wozu soll das nun wieder sein? Mir liegen Typographie-Design am Herzen, weil ich den Inhalt und nicht das Design für das wichtigste einer Website halte und damit auch das Auge auf Diesen lenken möchte.
Als Hobby-Webworker fehlt mir ebenso das Handwerkszeug für aufreizende Design mittels Grafiksoftware. Trotzdem soll es natürlich das eine oder andere Highlight im Design geben und im Fall von sajonara.de wollte ich den ersten Buchstaben gesondert formatieren. Um nun aber nur den ersten Buchstaben des ersten Absatz browserübergreifend zu formatieren, benötige ich ein Klasse im Absatz. Daher muss aus dem ersten p-Tag ein p-Tag mit Klasse werden.

<p class="letter">

Allerdings arbeite ich mit einer Formatierung per CSS, die nicht alle Browser verstehen; die Pseudoklasse first-letter kommt zum Einsatz. Allerdings war ich noch nie ein Freund des IE und werde den Usern in dem Fall das Schmankerl gern verwehren.

Im ersten Schritt müssen wir aber den ersten p-Tag des content finden und dazu schreibe ich eine Funktion, die in die functions.php des Themes gehört und dort für alle Templates zur Verfügung steht.

// finde erstes <p>
function fb_first_letter($content) {
	
	$content = wpautop($content);
	if (is_single() || is_home() || is_front_page()) {
		$content = fb_stuff_first($content, '<p>', '<p class="letter">');
	}
	$return  = $content;
	
	return $return;
}

Bisher habe ich lediglich den Content von WordPress übergeben, den Filter gesetzt, der die p-Tags setzt und eine Einschränkung vorgenommen, dass diese Funktion nur dann ziehen soll, wenn es sich um einen einzelnen Beitrag oder die Startseite bzw. Frontpage des Blog handelt, ansonsten wird er Content nach WordPress-Standard übergeben. Innerhalb dieser Funktion rufe ich die Funktion fb_stuff_first() auf, die das erste Vorkommen findet.

function fb_stuff_first($original, $suche, $ersatz) {
	$pos = strpos($original, $suche);

	if ($pos !== false) {
		$original = substr($original, 0, $pos) . $ersatz . substr( $original, $pos + strlen($suche) );
	}

	return $original;
}

Damit die Funktion auch wirkt, schalte ich sie per WordPress Hook Filter zu.

add_filter('the_content', 'fb_first_letter', 1);

Die Formatierung kann dann beliebig auf die Klasse angewandt werden. Auch dazu ein Beispiel, welches den ersten Buchstaben der Klasse gestaltet.

.letter:first-letter{
font-size:250%;
font-weight:700;
display:inline;
float:left;
background:#333;
color:#fff;
padding:.45em;
margin:.2em .2em 0 0;
display:block;
}

Auch in diesem Beitrag gilt wieder: das ist eine Lösung von vielen – für Verbesserungen oder andere Ansätze bin ich immer offen und freue mich über konstruktive Kritik. Die Idee dahinter ist wie so oft, dass Spielen mit den Möglichkeiten und das Wagen von neuem, denn ich empfinde das Design gelungen und diese wenigen Funktionen sorgen in meinem Augen für Mehrwert ohne Nachteile.