Den ersten Textabsatz der Website automatisch hervorheben. Das bedeutet, das Design der Auszüge im Vergleich zum restlichen Inhalt anzupassen. Die erste Empfehlung dafür ist, ein Snippet in die functions.php des Themes einzufügen und entsprechendes CSS zu verwenden.
Den ersten Absatz allein mit CSS
Den ersten Textabsatz automatisch stylen. Das kann allein mit CSS gut funktionieren, aber siehe unten!
/* --- Ersten Absatz stylen --- */
p:first-of-type {
margin-top: -25px;
color: #333333;
font-weight: 500;
font-size: 1.3rem;
font-style: oblique;
line-height: 1.7;
clear: both;
}
functions.php ab in das Plug-in Code Snippets.Mit Obhut von Codes! – so bleibt das auch nach Theme-Update.
Oder Child Theme! – zum Beispiel Quick Child Theme Generator.
So zum Workflow und Browser Cache s. das Plug-in reBusted!
Mit dem oben genannten CSS kann das in bestimmten Fällen passend sein, aber hier zum Beispiel hat es auch die Ergebnisse der Suche von "Relevanssi Live Ajax Search" beeinflusst, wobei die Schriftgröße viel größer war als gewünscht. Aus diesem Grund ist in diesem Fall PHP-Code die Lösung.
Die Formatierung per PHP
Theme functions.php
/* PHP Auto Highlight ersten Absatz */
add_filter( 'the_content', function( $content ) {
return preg_replace( '/<p([^>]+)?>/', '<p$1 class="opener">', $content, 1 );
});Pr. WP-Freund
Dann kann konkret der erste Absatz gestylt werden:
CSS zur Formatierung
Den ersten Textabsatz, das Styling.
– Customizer oder Child-Theme:
/* CSS Auto Highlight ersten Absatz */
.opener {
color: #055344;
font-weight: 500;
font-size: 18px;
font-style: oblique;
line-height: 1.5;
}… anders so mit Selektor .single .opener ist der Blog-Seite und Seiten die automatische Hervorhebung nicht. Oder so mit .single .opener, .page .opener ist den Beiträgen und Seiten ohne Blog-Seite.
Auto Highlight im Kontext
Shortcode automatisch im Content
Im Zusammenspiel mit 'Auto Highlight', da könnte es mit den Features von Shortcode automatisch im Content zu Widerspruch kommen, sodass der Inhalt vom Shortcode gestylt ist statt das Exzerpt. Infolge ist da anderer PHP-Code samt JavaScript anzuwenden. Also statt obige PHP-Code das:
Theme functions.php
/* PHP Auto Highlight im Kontext autom. Shortcode */
add_action('wp_footer', function() {
echo '<script>jQuery(".entry-content .wprt-container > p:first").addClass("opener");</script>';
});Pr. WP-Freund
Der Beitrag wurde mit fachlicher Unterstützung erstellt.
Aktualisiert im Jahr 2024-Mai
