WordPress title-Tag zerlegen

Anzeige

In dieser Serie stelle ich einige kleine einfache Tipps vor, die mehr Möglichkeiten in der Gestaltung des Themes unter WordPress zulassen.
Im heutigen Beitrag soll der Title des Beitrags/der Seite zerlegt werden, in jedes einzelne Wort, und mit einem span-Tag jeweils erweitert wieder ausgegeben werden.

Diesen Aufwand betreiben wir, weil jedes Wort der Überschrift anders gestaltet werden soll. Aktuell kann man sich diese Lösung auf sajonara.de ansehen.

In diesem Zusammenhang der Hinweis, aktuell verlost Sajonara 12 lesenswerte Bücher, das Mitmachen lohnt sich, ich habe bereits 5 Exemplare der zur Verfügung stehenden Bücher gelesen.

Im ersten Schritt habe ich dazu eine Funktion erstellt, den Title in die Wörter zerlegt und die einzelnen Wörter innerhalb eines span-Tag mit entsprechender Klasse ausgibt. Diese Klasse bekommt zusätzlich eine Nummer, so dass jedes Wort eine eigene Klasse hat.
Diese Lösung kann man beliebig verändern oder erweitern, ein einfaches und nachvollziehbares Beispiel könnte wie folgt aussehen.

function fb_format_title($content) {
	
	$words = explode(' ', $content);
	$x     = count($words);
	if ($x >= 3) {
		
		$content = '';
		$i = 0;
		foreach($words as $word) {
			$content .= '' . $word . ' ';
			$i ++;
		}
		
	} else {
		$content = $content;
	}
	
	echo $content;
}

Diese Funktion wird in die functions.php des WordPress-Themes abgelegt. Dadurch steht sie im Theme-Umfeld zur Verfügung und kann beliebig eingesetzt werden. Die Funktion ist absichtlich so konzipiert, dass sie nicht in den WordPress-Standard Template Tag the_title() eingreift, denn in Beispielfall soll der Titel nur bei bestimmten Artikeln so ausgegeben werden.

Die Funktion implementiere ich dann im Theme, beispielsweise innerhalb des h2-Tag.

<?php if (function_exists('fb_format_title')) { fb_format_title(get_the_title()); } else { the_title(); } ?>

Mit Hilfe der erzeugten Klassen kann man dann auf jedes Wort zugreifen und ein eigenes Format im Stylesheet ablegen. Das kann man beliebig weit und unterschiedlich schachteln, ein Beispiel soll es verdeutlichen und Einsteigern das Spielen vereinfachen.

.post .word0, .post .word6, .post .word8 {
color: #333;
padding: 0 10px;
}

.post .word1, .post .word4, .post .word9 {
background:#bbb;
color: #fff;
padding: 0 10px;
}

.post .word2, .post .word5, .post .word10 {
color: #76BAFC;
padding: 0 10px;
}

Die Lösung ist einfach und so hoffe ich, nachvollziehbar. Sie ist sicher nicht der Weisheit letzter Schluss, denn man muss so zum Beispiel viele Klassen formatieren. Alternativ könnte man die Funktion erweitern, beispielsweise um einen Counter und nur drei Klassen vergeben. Aber dazu will ich hier keine Lösung beriet stellen, sondern mir liegt es am herzen, dass die Idee dargestellt wird und der Anwender Spaß am Tüfteln hat, denn dass hat mit die Freude an WordPress und dem Webdesign gegeben. Viel Spaß mit der gezeigten Lösung und freue mich auf Erweiterungen und Verbesserungen.