La création d’un template de post ou de custom post type pour un thème Full Site Editing WordPress s’inscrit dans la continuité de la page d’index – la page de blog ou d’archives du site. Cet article vous propose une présentation rapide des blocs de thèmes de Gutenberg nécessaire à la création d’un modèle d’article de WordPress.
Création d’un template de post passe par celle d’un fichier single.html à la racine de votre thème WordPress. Ce template va importer des deux sous-templates header et footer (aussi appelés template-parts) que nous avons créés précédemment.
Les éléments structurels de la page.
Comme pour notre template index.html, nous commençons par importer l’en-tête et le pied de page de notre modèle.
Entre ces deux éléments structurants, nous créons un groupe centré dans la page à l’aide d’un bloc wp-group proposant un layout contenu :
<!-- wp:templte-part { "slug": header, "tagName": "header", "className": "site-header main-header" } /-->
<!-- wp:group { "tagName": "section", "layout": { "type": "constrained", "flexWrap": "nowrap" } } -->
<section class="wp-block-group">
</section>
<!-- wp-template-part {"slug": "footer", "tagName" : "footer", "className": "site-footer main footer"} /-->N.B. Cette structure proposera un affichage pleine page d’un article WordPress. Un moyen simple de présenter une barre latérale de widgets pourra consister en l’utilisation des blocs de colonnes fournis par Gutenberg. Nous y reviendrons dans un prochain article.
Les éléments d’un post WordPress
WordPress et son interface Gutenberg offrent la possibilité d’intégrer les éléments principaux d’un article de blog de façon dynamique à l’aide des blocs FSE. En voici une liste à peu près exhaustive :
- L’image mise en avant
- Le titre
- Les métadonnées
- L’auteur, son nom et son avatar
- La date de publication
- Les catégories liées
- Le contenu texte et images
- La navigation des posts (suivant et précédent)
- Les commentaires
- Le formulaire de commentaire
N.B. nombre de blocs permettant d’afficher dynamiquement des données d’un post WordPress sont préfixés par « post- ».
L’image mise en avant (thumbnail)
Le bloc FSE permettant d’afficher “l’image en vedette” choisie pour un article est « post-featured-image » :
<!-- wp:post-featured-image /-->La principale option proposée par le bloc consiste à proposer un lien hypertexte sur cette image qui peut être utile dans un contexte de page d’archives, mais qui n’a pas beaucoup d’intérêt ici. Je vous déconseille donc d’activer cette option.
<!-- wp:post-featured-image {“isLink” : true } /-->D’autres options de configuration permettent de préstyliser le bloc. Nous consacrerons un article complet à ces personnalisations, mais à titre à titre d’exemple nous pouvons ajouter un preset de filtre de type duotone proposé en standard par WordPress, qui superposera un dégradé de deux tintes de gris.
<!-- wp:post-featured-image {"isLink": true, "style":{"color":{"duotone":"var:preset|duotone|grayscale"} } } /-->Le titre du post
Le titre de l’article est logiquement accessible via le bloc « post-title ». De façon identique au bloc image, des paramètres de configuration sont accessibles pour styliser le bloc, mais il peut être préférable de définir ses styles via le fichier theme.json ou directement via un fichier CSS additionnel.
<!-- wp:post-title /-->Le groupe de métadonnées
Le groupe de méta données du post est identique à celui proposé sur la page d’index du thème index.html.
<!-- wp:group { "tagName": "section", "layout": {"type":"flex","flexWrap":"nowrap"} } -->
<section class="wp-block-group jstheme-meta">
<!-- wp:post-author {"isLink":true} /-->
<!-- wp:post-date {“format”: “d-m-Y”} /-->
<!-- wp:post-terms {"term": "category",“prefix” : “Dans : ” } /-->
<!-- wp:post-terms {"term": "post_tag" } /-->
</section>
<!-- /wp:group -->Les options des métadonnées de l’article
Métadonnée de l’auteur
{ "showAvatar" : false, isLink : true }Métadonnée de la date de publication ou de modification de l’article
Le formatage du bloc de date reprend pour l’essentiel les formats de date PHP. Logiquement, l’option « format » permet de le configurer :
<!-- wp:post-date {"format":"d m Y"} « displayType » : « modified » } /-->Métadonnées des catégories et des tags
Un point intéressant est la possibilité de préfixer le nom ou les liens des catégories.
<!-- wp:post-terms {"term":"category","prefix":"Dans "} /-->N.B. on notera aussi que le bloc affiche finalement un terme de taxonomie, qui elle-même un « terme » (petite particularité de WordPress). On pourra donc choisir d’afficher les catégories ou les étiquettes à l’aide du même bloc, en modifiant uniquement le terme approprié :
<!-- wp:post-terms {"term": "post_tag" } /-->Affichage du contenu du post WordPress
Si les pages d’archives proposent généralement un extrait du contenu de chaque post, la page de l’article se doit évidemment de le présenter en intégralité. Le bloc « post-content » sera donc utilisé :
<!-- wp:post-content /-->L’option à retenir ici est la possibilité de définir des dimensions personnalisées (standard et élargie) pour ce bloc de contenu.
<!– wp:post-content {« layout »:{« type »: »constrained », »contentSize »: »800px », »wideSize »: »900px », »justifyContent »: »center »}} /–>
Espacement avec wp-spacer
Les templates complexes pourront bénéficier de blocs d’espacement permettant de gérer répartir les zones de la page de façon harmosieuse. Le bloc « spacer » permet d’inclure une balise <div> stylisée de marges internes et/ou externes pour répondre à ce besoin
<!-- wp:spacer {"height": 40} -->
<div class="wp-block-spacer" style="height:40px;" aria-hidden="true"></div>
<!-- /wp:spacer -->N.B. la valeur passée en option du bloc n’est accompagnée d’aucune unité, mais sa retranscription dans l’attribut style de la balise la fournie en reprenant na notation CSS inline.
Votre devis en 48 H chrono !
Demandez à être rappelé !
Nous préciserons ensemble votre projet
de vive voix
Navigation des posts individuels
La navigation des posts individuels permet de naviguer vers l’article suivant et précédent. Elle est donc logiquement composée de deux liens. Le même bloc Gutenberg permet de présenter des deux boutons « précédant » et « suivant ». La différence sera définie via l’option « type » du bloc. Seule option, l’affichage d’une flèche (« arrow ») prenant la forme d’un chevron ou d’une flèche simple.
Ce bloc est autofermant.
<!-- wp:group { "tagName": "section", "layout": {"type":"flex","flexWrap":"nowrap", “justifyContent”: “space-between”} } -->
<section class="wp-block-group">
<!-- wp:post-navigation-link {"type":"previous", “arrow”: “chevron”} /-->
<!-- wp:post-navigation-link {"type": "next"} /-->
</section>
<!-- /wp:group -->N.B. Le bloc de group permet d’alignement les bloc imbriqués horizontaux de chaque côté (et au centre) à l’aide de la valeur « space-between » de la règle CSS « justify-content ». Seule la propriété est faite ici l’objet d’une notation CamelCase (JSON) : »jsutifyContent ».
Les commentaires de l’article
Les sections des pages HTML devraient être systématiquement titrées. C’est ici l’occasion de présenter le bloc « heading » permettant d’afficher un titre de niveau 1 à 6 au sein du document. Ce niveau est défini à l’aide de l’option « level ».
Tout comme les blocs de groupe, de colonne ou de paragraphe, les titres doivent être retranscrits à l’intérieur du bloc :
<!-- wp:heading {“level“ : 2} -->
<h2 class=”wp-block-heading”>Commentaires</h2>
<!-- /wp:heading -->Formulaire des commentaires WordPress
Le formulaire de commentaire permet d’assurer un premier nouveau d’interactivité à vos visiteurs sur votre blog internet. Le bloc « comment-form » prend en charge l’affichage du formulaire, son bouton et la logique d’envoi de l’e-mail :
<!-- wp:post-comments-form /-->La bouche des commentaires des articles
La présentation dynamique des commentaires nécessite une requête en base de données ainsi qu’une bouche d’affichage proposant un modèle pour chaque commentaire.
Le bloc « comments-query-loop » permettra d’effectuer cette requête et de boucler sur les résultats. Utilisé seul, il proposera un template générique permettant d’afficher les commentaires des visiteurs :
<!-- wp :group {“layout“ : {“type“ :“constrained“}} -->
<div class=”wp-block-group”>
<!-- wp :post-comments-query-loop -->
<div class=“wp-blocks-comments-query-loop“></div>
<!-- /wp :post-comments-query-loop -->
</div>
<!-- /wp :group --->Template des commentaires
Le bloc de requête des commentaires permet cependant de surcharger le template générique utilisé pour l’affichage de chaque commentaire. Un bloc personnalisé « comment-template » permet alors de réaliser cette surcharge.
Le schéma suivant donne une vision d’une construction possible d’un modèle, de commentaire :
Voici un exemple de template personnalisé reprenant peu ou prou la structure HTML native des commentaire d’un post WordPress :
<!-- wp:comments-query-loop -->
<div class="wp-block-comments-query-loop">
<!-- wp:comment-template -->
<!-- wp:columns -->
<div class="wp-block-columns">
<!-- wp:column {"width": "40px"} -->
<div class="wp-block-column" style="flex-basis: 40px">
<!-- wp:avatar {"size":40,"style":{"radius":"40px","border":{"0":"2","1":"0","2":"p","3":"x","radius":"20px"}}} /-->
</div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:comment-author-name /-->
<!-- wp:comment-date /-->
<!-- wp:comment-edit-link /-->
<!-- wp:comment-content /-->
<!-- wp:comment-reply-link /-->
</div>
<!-- /wp:column -->
</div>
<!-- /wp:columns -->
<!-- /wp:comment-template -->
<!-- wp:comments-pagination {"layout":{"type":"flex","justifyContent":"space-between","orientation":"horizontal","flexWrap":"wrap"}} -->
<!-- wp:comments-pagination-previous {"label" : "Commentaires précédents"} /-->
<!-- wp:comments-pagination-numbers /-->
<!-- wp:comments-pagination-next {"label" : "Commentaires suivants"} /-->
<!-- /wp:comments-pagination -->
</div>
<!-- /wp:comments-query-loop -->Pagination des commentaires
La boucle des commentaires propose par défaut un bloc de pagination. Il est néanmoins possible d’en créer une manuellement lorsqu’une personnalisation est nécessaire.
N.B. Ce bloc est à intégrer à l’intérieur de la boucle des commentaires.
<!-- wp :group {“layout“ : {“type“ :“constrained“}} -->
<div class=”wp-block-group”>
<!-- wp :post-comments-query-loop -->
<div class=“wp-blocks-comments-query-loop“></div>
<!-- wp:comments-pagination {"layout":{"type":"flex","justifyContent":"space-between","orientation":"horizontal","flexWrap":"wrap"}} -->
<!-- wp:comments-pagination-previous {"label" : "Commentaires précédents"} /-->
<!-- wp:comments-pagination-numbers /-->
<!-- wp:comments-pagination-next {"label" : "Commentaires suivants"} /-->
<!-- /wp:comments-pagination -->
<!-- /wp :post-comments-query-loop -->
</div>Deux options principales sont accessibles : l’alignement et les libellés des liens.
L’alignement est contrôlable à l’aide d’un layout de type flex proposant une justification centrée, gauche ou droite ou écartée. Ici la règle CSS « space-between » est appliquée au layout « flex » du bloc de pagination :
{« layout »:{« type »: »flex », »justifyContent »: »space-between » }
Les libellés des liens suivants et précédents sont personnalisables à l’aide de l’option « label »
Les modèles de thèmes FSE de WordPress permettent de construire des structures et prédéfinies pour les utilisateurs finaux. Nous verrons très bientôt qu’il est possible désormais détendre ce système à l’ensemble du site.