Gutenberg Editor, wie man Editoren und Schriftsetzer bequem macht

Dieser Beitrag hat mich motiviert, einen Artikel zu schreiben. Der Autor gibt einen lustigen Trick, um den Wrapper div.container loszuwerden. Auf den ersten Blick bedeutet dies eine Einsparung bei Spielen, aber WordPress-Programmierer wissen viel. Für uns, die Vordresgramisten, die Braut der Stute.

Was sind unsere Probleme hier:

1. Aus SEO-Sicht sollte Text nicht in Abschnitte unterteilt werden
2. Das Datum sollte automatisch ersetzt werden
3. Für den Editor sollte das Seitenlayout linear sein
4. Beiger Hintergrund mit voller Seitenbreite
5. Ein Fleck kann seine Farbe (und manchmal auch seine Form) ändern ((und sich manchmal bewegen)).

Für Artikel Nr. 2 schreiben wir einen einfachen Shortcode, den wir hier nicht geben werden. Gutenberg erleichtert das Einfügen von Shortcodes in Text.

Um alles andere zu lösen, können Sie natürlich ACF verwenden. Aber denken Sie selbst -

• Feld für die erste Zeile
• Absatzfeld nach Datum
• Punktbeschreibungsfeld

Für einen einfachen Autor ist dies überhaupt nicht transparent und die Vorlage wird zu einer Reihe von IFs.

Also

So lösen wir alles:

• Nichts als Gutenberg
• Der erste Absatz ist die oberste Zeile
• Als nächstes der Header-Abschnitt H1
• dann Shortcode [Post-Date]
• Absatz mit Text
• Magie - Trennzeichen!
• gut und dann Klartext

Unsere single.php sieht ungefähr so aus:

 <?php the_post(); get_header(); ?> <article> <?php the_content() ?> </article> <?php get_footer() ?> 

the_content () gibt Folgendes aus :

 <p>  </p> <h1>  </h1> <time>2013-11-11</time> <p class="has-medium-font-size">"lorem ipsum ".repeat(20)</p> <hr class="wp-block-separator"> ...   ... 

Suchoptimierer freuen sich, der Autor versteht alles. Und wir müssen alles ausmachen.

Dies ist jedoch im Allgemeinen nicht schwierig:

 article { display:flex; flex-direction: column; align-items: center; } article { width: 960px; margin: auto; } hr { margin: 80px 0 70px; border: 0; padding: 1px 0 0; position: relative; } /*    */ hr::before { width: calc(100vw - 10px); /* -10px      -    .     . */ left: calc(480px - 50vw); content: ""; position: absolute; transform-origin: 0 100%; transform: scaley(1000); background: #f7f2eb; z-index: -1; height: 1px; margin: 0; border: none; } /*    */ hr::after { width: 130px; height: 120px; content: ""; background: url(blot.svg) 0 0 no-repeat; position: absolute; left: calc(100% + 100px); transform: translatey(-50%); } 

Alles andere ist keine besondere Aufmerksamkeit wert, die Hauptmagie liegt im HR-Separator und der Tatsache, dass Pseudoelemente darin sein können. Die Farbe und das Verhalten des Spots können durch Klassen desselben Trennzeichens geändert werden.

Wenn dir dieses Video gefallen hat, klicke auf "Gefällt mir" und abonniere unseren Kanal.
Moment mal, nicht YouTube? Nein?
Na dann Happy Hacking