stylen

WordPress: Den ersten Textabsatz stylen! – Auto Highlight

Collage.  Pezibear Gerbera , GDJ Different-Same
Info echo
OpenClipart-Vectors-katze-1

Ist der Classic-Editor schon zu kennen? –
“Classic und TinyMCE – ist so klasse!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-2

Anklickt Classic-Editor mit TinyMCE Advanced
“Classic und TinyMCE – ist das ausgezeichnete!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-3

Klassischen Editor anwenden! – und …
“Classic und TinyMCE – ist so sehr gut !”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-7

… die Welt gehört dem, der sie genießt.
“Classic und TinyMCE – und tut sehr gut!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-4

TinyMCE aktive Installationen: 2+ Millionen
“Classic und TinyMCE – ist so fabelhaft!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-5

Ansprechend! – so gehts hier zur Lancierung
“Classic und TinyMCE – ist de luxe!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-6

… und NEU! – Classic Widgets
“Classic Widgets – sind so grandiose!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-8a

Werkraum ist Werkraum und Frontend ist Frontend
Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker
“Classic und TinyMCE – ist so fein!”
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 mit 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