Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets
Das 'Auto Highlight' ist hier der Website den ersten Textabsatz zu stylen. Da geht es nun ganz um die automatische Formatierung. Das Design von Exzerpts zum different des Inhalts.
Den ersten Textabsatz stylen
Das ist im Ersten mit Snippet in der Theme functions.php und im Zweiten das CSS.
Auto Highlight das PHP
Den ersten Textabsatz automatisch stylen.
Die Snippets zur functions.php ab ins Plug-in Code Snippets.
Mit Obhut der Codes! – so bleibt das auch nach Theme-Update.
Oder Childs Theme! – zum Beitrag Quick Child Theme Generator.
So zum Workflow und Browser Cache s. das Plug-in reBusted!
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
CSS zum Auto Highlight
Den ersten Textabsatz, das Styling.
– Customizer oder Childs-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 Aut.-Hervorhebung nicht. Oder so mit .single .opener, .page .opener ist das 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 obig 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
Aktualisiert im Jahr 2022-Mai
