Willkommen beim WP Wegerl.at 'Lesemodus'!
Entspanntes Lesen und spannende Artikel warten auf dich.
Entdecke unsere besten Beiträge und genieße den Lesemodus.
Textabsatz
smilies.4-user.de

Textabsatz automatisch formatieren. – stylisch

Collage.  Pezibear Gerbera , GDJ Different-Same
Werbung

Der Classic-Editor: Vertraut und zuverlässig –
Ihr bewährter Begleiter.  Info


Erleben Sie den Classic Editor neu!
(Bilder von pixelcreatures)


Viele Nutzer schätzen die vertraute Umgebung des Classic-Editors, die eine einfache und schnelle Bearbeitung ermöglicht.

Werbung

Mit dem Advanced Editor Tools auf das nächste Level –
Mehr Funktionen, mehr Möglichkeiten.


Classic Editor + Advanced Editor Tools
= Ihr Erfolgsrezept


Der Advanced Editor erweitert den Funktionsumfang des Classic-Editors und ermöglicht es, Inhalte noch effektiver zu bearbeiten.

Werbung

Einfach und intuitiv –
Der Classic-Editor für alle. Info


Classic Editor & Advanced Editor Tools
Erleben Sie es.


Der Classic-Editor zeichnet sich durch Stabilität und Zuverlässigkeit aus, was für professionellen Anwender von Bedeutung ist.

Werbung

Mehr schaffen in weniger Zeit –
Der Advanced Editor für kreative Köpfe.


Optimieren Sie Ihre Bearbeitung:
Advanced Editor Tools


Mit dem Advanced Editor können Designer und
Content Creatoren kreative Ideen umsetzten.


Info echo1 OpenClipart-Vectors-katze-1
Ist der Classic-Editor zu kennen? –
Versäume bitte nicht den Advanced Editor! Blick in die Zukunft: Advanced Editor Tools
Info echo2 OpenClipart-Vectors-katze-2
Classic-Editor – Classic Widgets
"Innovativ und ausgezeichnet!" Hauch von Nostalgie: Classic Widgets
Info echo3 OpenClipart-Vectors-katze-3
Klassischen Editor! – und …
"Advanced Editor Tools" Dauerhaft dynamisch: Advanced Editor Tools
Info echo4 OpenClipart-Vectors-katze-7
… die Welt gehört dem, der sie genießt.
– mit Classic Editor und Advanced Tools! Advanced Editor Tools und Classic Widgets
Info echo5 OpenClipart-Vectors-katze-4
Aktive Installationen: 2+ Millionen
"Advanced Editor Tools – ist fabelhaft!" Unverändert exzellent: Advanced Editor Tools
Info echo6 OpenClipart-Vectors-katze-5
Antörnend! – hier zur Lancierung
"Advanced Editor Tools – ist de luxe!" Classic Editor und Advanced Editor Tools
Info echo7 OpenClipart-Vectors-katze-6
Classic Widgets sind innovativ!
"Classic Widgets – sind modern!" Advanced Editor ToolsClassic Widgets
Info echo8 OpenClipart-Vectors-katze-8a
"Werkraum ist Werkraum"
Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker
"Frontend ist Frontend!" Classic Editor und Advanced Editor Tools

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;
}
Die Snippets zur 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