Création d’un template d’index de thème FSE WordPress

Si un nombre croissant d’éditeurs de thèmes WordPress se convertissent au Full Site Editing, il peut s’avérer utile de créer un modèle spécifique de page de blog ou d’archives, voire de créer votre thème totalement sur mesure. Cet article est le premier d’une longue série portant sur la création de thème, de templates, et de sites Full Site Editing pour WordPress.

Avant de nous lancer dans le code et le balisage spécifique des templates d’un thème, il peut être pertinent de nous pencher sur quelques concepts fondamentaux qui différencient l FSE des thèmes WordPress dits « classiques ».

Les fichiers indispensables d’un thèmes WordPress FSE

Le header et footer du site

Il faut savoir que le noyau de WordPress prend désormais automatiquement en charge les en-têtes et le pied de page du document HTML du site. Il n’est donc plus besoin de créer des fichiers header.php et footer.php à la racine du thème.

Les contenus des zones d’en-tête et de pied de page sont désormais définis au sein de parties de modèles (« parts »), qui seront importées au sein de chaque modèle.

N.B. il est donc toujours nécessaire de définir un bloc d’en-tête et de pied de page via des parties de modèles, au sein de chaque template (voir plus bas dans cet article).

La fichier functions.php

SI le fichier function.php n’est plus requis, il peut toujours être utilisé pour intégrer des actions ou filtres personnalisés, des fichiers de styles ou JavaScript customisés, des hooks non supportés par les blocs, etc.

Le fichier de styles

Un fichier de styles comportant un en-tête déclaratif du thème doit être présent à la racine du thème. Ces en-têtes minimaux de ce fichier sont les mêmes que pour les thèmes dits classiques :

// style.css

/*
Theme name :..
Description : …
Author name:…
Author URI :…
License :…
Text domain :…
Requires at least…
Tested up to:…
Requires PHP :…
*/

Plus d’information sur les en-têtes des fichiers style.css de thèmes WordPress

Les supports automatiques et personnalisés

Certains supports des thèmes FSE sont activés automatiquement, notamment :

• les balises title : « title-tag »,
• les images mises en avant : « post-thumbnails »,
• les URL intégrées : ‘responsive-embeds,
• les rétroliens : « automatic-feed-links »
• les styles HTML 5 : « html—styles »
• les scripts HTML5 : « html5-scripts »

N.B. le support « wp-block-styles » est optionnel, mais il permet d’assigner des styles tels qu’un padding lorsque qu’un bloc reçoit un fond (background), ajouter des bordures par défaut, etc.

On passera toujours par le hook « after_setup_theme » et la fi-onction « add_theme_support() »pour déclarer nos supports additionnels :

function jstheme_after_setup_theme(){

            add_theme_support( ‘wp-block-styles’ );

}

add_action( ‘after_setup_theme’, ‘astheme_after_setup_theme’ );

Plus d’information sur le hook after_setup_theme

Déclaration et chargement des templates

Avant de créer un fichier index.html, qui affichera les articles de blog du site WordPress, nous devons préciser quelques notions importantes.

Les templates ou modèles de pages sont déclarés au sein d’un dossier « templates » placé à la racine du thème.

Ces templates pourront importer des modèles de parties récurrentes sur le site, parties qui devront être définies au sein d’un dossier « parts » situé à la racine du thème.

<div class=“wp-site-blocks“>{templates}</div>

Tous les templates seront chargés à l’intérieur d’une balise <div> de classe « wp-site-blocks » :

Les templates d’un thème WordPress FSE contiennent des commentaires HTML customisés qui permettent à WordPress de parser le code pour enregistrer les contenus en base de données.

Les commentaires WordPress sont préfixés de « wp : » et suffixés du nom du bloc utilisé.

Les blocs nécessitant une balise fermante seront commentés avec un slash de fermeture situé avant le commentaire.

Ainsi, un bloc de paragraphe sera commenté de la façon suivante :

< !—wp:paragraph —>

Le contenu du paragraphe

< !— /wp:paragraph —>

Un bloc Gutenberg ne proposant pas de contenu ni de blocs imbriqués sera fermé à la façon d’un balise autofermante :

< !—wp :post-feature-image /  —>

C’est finalement assez simple puisque nous utilisons la structure standard des commentaires HTML avec un système de commentaire basé sur le nom des blocs et utilisant le symbole de fermeture des balises.

Les blocs nécessitant du contenu ou des blocs imbriqués seront suivis d’un balisage HTML standard dont la classe correspondra au nom du bloc préfixé de « wp ».

N.B. Attention, un certain nombre de blocs devront définir le type de balise utilisé.
Pour cela, on aura recours à une déclaration JSON au sein même du commentaire (dite inline).
C’est notamment le cas pour le bloc wp-group, qui doit impérativement être situé entre les parties header et footer du template, et envelopper l’intégralité des blocs du modèle :

// index.html

< !—wp:group { “tagName“ :“main“, “layout“ :{“type“ :“constrained“} }—>

<main class=“wp-block-group“>

Ici les blocs intégrés au template WordPress

</main>

< !—/ wp:group—>

Dans l’exemple précédent, on retrouve une déclaration de bloc « group » dont la balise (le tagName) est indiquée par un objet JSON inlne.
Le « type » « constrained » du « layout » inique ici que la présentation sera de type « boxed », c’est-à-dire occupant une largeur fixe généralement centrée dans la page (par opposition à un modèle occupant toute la largeur de la page.

Des templates FSE composites

Comme tout modèle FSE de WordPress, le modèle de page d’articles (et plus généralement d’affichage dynamique de posts WordPress) importe une partie de modèle d’en-tête et de pied de page.

Nous devions donc commencer par créer ces deux parties des modèles (des template-parts).

Au sein du répertoire « parts » de notre thème WordPress, nous créons 2 fichiers :

1. header.html
2. footer.html

Le contenu de ces modèles restera très simple pour débuter, libre à vous de l’enrichir pour le faire correspondre à vos besoins.

tempalte-parts : Les fichiers de partie de modèle

Les fichiers de partie de modèle ne contiennent pas de balisage enveloppant. Les enveloppes, c’est-à-dire leur balise, seront définies au sein d’un commentaire d’import « wp:template-part » dans le modèle qui les utilisera.

Le fichier d’en-tête

Ce dont nous devons nous rappeler,  c’est que l’en-tête de la page comporte généralement le titre et le logo du site, parfois une description aussi appelée « tagline ». à terme, nous pourrons construire ds en-têtes plus complexes, mais nous nous contenerons de quelque chose de simple pour les besoin de cet article.

Nous allons utiliser ici les blocs « site-title » et « site-tagline » comme en-tête de la page d’archive, mais il va de soi que cette configuration ne sera adaptée qu’en cas de blog installé en page d’accueil du site.

Le bloc de logo du site

Les paramètres utiles du bloc de logo du site sont assez simples :

• La largeur (« width ») indique la largeur maximale du logo
• La synchronisation du logo « shouldSyncIcon » indique la prise en compte de ce logo pour le favicon du site (affiché dans les onglets des navigateurs)
• L’alignement « textAlign » permet de placer le logo au sein de son bloc HTML parent
• La présence d’un lien renvoyant vers la page d’accueil est indiquée par “isLInk »
• L’ouverture du lien dans un nouvel onglet est indiquée par « linkTarget » :  « _blank », mais ne correspond pas à l’utilisation d’un logo de site.

< !—wp:site-logo {“width“ :200, “shouldSyncIcon : true, “isLink“:true } /—>

Le bloc de titre du site

Le bloc de titre du site peut être assez utile dans le cas d’un blog.

On peut délier le titre du site de la page d’accueil si nécessaire.

Le titre du site est par défaut intégré au sein d’un titre HTML (h2, h2, etc.), mais il est possible de basculer sur un paragraphe simple en attribuant un niveau de titre à 0 (zéro)

< !—wp:site-title {“level“:0, isLink:false, “textAlign“:“center“ } / -->

Ici le titre du site ne propose pas de lien vers la page d’accueil du site.

Le bloc de description du site, la tagline

Pas grand-chose à voir ici, nous nous contentons de centrer la tagline :

<!-- wp:site-tagline {"textAlign":"center" } /-->

Le bloc de groupe enveloppant les éléments de l’en-tête

Envelopper les éléments d’un en-tête est toujours une bonne idée. Cela permet de tester son en-tête dans plusieurs configurations et de laisser la possibilité à l’utilisateur de choisir ce qui convient le mieux à son site WordPress.

Nous utilisons ici le bloc « group », mais un bloc « column » pourrait tout autant être adapté :

// parts/header.html

< !—wp:site-title {“level“:0, isLink:false, “textAlign“:“center“ } / -->

< !—wp:site-logo {“width“ :200, “shouldSyncIcon : true, “isLink“:true } /—>

<!-- wp:site-tagline {"textAlign":"center" } /-->

Le fichier de pied de page

Le pied de page de nos templates de thème WordPress se contentera pour l’instant d’afficher un copyright. Nous verrons plus tard comment y intégrer des colonnes et des zones de widgets.

Rappelons-nous encore une fois que, comme pour le header et les autres template-parts, nous nous contenions ici de créer du contenu à envelopper depuis le template principal :

// parts/footer.html

< !-- wp:paragraph {“align“ : “center“ } -->

&copy; VotreMarque 2023

< !-- /wp:paragraph  -->

Création du template d’index d’un thème Full Site Editing pour WordPress

Le modèle index.html de notre thème WordPress remplit la fonction du fichier index.php des thèmes classiques. Il permettra donc d’afficher les pages de blog, mais aussi comme fichier par défaut pour l’ensemble des pages dites « d’archives » du site.

Structure du template index.html

La stratégie du fichier est d’importer les 2 fichiers précédemment créés à l’aide d’un bloc template-part qui permettra de rechercher le fichier correspondant au “slug“ passé en paramètre, de créer un balisage HTML correspondant au “tagName“, et de lui assigner une classe passer via la propriété ““tagName“ (les commentaires de ces deux blocs sont autofermants).

Enfin nous utiliserons un balisage de groupe avec la balise <main> pour y intégrer ensuite une boucle de posts.

Rappelez-vous que le balisage devra être créé manuellement après le commentaire :

// index.html

< !-- wp:template-part {“slug“ :“header“, “tagName“:“header“,“className“:“main-header site-header“} / -->

<!- - wp:group {“tagName“:“main“, “layout“:{“type“:”constrained”}} -->

<div class=“wp-block-group“>

{ Ici sear installée la boucle de requête mais ne notez rien ici }

</div>

<!- -/ wp:group -->

<!-- wp:template-part { “slug“:“footer“,“tagName“:“footer“,“className“:“footer main-footer colophon“ } / -->

N.B.  Le bloc <main> n’autorise pas l’intégration de contenu texte plein. Une tentative lèvera une erreur de bloc à ce niveau.

La boucle de requête des posts WordPress

La boucle de requêtes est un bloc de thème « query » auquel nous passerons en paramètre le type de balise à utiliser.

Au sein de ce bloc de requêtes, nous intégrerons un bloc « post-template » simple, incluant l’ensemble des éléments de template de chaque présentation de post soit.

N.B. il est possible de déclarer, par défaut, un affichage en grille des posts WordPress.

Ce paramétrage s’effectue au niveau du template « post-template »

• L’image mise en avant : post-featured-image
• Le titre du poste : post-title
• Les éléments de métadonnées :
  • L’auteur : post-authorLa date de publication : post-date
  • Les catégories du post : post-terms
• Le résumé du post : post-excerpt
• Le lien « en lire plus » :  read-more
• Un bloc de pagination

Les commentaires de blocs de templates de posts sont autofermants :

// index.html

< !-- wp:query {“taName“ :“section“} -->

<section class=“wp-block-query“>

            <!-- wp:post-template {“layout“ : { “type“: “grid”, “columnCount“: 3} } -->

                        <!-- wp:post-featured-image /-->

                        <!-- wp:post-title /-->

                        <!-- wp:group {“tagName“:“section“, “layout“: { “type“: “flex“, “flexWrap“: “nowrap“ } } /-->

                        <section class=”wp-block-group“>

                                    <!-- wp:post-author {“showAvatar“:false } /-->

<!-- wp:post-date /-->

<!-- wp:post-terms { “term”: “category” } /-->

                        </section>

                        <!-- wp:post-excerpt /-->

                        <!-- wp:post-read-more /-->

            <!-- /wp:group -->

            <!-- /wp:post-template -->

            <!-- wp:query-pagination {“paginationArrow“:“chevron“, “layout“:{“type“:“flex“, “justifyContent“:“center“}} -->

            <div class=“wp-block-query-pagination“></div>

            <!-- /wp:query-pagination -->

</section>

<!-- wp:query -->

N.B. vous noterez que le bloc de pagination n’est intégré qu’avec une balise <div> vide

Stylisation du template d’index de thème WordPress FSE

SI vous avez tout juste commencé votre thème WordPress, vous vous apercevrez sans doute que ce template prend toute la largeur de la page. C’est tout à fait normal, et il vous faudra déclarer et commencer à paramétrer votre fichier theme.json pour styliser tout cela.

En attendant un article plus conséquent sur le fichier de déclaration theme.json des thèmes FSE WdrdPress, et vous pouvez commencer à intégrer quelques éléments clés afin de vous familiariser avec de configuration et de définir les dimensions du site :

Le fichier theme.json présente un objet Javascrit Object Notation, il n’accepte donc que les doubles guillemets, des valeurs booléennes, des tables et des objets JavaScript :

// theme.json

{

            “$schemas“ : “https://schemas.org/wp.org/trunk/theme.json”,

            “version“: 2,

            “settings“: {

            “appearanceTools”: true,

            “layout”: {

                        “contentSize“: “1280px“,

                        “wideSize“: “1480px“

            },

            “color“: {},

            “typography”: {},

            “spacing“: {},

            “dimensions“: {},

            “border“: {},

            “custom“: {}

},

            “styles“: {

            “color“:{},

            “typography“,

            “spacing“: {},

            “blocks“: {},

            “elements“: {}

},

            “templateParts“ : [],

            “customTemplates“: []

}

Voilà, pour cette introduction à la création de thèmes FSE (Full Site Editing). NOus nous retrouvons bientôt pour la suite d’une série d’articles qui risque d’être longue 😉