WordPress content filtern für CSS-Erweiterung

Inhalt:

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.
first-letter


<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.

Artikel #694, 8. Juli 2008 · Themes, Tipps, WordPress · 12 Kommentare · Kommentar schreiben
Tags: CSS, PHP, StyleSheet, Theme, WordPress, WP
Kommentar-Feed zum Artikel · TrackBack URL · Kurzlink

12 Kommentare zu „WordPress content filtern für CSS-Erweiterung“

1
Kommentar von Steffen
9. Juli 2008 um 08:24
Schade, ich hätte es interessanter gefunden den Buchstaben an sich zu formatieren, auch für den IE.
So wie du es jetzt gelöst hast, geht es auch mit CSS: p:first-line
2
Kommentar von Frank Bültge
9. Juli 2008 um 13:47
@Steffen: aber in diesem Fall wäre jeder Absatz formatiert und wir wollten ja, dass es nur der erste Buchstabe des kompletten Textes ist, egal wieviel Absätze (p).
3
Kommentar von Putzlowitsch
9. Juli 2008 um 15:10
Kleiner Fehler in der Funktion fb_stuff_first. der Parameter heißt $suche, in der Funktion wird aber $such verwendet, das 'e' am Ende fehlt.

Hat es eigentlich einen besonderen Grund, daß Du dein Filter ganz vorne reinhängst und dann intern wpautop aufrufst? Wäre es nicht einfacher, es z.B. mit 33 erst nach den wp-default-filtern einzuklinken?
4
Kommentar von Fabian
9. Juli 2008 um 18:40
@Steffen: die suche nach dem ersten (p) kann man ja ganz einfach erweitern, indem man nicht das (p) ersetzt, sondern den ersten buchstaben nach dem (p) z.B. in einem (span) umschliesst und diesen dann formatiert...
5
Kommentar von Frank Bültge
9. Juli 2008 um 20:28
@Putzlowitsch: ja, für die Vorgehensweise und das man als Leser sich Gedanken macht. Ansonsten geht es über die Priodefinition des Filter natürlich auch. Ich wollte aber auf die Filter von WP hinweisen und sp stolpert man drüber.

@Fabien: Danke für deinen Hinweis. Ich habe ja bewusst die CSS 2 Level angewandt und den IE 6 ausgegrenzt. Natürlich kann man das auch mit einem span umschließen, auch dafür muss man den ertsen Buchstaben im ersten Absatz finden. Mit CSS3 wäre es gänzlich ohne PHP lösbar, aber darauf müssen wir browserübergreifend wohl noch lange warten.
* Bin aktuell knacke dicht und komme nicht mal zu einer Rückmeldung deiner Lösung, sorry!!!
6
Kommentar von Chriss
9. September 2008 um 15:31
Genau die Funktion brauche ich, um Images vor dem Beitrag vor dem fießen P-Wrap zu schützen. Aber verstanden habe ich es nicht ganz, sieht das dann so aus? Und wo innerhalb der functions.php platziert?:

"Innerhalb dieser Funktion rufe ich die Funktion fb_stuff_first() auf"
```
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;
}
```
Und wie "schalte ich sie per WordPress Hook Filter" zu? Was ist das?
Fragen über Fragen. Über eine Antwort wäre ich sehr erfreut.

Alles Liebe
Chriss
7
Kommentar von Frank Bültge
9. September 2008 um 17:55
@Chriss: Das "Zuschalten" wird via Hook erledigt, das add_action() macht das. Schau dir nochmal den Beitrag an. Es arbeiten 2 Funktionen, wobei die eine nur die andere nutzt. Die erstere wird dann via Hook in WordPress integriert.
8
Kommentar von ike
11. Februar 2009 um 15:16
Danke! Genau das habe ich gesucht! Noch ist die Browserwelt nicht bereit für CSS3, aber auf den IE6 und span-Tags für den ersten Buchstaben sollte man trotzdem verzichten.
9
Kommentar von Kretzschmar
18. Februar 2009 um 19:57
Also per CSS allein geht es auch:

div.entry-content > p:first-child:first-letter

Natürlich muss div.entry-content an das entsprechende Theme angepasst werden. In meinem Theme ist die division .entry-content ein wrapper eines einzelnen Beitrags (wie im Sandbox Theme).
10
Kommentar von Frank Bültge
18. Februar 2009 um 20:57
Ja, aber eben nicht in allen Browsern und daher filter ich das Zeichen. Das CSS ist nur beispielhaft, man kann ja den span auch mit einer Klasse versehen und dann klassisch per CSS formatieren, so dass auch der IE es versteht.
11
Kommentar von Kretzschmar
19. Februar 2009 um 07:22
Korrekt. Ich wollte ja nur einen Weg aufzeigen, ohne HTML, der übrigens von allen modernen Browsern (nur eben nicht IE6) dargestellt wird.
12
Kommentar von Chris
10. Mai 2011 um 17:21
Ist zwar schon etwas älter der Artikel, aber er hat mir gerade den Tag gerettet..
Hab verzeifelt danach gesucht, wie man bei eingebetteten Videos, die immer zuerst im Artikel auftauchen, den lästigen p tag modifiziert. Wpautop ganz abschalten wollte ich dann nämlich auch nicht.

@Chriss, fals er denn nochmals hier liest.
Einfach den ganzen Code oben in die functions.php und dort (class="letter") durch beliebigen Klassennamen ersetzen. In meinem Fall habe ich "nopadding" genommen, um halt die Videos über die ganze Breite anzuzeigen.

Komisch, dass man solche nützlichen Sachen fast immer nur hier findet. Im dt. WP Forum herrscht da in dieser Hinsicht absolut tote Hose.

Kommentar schreiben

Kommentar-Hilfe

händischer Spam:
Beachte die Kommentarregeln, jede Form von versuchtem Spam wird gelöscht. Warum und wieso steht in einem meiner Beiträge.

Bezug auf Textstellen:
Du kannst direkt bezug auf Textstellen im Beitrag nehmen. Dazu muss lediglich der Bereich im Artikel markiert werden; daraufhin erscheint ein Button, der den markierten Text in das Kommentarfeld übernimmt und als Zitat auszeichnet. Die Funktion ist nur bei aktivem JavaScript nutzbar.

xHTML:
Du kannst folgende Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <blockquote cite=""> <code> <pre> <em> <strong> <strike> <ul> <ul> <li>

Achte darauf, wenn du Code im Kommentar hinterlegen willst, dann muss der Code maskiert sein. Dann wird er nicht interpretiert. Der Code muss mit Hilfe von HTML-Entities dargestellt werden, d.h. dass man z.B. < als < und > als > einfügt.

E-Mail-Benachrichtigung bei neuen Kommentaren ?
Wenn der Haken in der Checkbox gesetzt ist, dann wirst du über neue Kommentare vie E-Mail informiert. Der Versand erfolgt nur, wenn du die URL in der Bestätigungs-E-Mail genutzt hast oder schon Abonnent hier im Blog bist.

Kommentar erscheint nicht:
Alle Kommentare werden manuell geprüft, freigegeben und nach Möglichkeit beantwortet. Bitte um etwas Geduld und Nachsicht.

Identifikationsbilder (Avatare):
Auf Gravatar.com kann man sich mit seiner E-Mail-Adresse registrieren und ein Bild hochladen, dann erscheint dieses Gravatar hier und in vielen weiteren Blogs.

Spamschutz:
Das Kommentarformular ist mit einem Spamschutz ausgerüstet. Solltest du diesen Artikel ohne JavaScript besuchen und kommentieren wollen, so muss du die Frage beantworten und das jeweilige Wort in das Textfeld eingeben.

bueltge.de [by:ltge.de]

Ähnliche Beiträge

Journal

Projekte

Nutze die Feeds

Themen

hier werben Sponsoren