Gutenberg Editor, comment rendre les éditeurs et les typographes pratiques

Ce message m'a motivé à écrire un article. L'auteur donne une astuce amusante pour se débarrasser du wrapper div.container . À première vue, c'est une économie sur les correspondances, mais les programmeurs WordPress en savent beaucoup. Pour nous, les Vordresgramists, la fiancée de la jument.

Quels sont nos problèmes ici:

1. Du point de vue du référencement, le texte ne doit pas être divisé en sections
2. La date doit être remplacée automatiquement
3. Pour l'éditeur, la mise en page doit être linéaire
4. Fond beige pleine largeur
5. Un point peut changer de couleur (et parfois de forme) ((et parfois se déplacer)).

Pour l'article n ° 2, nous écrirons un simple shortcode que nous ne donnerons pas ici. Gutenberg facilite l'insertion de shortcodes dans le texte.

Pour résoudre tout le reste, vous pouvez bien sûr utiliser ACF. Mais pensez par vous-même -

• champ pour la première ligne
• zone de paragraphe après la date
• champ de description du spot

Pour un simple auteur, cela ne sera pas du tout transparent et le modèle se transformera en un ensemble de FI.

Alors

Voici comment nous résolvons tout cela:

• Rien que Gutenberg
• Le premier paragraphe est la première ligne
• Ensuite, la section d'en-tête H1
• puis shortcode [post-date]
• paragraphe avec texte
• magie - Séparateur!
• bien, puis du texte brut

Notre single.php ressemble à ceci:

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

the_content () affichera ceci:

 <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"> ...   ... 

Les optimiseurs de recherche sont contents, l'auteur comprend tout. Et nous devons tout comprendre.

Mais cela, en général, n'est pas difficile:

 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%); } 

Tout le reste ne mérite pas une attention particulière, la magie principale réside dans le séparateur HR et le fait que des pseudo-éléments peuvent y être. La couleur et le comportement du spot, respectivement, peuvent être modifiés via les classes du même séparateur.

Si vous avez aimé cette vidéo, cliquez sur J'aime et abonnez-vous à notre chaîne.
Attendez une seconde, n'est-ce pas YouTube? Non?
Eh bien, bon piratage