Post navigation

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

WordPress Snippets · · Keine Kommentare

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.

Abonniere meinen Newsletter

Melde Dich für meinen Newsletter "WordPress & Bloggen" an und verpasse keinen Artikel. Als Dankeschön bekommst Du Gratis meine nützliche Checkliste:
»12 Dinge, die Du vor einem Theme-Wechsel beachten solltest«.

Andreas Hecht

ist WordPress-Entwickler und bietet dir WordPress-Sicherheit für deine Website. Zudem entwickelt er WooCommerce Shops mit Ladezeiten von unter einer Sekunde. Er ist ebenfalls Autor von drei richtig guten WordPress E-Books.

Schreibe einen Kommentar

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