WordPress Snippets

WordPress: Anderes Design für den ersten Absatz

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. 5.xx
  • PHP-Version: inkl. PHP 7.xx

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

Andreas Hecht

Andreas Hecht

Andreas hat 2010 die SEO Agentur Hamburg gegründet und bringt kleine und mittlere Unternehmen mit laufender SEO Betreuung in die Top-10 Platzierungen bei Google. Er ist zudem Experte in WordPress Entwicklung und Performance.

Jetzt den Newsletter abonnieren!

Hol Dir die neuesten Beiträge über WordPress und SEO direkt in Deinen Posteingang. Als Dankeschön bekommst Du Gratis mein neues E-Book:

E-Book: Wie Du Dein WordPress raketenschnell machst

Ich muss Deine Daten für den Versand des Newsletters speichern. Du kannst Dein Abo jederzeit kündigen. Danach lösche ich Deine Daten zeitnah.

Und keine Angst, ich spamme Dich nicht voll, auch ich hasse Spam.

Das könnte auch interessant sein...

Seobility SEO Tool

3 Kommentare Kommentar hinzufügen

  1. Hallo Andreas,
    als Anfänger in WordPress und Fan deiner Seite bin ich jetzt auf ein Problem mit o.g. Snippet gestoßen.

    Ich habe den Code 1:1 (nur für Beiträge) in meiner Funktion.php eingefügt und erhalte beim Start der Website die Debüt-Fehlermeldung:

    Parse error: syntax error, unexpected ‚.‘, expecting end of file in /Users/…./wp-content/themes/…-Theme/functions.php on line 414

    In der Zeile 414 steht der Code:
    .single p.opener {

    Wäre toll wenn du mir hier helfen könntest, da ich die Idee toll finde.

    Beste Grüße
    Lutz

    • Lutz,

      ein bisschen Überlegen vor dem Handeln kann manchmal nicht schaden. Warum kopierst Du CSS in die functions.php? Mal abgesehen davon hast Du doch schon das Problem in der Fehlermeldung serviert bekommen. Genau lesen und sich informieren kann echt nicht schaden.

Schreibe einen Kommentar

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

Teilen
Teilen
Teilen