Ersten Abschnitt in Beiträgen automatisch formatieren

2. Januar 2021 | CSS-Stylesheet, functions.php, WordPress

Den ersten Abschnitt – den Lead – eines jeden WordPress-Beitrags besonders auszuzeichnen und zu formatieren, ist etwas aufwändig und auch gar nicht nötig. Mit ein paar Zeilen Code übernimmt WordPress dies völlig automatisch.

An zweierlei Stellen müssen Sie hierfür eingreifen. Zunächst fügen Sie der functions.php folgende Zeilen hinzu:

function first_paragraph_is_lead( $content ) {
    return preg_replace( '/<p([^>]+)?>/', '<p$1 class="opener">', $content, 1 );
}
add_filter( 'the_content', 'first_paragraph_is_lead' );

Damit wird jedem ersten Abschnitt in Ihren Beiträgen, auch Custom Posts und Seiten die CSS-Klasse «opener» zugewiesen. Diese Klasse können Sie nun nach eigenem Gusto gestalten.

Dies tun Sie unter Design/Customizer/Zusätzliches CSS Ihres Themes. Das Beispiel der Website dr-code.ch sieht so aus:

.opener {
color:#293280;
font-size: 35px;
font-family: 'Montserrat';
line-height: 1.4;
font-weight: 300;
max-width: 900px;
hyphens: auto;
}

Selbstverständlich ist dies nur ein beispielhafter CSS-Code.

  • In den Zeilen 2-6 befinden sich Anweisungen zur Schriftauszeichnung und zur Darstellung.
  • Zeile 7 legt eine obere Breite fest, welche der erste Absatz nicht übersteigen soll.
    Dank der Anweisung «max-width» gilt die Begrenzung nur auf grösseren Anzeigen – auf Mobilgeräten wird der Text in der ganzen möglichen Breite dargestellt.
  • Und in Zeile 8 wird die automatische Silbentrennung (falls nötig) zugeschaltet.

Passen Sie den Code so an, dass die Leads dem Look & Feel Ihrer Website entsprechen.

Werbung

Werbung

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.









Vielen Dank.

Pin It on Pinterest

Share This