Einheitliches Design für den ersten Absatz jedes Beitrag

  • Ich unterstütze jemanden dabei, sein Blog-Design zu aktualisieren, kenne mich aber auch nur mittelmäßig aus.

    Der Blog wird mit WP 5.0.3 und dem Theme Twenty Sixteen betrieben.

    Ich habe bisher u.a. eine neue CCS-class "anfang" geschaffen und damit eine Reihe von Beiträgs-Anfängen formatiert (s. screen shot).

    Jetzt würde ich zum einen gerne irgendwo (meine Idee: vllt. in einer der .php-Dateien - habe aber keine Ahnung, wie ich es machen müßte) die Anweisung geben, daß der erste Absatz eines jeden Beitrages der neuen class "anfang" zugeordnet wird (sodaß das nicht für rund 4.000 Beiträge manuell nachformatiert werden muß und auch die Formatierung neuer Beiträge einfacher wird).

    Geht das und falls ja: wie?

    Zum zweiten würde ich gerne erreichen, daß der Leeraum unter den Fotos/Logos kleiner wird. - Wie geht das?

    Zum dritten: Läßt sich irgendwie erreichen, daß Beiträge, die (bisher) keinen <more>-Befehl enthalten, standardmäßig nach einer bestimmten Anzahl von Zeichen oder Wörtern 'unterbrochen' werden (damit auch insoweit nicht rund 4.000 Beiträge manuell nachformatiert werden müssen)?
    [Blockierte Grafik: http://peter-nowak-journalist.de/wp-content/uploads/2019/02/Beispiel_f_Anfang.png]
    ----

    Vielen Dank schon mal.

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Hallo,
    beginnen wir mit 3. - Das Zauberwort heißt [size=14]the_excerpt() aber auch Herr Go..le findet dazu jede Menge z.B. LINK.

    Zu 2. das sollt mit CSS möglich sein, dazu müßte man allerdings wissen welche Bilder gemeint sind. Z. B. hat das Beitragsbild
    .post-thumbnail { margin-bottom: 2.625em;}
    in den zusätzlichen CSS den Wert verringern. Der Abstand oberhalb dieses Bildes kommt vom .entry-title, wieder mit einem margin-bottom.
    Falls das Video nicht hilft, brauchen wir einen LINK

    Dazu ein Video .

    Externer Inhalt www.youtube.com
    Inhalte von externen Seiten werden ohne Ihre Zustimmung nicht automatisch geladen und angezeigt.
    Durch die Aktivierung der externen Inhalte erklären Sie sich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt.

    Zu 1. kenne ich für alle Beiträge, ohne händisch einzugreifen keine Lösung, was nicht heißt, dass es keine gibt ;)
    Seit Gutenberg mit WordPress 5.0.x (im Dezember 2018) Einzug gehalten hat, kann man für Blöcke eine Klasse vergeben.[/SIZE]

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

  • Vielen Dank.

    Erst einmal zu 3., dem Exzerpt:

    1. In dem verlinkten Text heißt es zu Twenty Seventeen (ich verwende ja allerdings Twenty Sixteen):

    "Der zweite Loop der archive.php ruft über get_template_part() eine weitere Theme Datei auf, die dann für die konkrete Ausgabe der Beitragselemente zuständig ist. In den Klammern steht dabei, wo die Datei zu finden ist und welche Datei es genau sein soll. Bei Twenty Seventeen lautet der Aufruf:
    [COLOR=#808080]
    get_template_part( 'template-parts/post/content', get_post_format() );[/COLOR]

    Möchten Sie nun, dass auf Ihren Archivseiten nur der Auszug (automatisch oder manuell) erscheint, ersetzen Sie das get_post_format() durch ein ‘excerpt’:

    [COLOR=#808080]get_template_part( 'template-parts/post/content', 'excerpt' );[/COLOR]"

    Das scheint aber nicht indirekt zu meinem Problem zu passen. Wenn ich die beschriebene Änderung vornehme, bleiben die Anzeige der Startseite und der Folgeseiten und auch der Kategorien unverändert, während Suche-Ergebnisse auch ohne die Änderung schon nur als Exzerpte angezeigt werden

    2. Ich habe dann verdachtsweise einfach mal ausprobiert, in der content.php

    [COLOR=#808080]the_content( sprintf([/COLOR]

    durch

    [COLOR=#808080]the_excerpt'( sprintf([/COLOR]

    zu ersetzen. Dies wirkt sich nun in der Tat auf die Startseite etc. aus - beseitigt aber auch die Formatierung der Artikel-Anfänge (siehe screen shot). Wie kann ich letzteren Effekt vermeiden?[Blockierte Grafik: http://peter-nowak-journalist.de/wp-content/uploads/2019/02/Beispiel-Anfang_mod.png]

  • Bei mir lautet das zusätzliche CSS bisher:

    Code
    .anfang
    {
       font-size: 125%;
       font-style: italic;
       font-weight: 700;
       background-color: #D3D3D3;
       padding-left: 10px;
       padding-right: 10px;
    }

    Wenn ich dort

    Code
    .anfang

    durch

    Code
    .entry-content p:first-child

    ersetze, verschwinden meine Formatierungen, aber es wird nicht erkannt, daß diese Formatierung für jeden ersten Absatz gelten soll.

  • Dann zu den Bildern

    [size=14]Zu 2. das sollt mit CSS möglich sein, dazu müßte man allerdings wissen welche Bilder gemeint sind. Z. B. hat das Beitragsbild
    .post-thumbnail { margin-bottom: 2.625em;}
    in den zusätzlichen CSS den Wert verringern. Der Abstand oberhalb dieses Bildes kommt vom .entry-title, wieder mit einem margin-bottom.
    Falls das Video nicht hilft, brauchen wir einen LINK

    Dazu ein Video .

    Externer Inhalt www.youtube.com
    Inhalte von externen Seiten werden ohne Ihre Zustimmung nicht automatisch geladen und angezeigt.
    Durch die Aktivierung der externen Inhalte erklären Sie sich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt.
    [/SIZE]

    Es geht um die Bilder im jeweils ersten Beitrags-Absatz; die habe ich aber nicht über die Beitragsbild-Funktion eingebunden (dann wären sie über dem Artikel-Meta, wo ich sie nicht haben will), sondern manuell.

    Den oberen und rechten Rand für diese Bilder konnte ich wie folgt bestimmen:

    Code
    img {
       margin-top: 20px;
       margin-right: 10px;
       margin-bottom: 10px;
    }

    Nur die Angabe für den unteren Rand wirkt sich nicht aus - auch nicht, wenn ich statt dessen 0px nehme und !important hinzufüge.

    Link zum Beispiels-Artikel:

    http://peter-nowak-journalist.de/2019/02/05/am-…gen-mietenwahn/

  • Also dieses "MieterEcho" bekommt ja einige Ränder mit, woher auch immer.....
    Es hat z.B
    .wp-block-image figcaption {
    margin-top: .5em;
    margin-bottom: 1em;
    }
    die man auf 0 stellen sollte und das
    .alignright {
    margin: 0.375em 0 1.75em 1.75em;
    }
    sollte der bottom-wert auch auf 0 sein, dann ist für den Text Platz.

    statt dessen 0px nehme


    Vollständigkeitshalber 0 wird ohne jeglichem Zusazz geschrieben - keine 0em oder 0px sondern 0

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

  • Hier ein kleines Video dazu, wie ich das lokalisiere ;-)

    Externer Inhalt www.youtube.com
    Inhalte von externen Seiten werden ohne Ihre Zustimmung nicht automatisch geladen und angezeigt.
    Durch die Aktivierung der externen Inhalte erklären Sie sich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt.

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

  • Dann sind von meiner Ausgangsfrage jetzt noch die Punkte 1 und 3 offen:

    1. Automatische Zuordnung aller ersten Beitrags-Absätze zu meiner CSS-class "anfang"

    und

    2. Automatisches Exzerpt, wenn es in dem Beitrag keinen <more>-Befehl gibt - aber so, daß die Formatierungen meiner class "anfang" trotzdem erhalten bleiben.

  • Gibt es einen Link zur Problemseite. Dann könnte man 1. schnell lösen.

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

  • PS:

    Das

    Das habe ich jetzt mit

    Code
    .alignright {
       margin-bottom: 0;
    }

    ebenfalls hinbekommen.

    Danke.

    allein erreicht nicht, sondern ich muß immer noch aus dem Code der Beiträge

    Code
    <figcaption></figcaption>

    herausnehmen. Aber bei einem Beitrag habe ich auf einmal oben zuviel Leerraum:

    http://peter-nowak-journalist.de/2019/02/06/hausbesetzung-entkriminalisieren/.

    Am Bild selbst scheint es nicht zu liegen; siehe das gleiche Bild in einem anderen Beitrag:

    http://peter-nowak-journalist.de/2019/02/06/hof…echste-instanz/

  • Finde den Unterschied ;-)

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

  • Vielen Dank.

    (Verständnisfrage: Die überflüssige Leerzeile war ja nun aber vor

    Code
    <div class="wp-block-image">

    Warum verschob sie nicht meinen ganzen grau hinterlegten Anfangsabsatz nach unten, sondern wirkte sich nur in dem Absatz rechts oberhalb des des Bildes aus?)

  • Zu 1. versuch es mal mit .entry-content p:first-of-type

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!