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
