Post navigation

WordPress: Der smarte Weg, den ersten Absatz anders zu gestalten

Viele Blogger möchten den ersten Absatz eines Beitrags anders gestalten. Die bisherigen Lösungen sind jedoch nicht praktikabel. Hier kommt die smarte Lösung.

Ersten Absatz anders gestalten: Warum meine Lösung smart ist

Es gibt viele Lösungen, um den ersten Absatz eines Artikels anders zu formatieren. Du könntest in den Text-Bereich des Editors gehen und dort einem Absatz eine eigene Klasse vergeben.

Oder Du verwendest einen CSS-Selektor wie :first-of-type, dann wird der erste Absatz automatisch anders gestaltet. Natürlich nur, wenn Du das zuvor im CSS so festgelegt hast.

Allerdings hast Du dann das Problem, dass ein Zitat mit <blockquote> genauso dargestellt wird, wie der erste Absatz. Der Selektor sucht sich das jeweils erste Element heraus. »blockquote => p« ist das erste Element.

Daher wird ein Zitat genauso dargestellt werden, wie der erste Absatz. Schön blöd, oder? Natürlich könntest Du Dir Abhilfe schaffen, indem Du im CSS folgendes hineinschreibst:


blockquote, blockquote:first-of-type {
 color: #666;
 font-style: italic;
 margin: 0 0 2em;
 padding: 12px 0 0 44px;
 position: relative;
}

Doch das ist ein schlimmer Kompromiss und sorgt für einen aufgeblähten Code.

Ersten Absatz anders gestalten: Der smarte Weg

Ich löse das Problem viel eleganter. Ein kleines PHP-Snippet für die functions.php Deines Themes sorgt für ein Wohlfühl-Aroma.

Der Code

  • WordPress Version: inkl. 4.6.1
  • PHP-Version: inkl. PHP 7

/**
 * Auto-Highlighting - Automatisches Highlighten des ersten Absatzes eines Beitrags
 * @author Andreas Hecht
 */
function tb_first_paragraph_highlight( $content ) {
    return preg_replace( '/<p([^>]+)?>/', '<p$1 class="opener">', $content, 1 );
}
add_filter( 'the_content', 'tb_first_paragraph_highlight' );

Jeder erste Absatz bekommt die CSS-Klasse .opener zugewiesen. Und das überall, wo the_content() genutzt wird. Das kann auch auf der Startseite Deines Blogs sein. Und natürlich auf den Seiten.

So steuerst Du die Formatierung

Mit CSS kannst Du nun ganz fein steuern, wo Du den ersten Absatz anders gestaltet haben möchtest. Hier einige Beispiele:


/* Jeder erste Absatz wird anders gestaltet - Auch eventuell die Startseite */
p.opener {
    color: #165a72;
    font-weight: 400;
    font-size: 21px;
    line-height: 1.5;
}

/* Nur einzelne Beitraege bekommen das Design */
.single p.opener {
    color: #165a72;
    font-weight: 400;
    font-size: 21px;
    line-height: 1.5;
}

/* Einzelne Beitraege und Seiten werden designed */
.single p.opener, .page p.opener {
    color: #165a72;
    font-weight: 400;
    font-size: 21px;
    line-height: 1.5;
}

Für welche Variante Du Dich auch entscheidest, die Lösung ist cool und funktionell. Zudem wird nur der erste Absatz anders designed.

entwickelt WordPress-Websites und bietet dir einen Website Sicherheit Service und einen Performance Service für deine Website. Außerdem ist er Spezialist für Onpage SEO und bringt Deine Website in die Top-Suchergebnisse von Google.

Schreibe einen Kommentar

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

* Die Checkbox für die Zustimmung zur Speicherung ist nach DSGVO zwingend.

Ich stimme zu.