Den ersten Absatz eines Beitrags anders gestalten

Wie kann man vorgehen, wenn der erste Absatz eines Beitrags anders aussehen soll als der Rest? Vielleicht in einer größeren Schrift oder mit einer bestimmten Hintergrundfarbe versehen werden soll? Und das mit möglichst wenig Aufwand?

Zwei Lösungsmöglichkeiten werden in diesem Beitrag vorgestellt.

Formatierung per CSS-Pseudoklasse

Eine einfach scheinende Lösung nutzt die Pseudoklasse :first-child, um die entsprechenden Formatierungen in der CSS-Styledatei festzulegen:

.entry p:first-child {font-style:italic;}

Dieser Code funktioniert z.B. beim Default-Theme, da die Ausgabe von the_content() (also der eigentliche Inhalt des Beitrags) direkt von einem

<div class="entry">...</div>

umgeben ist. Bei anderen Themes müssen die Templatedateien unter Umständen angepasst werden, damit der erste Absatz des Beitragsinhalts über die Pseudoklasse angesprochen werden kann. Der Aufwand kann dann möglicherweise doch recht hoch werden.

Der größere Nachteil dieser Lösung besteht aber darin, dass die Pseudoklasse :first-child vom Internet Explorer erst ab Version 7 unterstützt wird. Gibt es eine andere Lösung, um auch die vielen noch vorhandenen Nutzer älterer Browserversionen an der schöneren Gestaltung der Beiträge teilhaben zu lassen?

Lösung per Plugin

Der Hook the_content ermöglicht es, den Inhalt eines Beitrags vor der Ausgabe zu filtern. Dies ist der Ansatzpunkt für das kleine Plugin First Paragraph:

add_filter('the_content', 'mark_first_paragraph',10);

In der Funktion mark_first_paragraph() wird dann nach dem ersten Vorkommen eines Absatztags (<p>) gesucht und eine Klasse eingefügt. Als Standard ist die Klasse firstp vorgegeben.

$content = preg_replace(':&lt;p(.+)&gt;/p&gt;:is','<p class="'.$options['fp_classname'].'">/p&gt;', $content);

Jetzt kann man daran gehen, den ersten Absatz zu formatieren. Mit dem folgenden Code in der Stylesheetdatei style.css des verwendeten Themes wird der erste Absatz z.B. kursiv und in größerer Schrift ausgegeben:

.firstp{font-style:italic;font-size:150%;}

Beispielformatierung Variante 1

Jetzt kann man z.B. noch einen Rahmen, einen andersfarbigen Hintergrund und etwas Abstand hinzufügen:

.firstp{border:#4B7C44 1px solid;background:#CFDD85;padding:4px;}

Beispielformatierung Variante 2

Zu guter Letzt kann man den Beiträgen noch schicke Initialen verpassen:

.firstp:first-letter {
color: #4B7C44;
float: left;
font-size:320%;
padding-top:4px;
padding-right:3px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

Das Pseudoelement :first-letter (erster Buchstabe) funktioniert wie :first-line (erste Zeile) bereits ab Version 6 des Internet Explorers.

So könnte das Endergebnis dann aussehen:

Beispielformatierung Variante 3

Variationsmöglichkeiten

Der Nachteil beider Lösungen besteht darin, dass die ersten Absätze immer abweichend formatiert werden (d.h. auch bei Seiten (pages), auch auf der Startseite usw.) obwohl das möglicherweise nicht gewünscht ist.

Idealerweise sollte das Plugin also noch über Einstellmöglichkeiten verfügen, bei denen man festlegen kann, wann die Klasse firstp genutzt werden soll und wann nicht.

fp_optionen2.gif

Das vollständige Plugin kann hier heruntergeladen werden:

Download:

first-paragraph.zip

Installation:

  1. Kopiere die Datei first-paragraph.php in das Plugin-Verzeichnis wp-content/plugins/
  2. Aktiviere das Plugin auf der Plugins-Seite der Admin-Oberfläche.
  3. Passe die Einstellungen unter Einstellungen: First Paragraph an:
    fp_optionen1.gif

Das könnte Dich auch interessieren...

3 Antworten

  1. Frank sagt:

    Wow, mit der zweiten Lösung mal so eben den Absatz in fett umgestellt, händisch hätte ich dafür ewig gebraucht, gefällt mir sehr. 🙂

    Vielen Dank für das Plugin.

  2. Denis sagt:

    Super, zwar nicht mehr ganz aktuell, aber es funktioniert.

  3. Matthias sagt:

    „Nicht mehr ganz aktuell“ ist nett formuliert. Umso schöner, dass es noch funktioniert 🙂

Schreibe einen Kommentar

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