 Dans WordPress, une page n'est pas un article, mais quelle est la différence ? Cette question m'est souvent posée pendant mes formations. Globalement, la structure est la même à quelques exceptions près. En ce qui concerne les pages, en général, ce sont des contenus statiques comme à propos, contact, la page d'accueil étant une exception. Pour les articles, des éléments supplémentaires s'ajoutent aux titres et aux contenus, la date, l'auteur et les méthodes de classement. Ce sont des flux d'information qu'il est possible d'afficher en utilisant des catégories ou des étiquettes. Dans ce live dédié au FSE Full City Diting, je vais te montrer comment créer les deux types de modèles utilisés dans WordPress. Je suis Grégoire Noyale si tu ne me connais pas encore. Saches que je suis active dans l'univers des thèmes WordPress depuis plus de 15 ans. À travers ces lives, je souhaite partager mon expertise dans cette nouvelle ère de WordPress. Ce que je vais vous montrer, simplement, on va repasser sur l'autre vue. C'est le replay de la dernière fois. Je ferai aussi un replay pour celui-ci. Ce qui est intéressant, c'est que j'ai essayé au maximum. Je vous enverrai les deux liens. Quand je vais publier le deuxième replay, je mettrai aussi le premier. De toute façon, il est accessible sur ma chaîne. Si vous allez sur Grégoire Noyale, vous avez ce replay qui est en libre accès. J'ai mis le sommaire. Ça, c'est important pour que ce que ça fait quand même 40 minutes. Vous pouvez naviguer facilement dans tous les éléments principaux. Là où on s'est concentré la dernière fois, c'est qu'on a vu une vue globale avec la création de thèmes, avec Create Block Thames, qui est vraiment l'extension centrale dès qu'on fait un thème en full-site editing. On a réglé quelques éléments, notamment les polices. On a ajouté une police Google. On a fait des réglages sur les titres. On a vu le guide de style. On a vu également créer une palette de couleurs, quelques réglages de mise en page, modifiés des alignements. On ne va pas tout refaire ce soir. Je ne vais pas tout refaire à chaque fois. Aujourd'hui, je voudrais qu'on se concentre sur ce qu'on appelle le templating. Je vous avais montré très rapidement la dernière fois ce schéma en question, qui est vraiment le schéma central dès que vous allez créer un thème sur mesure pour voir comment fonctionne WordPress. Quand on utilise WordPress, quand on crée un thème, en tout cas, il ajoute automatiquement le modèle de base qui s'appelle index.php. Ce modèle, il regroupe tous les modèles. Aussi bien, et pour simplifier, je vais séparer en deux groupes. On a les modèles pour les archives et les modèles pour les singles. Quand je dis archive, c'est-à-dire qu'on va afficher une suite de contenus. Donc, ça peut être des articles, des recettes. Dès que vous avez plusieurs contenus à la suite, souvent sous la forme d'une grille, avant on avait plutôt sous la forme d'une liste. Maintenant, on est plutôt dans une logique de grille. Et ensuite, tout ce qui est single, c'est que je clique sur un article ou une page et j'affiche le contenu en entier, un seul contenu unique. Ce qui va distinguer, par contre, ce qu'on appelle la single de page. En général, le modèle de single, c'est ce qu'on a dans les modèles des articles, on a le titre, la date, on a l'auteur, les catégories, les étiquettes. Typiquement, pour les pages, on n'a pas tout ça. Donc, on va voir comment créer ces premiers modèles. Et puis surtout, je vais vous montrer cette logique qui est un peu difficile à comprendre au début, qui permet d'avoir du débordement sur les visuels. Alors, j'espère tout ce que vous avez eu le temps d'installer au moins un site en locale avec local. Et je vous avais donné également le lien pour les visuels de manière à pas partir de zéro. Alors, j'ai quelques questions qui ont été envoyées dans les formulaires. Donc, ça, je les verrai à la fin. Peut-être qu'on s'arrêtera un petit peu plus tôt pour que je puisse traiter ces questions. Donc, je vous propose qu'on redémarre. Donc, je suis connecté au site. Alors, la bonne pratique, c'est toujours d'avoir un onglet où on a le back office normal de WordPress. Donc, là, avec les navigations vers les articles, les pages, les commentaires. Et un autre onglet qui gère la partie éditeur à proprement parler, c'est-à-dire tout ce qui concerne le FSE. Alors, quand on s'est vu en juillet, on était encore sur la 6.2. Là, on est basculé en août sur la 6.3. Alors, il y a des petites nouveautés par rapport à ce qu'on a vu. Notamment, il y a les navigations qui sont intégrées automatiquement, des conclits sur éditeur. On a les styles, l'onglet style. Donc, ça, c'est ce qu'on avait fait la dernière fois avec changer les titres, ajouter une police, etc. Toutes les pages qui sont listées, alors ça, c'est un peu moyen, je trouve, parce qu'on peut créer des pages à partir de là. Mais j'ai l'impression que ça va plus embrouiller les gens qu'autre chose. Mais bon, ça va peut-être évoluer. Les modèles, donc ça, on l'avait à peine vu la dernière fois. C'est là qu'on va créer un modèle de page. Et les éléments de modèle n'existent plus. Ils sont basculés dans les compositions. Donc, là, on a mes compositions. Et là, c'est génial, parce que la 6.3, on peut créer des compositions depuis le back office. Avant, on était obligé d'utiliser une extension, notamment blockmaster. Maintenant, en natif, on peut créer des compositions. Alors, une composition, c'est quoi ? C'est un ensemble de blocs que je vais enregistrer avec les réglages et que je vais pouvoir appliquer à plusieurs pages ou à plusieurs articles. Alors là, et j'espère qu'au fur et à mesure, on va garder cette régularité d'avoir à peu près un live par mois. Et j'aimerais qu'on aille un moment plus loin dans les compositions, parce qu'on peut faire des choses très poussées, notamment, on peut verrouiller les compositions de manière à ce que si vous faites un site pour un client, bien, vous allez pouvoir imposer vos compositions. Et alors, ce qui est d'autant plus intéressant, c'est que tu vas pouvoir, à un moment, dire que ton client ne peut que changer le contenu sans bouger les éléments. Alors, les tests qu'on avait fait dans un des modules que j'avais, notamment Sergio, étaient là. Ce qui était gênant, c'est qu'on pouvait déverrouiller les compositions qu'on avait en amont verrouillées. Eh bien, j'ai trouvé la méthode. Il y a une méthode qui permet dans la pays de dire, moi, pour tel rôle, je ne veux pas qu'ils puissent déverrouiller mes compositions. Donc, ça veut dire qu'on peut faire des choses quand même très pointues, juste avec les compositions. Donc, ça, c'est juste une appartée, mais on fera, je pense, un live que sur ça, parce que ça mérite vraiment un live entier. Alors, il y avait une question de Sergio, notamment, qui me demandait, c'est quoi la différence entre les modèles et les éléments de modèle, ce qu'on retrouve ici. Les éléments de modèle, typiquement, c'est ce qu'on va avoir sur toutes les pages, c'est les éléments qui vont être mutualisés, typiquement le header ou le footer ou pied de page. Donc, ces éléments de modèle, ils sont cruciaux parce que ça évite quand on change une navigation, qu'on est obligé de le changer sur toutes les pages. Donc, on l'a même dans l'ancienne approche de WordPress, c'était la même logique. On avait le header et le footer qu'on appelait sur toutes les pages. Alors, si on a le temps, moi, j'aimerais qu'on fasse déjà le modèle pour les pages, parce que pour l'instant, si on retourne dans nos modèles, on a un seul modèle qui indexe, qui marche partout. Alors, il est intéressant, oui, parce qu'il permet d'avoir tous les éléments de base, mais typiquement, pour une page, on n'a pas besoin d'avoir le titre de la page qui est clicable. Par exemple, si je vais dans l'exemple, tu vois qu'il est clicable. On clique dessus et on retourne dans la même page. Donc, ça, aucun intérêt. Donc, ça déjà, on va l'enlever. Et puis, on n'a pas besoin d'avoir l'auteur et la date. Donc, ça également, on va le retirer. En tout cas, si on a le temps, j'aimerais qu'on puisse faire un modèle pour les pages et un autre modèle qui serait là cette fois-ci personnalisé, qui permettrait d'avoir une variante sur les pages, notamment où on pourrait enlever les éléments de modèle. Pourquoi ça peut être intéressant ? Typiquement, quand tu fais une landing page, tu n'as pas besoin d'avoir ni l'entête ni le footer. Là, du coup, on ferait un modèle qui est dédié. Alors, on va commencer par créer un modèle pour les pages. Si je regarde la template hierarchy, je reviendrai souvent dessus. Alors, si il n'y a pas le fichier page, il va prendre index. Si, par contre, je mets page, c'est page qui sera pris en priorité. On va vraiment à gauche du plus spécifique au plus général. Par contre, on peut faire des choses plus pointues. C'est-à-dire que je pourrais dire que moi, je fais un fichier qui s'appelle page-slug. Je vais essayer de zoomer pour te montrer. Quand tu vois slug ici, tu as un dollar devant. Ça veut dire que c'est une donnée qui est variable. Elle est en fonction de ton projet. Et le slug, c'est ce que tu retrouves dans l'URL. Si, par exemple, j'ai une page qui s'appelle contact, son slug, ça sera contact. Quand je fais un fichier qui s'appelle page-contact.html dans l'UFSE, tous les autres éléments, c'est exactement la même logique. Si je fais page-contact.html, le modèle va s'appliquer automatiquement à la page contact. On ne va pas aller jusque là, mais je te donne juste l'info. Ensuite, on va aller dans la partie éditeur. Là, pour y aller, je te remonte, c'est dans Apparence Éditeur. Là, j'ai deux ongles d'ouvert et je vais ajouter un nouveau modèle. Si je fais page, regarde ce qui va se passer. Il va me dire, est-ce que je veux que ce soit pour toutes les pages ? Là, ça sera si je reprends la température archi page.php ici ou pour une page spécifique. Là, il va me proposer de sélectionner une des pages qui existent. Là, il reprendra le slug. Ce n'est pas ce que je veux. Je vais repartir à 0. Je vais faire page et je fais toutes les pages. Il me propose de repartir d'un modèle. Ça n'a pas d'intérêt puisque là, le modèle qui me propose, c'est l'index. Non, moi, je veux partir de 0. Je vais faire passer. Là, je me retrouve sans rien. Ce qui est important dès que tu vas construire des modèles, c'est d'utiliser l'avion liste parce que tu vois ce qui se passe. Tu vois comment tu construis ton modèle. Là, je vais fermer à droite mes options. Là, je vais ajouter un premier élément. Je te conseille le raccourci. Tu peux utiliser le plus qu'il y a à droite, mais tant que possible, utiliser ce raccourci, il te le dit d'ailleurs, saisir slash pour choisir un bloc. Là, on va utiliser un élément de modèle, un élément qui est mutualisé, qui existe déjà dès que tu crées un thème avec RedBlockThème, les deux éléments de modèle s'ajoutent automatiquement. Tu as le footer, le header ou l'entête. Là, je vais faire en tête élément de modèle. Là, il me le propose. Quand il me le propose, quand il le propose en liste, tu vois, tu peux utiliser les flèches du clavier. Si c'est entouré, ça veut dire que tu peux appuyer sur la touche entrée et donc ça te valide. Là, il me permet de choisir. J'ai les deux éléments de modèle. Là, je prends le header qui correspond à l'entête. Ensuite, dessous, je vais ajouter un autre élément. Et ça, celui-ci est important. Ça va être le groupe principal qui va tout englober. Il va être utilisé, notamment si tu avais besoin d'une couleur de fond sur ce bloc, il va prendre toute la page, toute la largeur. Là, je vais faire une colonne et sur la droite, dans avancée, tout en bas, on va choisir l'élément HTML. Par défaut, un groupe, c'est toujours une div. Là, ce n'est pas très parlant au niveau sémantique. En général, la balise principale d'une page web, c'est toujours main qu'on utilise. C'est beaucoup plus sémantique comme ça. Ça structure mieux le contenu. Donc, je vais faire main et je vais fermer. Là, c'est mon groupe et à l'intérieur de ce groupe, je vais appeler ce qu'on appelle des éléments de modèle. Les éléments de modèle, c'est des éléments qui sont dynamiques. C'est-à-dire qu'ils sont soit des réglages qui viennent du back office ou alors d'options de WordPress. Typiquement ici, ma première boulangerie, ça, c'est un élément de modèle. Ça s'appelle la description du site. Donc là, si je fais ma première boulangerie, machin pour te montrer. Là, j'enregistre et si je repars dans un réglage, un des réglages WordPress, réglages général, là, tu vois que ça, c'est un élément qui est enregistré dans la base de données et que je peux récupérer dynamiquement dans mes éléments de modèle. Donc avant, on faisait ça avec des fonctions PHP. Là, la bonne nouvelle, c'est qu'on n'a pas besoin de coder. On ajoute un bloc qui s'appelle élément de modèle et ça l'affiche dynamiquement. Donc là, si j'enlève machin, je vais te montrer. Donc là, je mets à jour. Donc ça, ça enregistre dans la base de données. Là, je vérifie toujours que j'enregistre avant de recharger la page. Et si je recharge la page, tu vois que ça a mis à jour mon contenu. Donc je vérifie que je suis toujours dans le modèle de page que je suis en train d'éditer. Je vais le placer à l'intérieur après. Donc je vais placer un élément dessous. Donc là, je vais faire ajouter après. On va faire un bloc titre de la publication. Alors qu'est-ce que ça fait ? Eh bien, ça reprend dynamiquement le titre qui va être le titre de la page. Alors ça, je voudrais le placer. Je vais mettre à l'intérieur du groupe, qui est le groupe principal. Voilà, il faut le... je vais te montrer parce que c'est pas toujours simple au début. Tu prends à gauche et tu le déplaces sur la droite. Donc là, il se place automatiquement dans le groupe. Ensuite, dessous, je vais mettre le contenu de la publication. Alors le contenu de la publication, lui, qu'est-ce qu'il fait ? Alors je le mets dessous d'ailleurs. Il affiche tous les blocs de ton site. Quelques soient les blocs que tu mets. Alors c'est vrai qu'il n'est pas très visuel comme ça, mais si tu mets une galerie d'image, un visuel, etc., eh bien, il va te mettre tous ces éléments à la suite. Donc ça, c'est pas mal. Ensuite, j'ajoute un élément dessous et je vais ajouter mon footer. Donc attention, ces deux éléments, titre de la publication et contenu de la publication, c'est ce qu'on appelle des blocs de thème. Je vais te montrer où ils sont. Si je clique sur plus, je vais dans blocs. Si je descends, voilà, c'est des blocs de thème. On a navigation, logo du site, boucle de requête, liste de publications, titre du site, titre de la publication, extrait, hauteur. On les ajoutera au fur et à mesure. Pour l'instant, je te montre où c'est. Donc ça, n'hésite pas à faire des tests, mais là, pour l'instant, on prend des blocs basiques. Ce que je voudrais ajouter juste sous l'élément pour que tu vois bien ce qui se passe, c'est que je vais mettre dessous un bloc qui, lui, va être statique. C'est-à-dire qu'il faut pas hésiter dans tes modèles à mélanger le contenu statique et le contenu dynamique. Bien sûr, il faut que c'est du sens. Mais typiquement, si tu commences à faire un système de colonne, et on va voir que c'est possible, tu peux, dans tes colonnes, mettre des blocs dynamiques. Donc du coup, tu peux mélanger les deux. C'est-à-dire que les colonnes ne vont pas bouger, mais par contre, les éléments dynamiques à l'intérieur seront différents en fonction du contenu. Par exemple, si tu mets un texte qui est dynamique et tu pourrais appeler une métadonnée qui, elle, serait dynamique. Donc là, ça serait la même logique. Donc là, je vais ajouter en dessous et je vais mettre juste modèle pour les pages. Je vais mettre en gras pour le distinguer. J'enregistre. Attention, on enregistre deux fois cet endroit-là. Pourquoi on enregistre deux fois ? C'est que parfois, on a plusieurs éléments qui ont été modifiés. Ça peut être l'entête, la page, le footer. Et du coup, il nous permet d'enregistrer certains éléments seulement. Donc là, si je recharge une page, donc là, j'ai une page active, tu vois que j'ai plus le lien sur la page. Alors, je te montre où c'est. Quand tu es sur le titre de la publication, tu peux créer un lien sur le titre. Ça n'a aucun intérêt au niveau des pages. Par contre, je pourrais changer le style. Je pourrais dire, tiens, moi, j'ai envie qu'ici, pour les pages seulement, le texte soit plus gros et puis qu'il soit centré. Pourquoi pas, hein ? Juste pour les pages. Donc là, si je recharge, tu vois que dynamiquement, il reprend bien le titre de ma page. Donc là, tu vois, j'ai une autre page. Là, j'ai mes blocs. Donc là, si je dis de cette page pour te montrer, j'avais pas de blocs, mais je mets une image. Et puis, dessous, j'ai mis cinq paragraph et je mets jour. Ça aurait pu être des galeries. Ça pourrait être n'importe quel élément. Donc là, je vois la page. Et tu vois qu'il affiche bien tous mes blocs, plus ce contenu qui est statique, qui serait pour toutes les pages, le même texte. Alors, ça marche plutôt bien pour l'instant. Par contre, il y a quelque chose qui ne marche pas. Je vais te montrer si je vais sur l'autre page. Ça, c'est essentiel d'Angus Timber. C'est-à-dire que si je décide de sortir en grande largeur l'image, ça marche dans le back office. Alors, j'ouvrir deux anglais. Mais ça ne marche pas ici. Pareil, si je dis que c'est en pleine largeur, et ça, ça va être valable quasiment pour tous les blocs, ça ne marche pas non plus ici. Je vais te montrer comment on fait. Il faut vraiment toujours appliquer la même méthode. Alors, pour que ce débordement fonctionne, il faut que le parent direct soit boxé. Donc là, il n'est pas boxé. Je vais le boxer et on va voir si ça marche. Donc ça, c'est pour le contenu de la publication. Donc là, j'enregistre et si je recharge et ça ne sort toujours pas. Pourquoi ça ne sort pas ? C'est parce qu'il y a le contenu supérieur, qui est tout en haut, qui lui est déjà boxé. C'est ça qui pose un problème, parce qu'il y a un double boxage et il n'arrive pas à sortir. Donc là, si j'enlève ça, on va voir ce qui se passe. Et je vais te montrer sur ce groupe. Je vais ajouter une couleur pour voir ce qui se passe. Je vais ajouter une couleur un peu légère. Je vais faire d'abord boxer, que tu vois la différence. Ça, c'est bon. Là, je l'enlevais. Et sur le contenu, c'est celui-ci que je boxais. Donc là, il est boxé. J'enregistre et on va voir si ça marche maintenant. Et là, ça sort. C'est parce que c'est le contenu direct, mais celui qui en amont le premier qui englobe tout, là, tu le boxes pas. Par contre, regarde, si tu fais ça et que ton titre est à gauche, ce qui est plutôt local plus courant, là, on va avoir un petit souci. Tu vois, il va se caler complètement à gauche. C'est pas ce que je veux. Donc là, déjà, je vais changer la page. Je peux dire que c'est un grand largeur plutôt. Et si je recharge ? Parce que sinon, c'est beaucoup trop grand. Alors, le moyen de construire pour que ça marche à tous les coups, c'est que tu reprends ton modèle. Alors, je te remonte quand même où c'est au niveau de l'éditeur. Les largeurs, tu les gères ici dans mise en page. Ça, c'est le contenu boxé de base. C'est-à-dire que le contenu est centré et la taille maximum, c'est 700 pixels. Là, c'est le contenu large. Donc là, je peux changer. Je peux dire que le contenu large, il va être à 1002. Donc là, par exemple, si je fais 850 et là, ça va se changer partout sur le site. Ça, c'est centralisé. Sur la pleine largeur, il n'y a pas besoin puisque c'est pleine largeur, c'est pleine largeur. Alors, c'est peut-être un peu grand pour mon écran parce que j'ai mis une résolution assez basse pour que tu vois mieux ce que je suis en train de faire. Donc, on va rester sur 1050. Et tu vois que ça va se mettre à jour partout sur le site. Voilà. Alors, comment régler ce problème de titre ? Eh bien le seul moyen, comme le boxage, on peut l'appliquer sur le contenu de la publication qui équivaut finalement à un groupe. Ça se comporte un peu comme un groupe. Eh bien pour le titre de la publication, t'es obligé de me mettre dans un groupe. Et tu vas boxer le groupe du titre. Donc là, je vais faire grouper. Donc là, on peut le faire assez facilement. Je vais dire grouper. Donc ça le met directement dans un groupe. Et là, par défaut, dès que tu mets un groupe, c'est boxé. Et tu vas voir que ça règle tout de suite le problème. Donc là, si je recharge, tu vois que mon titre en fait saligne avec le boxage standard. Tu vois que par contre, mon titre dynamique, il pose un problème. Donc là, on est obligé d'appliquer la même logique. Si tu as besoin d'avoir un titre, un élément statique en bas, il faudrait que tu le mettes dans un groupe également. Donc là, on va faire grouper. Et donc là, tu vas voir que maintenant, tout est boxé correctement. Et puis, j'ai ma couleur derrière plan. Alors là, je trouve que tu vois, au niveau du contenu principal, c'est trop serré. Alors, on va le mettre. J'vais repartir dans mon modèle. Et puis, je vais mettre un peu au niveau du groupe. Le principal, on va mettre au niveau des dimensions. Alors, ça, c'est nouveau depuis à CSS.3. On a beaucoup plus de contrôle au niveau des marges internes ou externes. Et ça peut fonctionner par groupe. Ça, c'est intéressant. Horizontale ou verticale ou haut, bas, droite, bas, gauche ou tout personnalisé. Donc ça, c'est vachement bien. Typiquement, tu vois, la marge interne, tu la fais en direct sur en haut et en bas tout de suite. Et puis, on va mettre un tout petit peu sur le côté. Alors, sur le côté, c'est plus quand tu redimensionnes la page sur les mobiles parce que, du coup, tu t'assures que c'est pas complètement collé. Je vais te montrer ce que ça donne. Tu vois, j'ai un petit peu de padding sur le côté. Du coup, c'est pas complètement collé tant que je vais me mettre en 100% pour te montrer. Tu vois, quand je redimensionne, là, le fait d'avoir un petit peu de padding sur la droite, bah du coup, sur les mobiles, quand c'est plus grand, c'est pas visible, c'est pas gênant. Par contre, quand je redimensionne, c'est bon. Donc si je résume pour cette partie-là, parce que ça, c'est essentiel, ici, j'ai mon groupe principal. Sur mon groupe principal, alors, je vais me remettre sur le réglage. Il n'est pas boxé. Donc ça, c'est important. Il n'y a aucun boxage à cet endroit-là. Ensuite, si j'ai, par exemple, un élément titre avec une date ou etc., là, je le boxe. Le contenu de la publication, je le boxe. Et le groupe, pareil, je le boxe. Ce qu'on peut peut-être faire, c'est reprendre tous ces groupes, tous ces éléments et faire, parce qu'on est un peu dans la single. Je vais te montrer quand même que tout fonctionne au niveau de l'espacement. Donc si je modifie la page, si je mettais un autre bloc, donc là, je vais faire un paragraph. Je vais faire un texte. Ensuite, je vais le centrer. Et puis, je vais mettre un arrière-plan. Ça va être magnifique. La dernière fois, on a fait des couleurs un peu. Chaque fois, je fais le sapin de Noël. Ça, et au niveau de la couleur, voilà. Donc là, il déborde automatiquement. Alors tu vois que sur le paragraph, on n'a pas d'options de débordement, mais on pourrait très facilement contourner le plaçant dans un groupe. Et à partir de ce moment-là, tu retrouves des options de débordement. Donc là, je vais le mettre sur grande largeur. Puis je te montre ce que ça donne. Puis je vois la page. Donc tu vois, en fait, ça déborde. Ça déborde pas aussi large que l'image, mais on a peut-être un élément qui a été intégré en plus. Mais en tout cas, on a une même option. Et je pourrais en prenant le groupe par contre ici. Donc là, je veux dire que c'est en pleine largeur. Alors pourquoi il ne me l'a pas appliqué ici ? Ah voilà, c'est bon. En fait, je l'avais boxé au niveau du groupe. Donc j'enlève le boxage. Et donc du coup, je sors tout mon groupe et ça peut sortir en direct. Alors ce que je voudrais faire maintenant, c'est pas reprendre l'index parce que l'index, pour l'instant, si je vais sur un page d'accueil, par exemple là, j'ai un seul article. Le lien est quand même cliquable. Donc ça n'a pas tellement d'intérêt. Donc on va faire un modèle qui est dédié, qu'on appelle la single. Et pour ça, je vais reprendre mon modèle. Donc là, je suis bien dans l'éditeur. Alors si je suis pas sûr, autant repartir en arrière. Là, j'ai trop d'onglet. Donc je vais faire un peu de nettoyage. Donc je vais dans modèle, page. Et là, à droite, on a trois petits points. Tu peux copier tous les blocs. Je copie tous les blocs. Ensuite, je repars dans les modèles. Donc je remonte un niveau et je fais plus. Et on va créer le modèle pour les singles. Donc c'est élément unique, single, article. Et là, il me pose la même question. Je vais traficher la template hiérarchie. Quand tu es sur single, voilà. Donc là, on pourrait dire que c'est quelque chose qu'on ne fait jamais. Mais je te montre la logique quand même. C'est-à-dire que si tu fais single, post type avec le slog, donc post type, ça sera le type. Et là, typiquement, ça serait single tiré post. Donc il y a un des contenus de WordPress. On a page ou post par défaut. Et le slog, ça serait ce que tu as dans l'URL de l'article. Sinon, si tu fais single tout seul, ça va s'appliquer à toutes les singles et notamment les articles. On verra dans un autre live comment créer un contenu sur mesure. Donc on fera une recette ou autre chose. Et là, on partira de zéro et on va construire les modèles spécifiques pour ce contenu. Donc là, on va faire single simple, tous les articles. Il nous propose la même chose. On va faire passer. Et ici, comme j'ai précédemment copié tous mes blogs, moi, j'ai juste à faire comment de ver. Et là, je retrouve tous mes blogs. Alors il y a des petites choses que je vais modifier, notamment sous le titre. Je vais mettre la date de publication. Donc là, on va se placer dessous. Et on va faire ajouter après. Je vais mettre sous le titre. Et c'est un blog de thème qui s'appelle date. Donc on a date de publication. Donc là, il le met en direct. Et on peut avoir le lien vers la publication au niveau du titre. On ne va pas le mettre ici. Qu'est-ce qui nous propose dans les options afficher la date de la dernière modification ? Ça, ça peut être intéressant. Ou lien vers la publication, ça, on n'a pas besoin ici. Par contre, je te montre ce que ça donne. Alors ça, c'est nouveau aussi. Tu vois, on peut voir le site. Donc là, si j'affiche, si j'ai registré, c'est bon. Donc là, j'ai la date. Mais il me met la date en direct. Donc là, on peut ajouter avant du contenu statique. Donc là, je vais ajouter après. On va mettre par exemple, publier le et deux points. Alors comment on est groupé sur une soligne ? Il n'y a rien de plus simple. Tu les sélectionnes tous les deux ou tu passes par ici. Soit tu les sélectionnes dans l'édition elle-même, soit tu prends les blocs avec la touche majuscule. Je te montre. Donc tu appuies sur la touche majuscule deuxième. Et là, tu peux directement les grouper. Il y a pas mal de choses dynamiques que tu peux faire dès que tu sélectionnes plusieurs blocs. Tu peux les déplacer, tu peux les grouper, tu peux les supprimer. Là, je vais les grouper, mais pas les grouper n'importe comment. Je vais les grouper en rangée. Ça permet de les mettre sur un même niveau. Donc ça les met directement. Par contre, tu vois que l'ordre ne va pas. Je vais les déplacer avec la flèche ou avec le glissé déposé qui est ici. Ça fait la même chose. Alors ce qui est intéressant quand on a la rangée, c'est qu'on a la possibilité. Tu vois que comme il y a un boxage qui est appliqué, je peux aussi sortir toute la rangée. On peut également les centrer ou les mettre à droite ou à gauche. Donc ça, c'est très pratique le bloc rangé. Et puis si on trouve, je te montre, j'enregistre d'abord pour te montrer. Donc là, c'est pas mal. Tu vois, il y a trop d'espace. C'est facile à régler. Tu sélectionnes la rangée. À droite, on a l'espacement entre les blocs. Alors l'espacement entre les blocs, il est ici. Quand tu es, attention, j'ai changé d'onglet. Dans l'onglet style mis en page, on a l'espacement entre les blocs globales qui s'appliquent partout. Donc là, du coup, localement, quand tu as besoin de faire un espacement différent, c'est possible à tout moment. Donc là, attention, je sors de l'onglet style. Je repasse dans l'onglet normal. Et puis ici, je vais changer l'espacement entre les blocs. Donc là, si je mets à zéro, j'ai vraiment zéro. Et je vais mettre quelque chose un peu plus précis. Et là, j'enregistre. Donc là, tu peux dire, c'est pas assez gros. On peut changer. C'est la main sur ça. Donc là, ça va l'appliquer sur toute la rangée. On pourrait même changer la couleur. Je ne suis pas sûr que pour le titre, ça va l'appliquer parce qu'on est dans les liens. Oui, on est dans les liens ici. Donc là, il me fait un lien différent. Ce n'est bien pas un lien. C'est simplement que lui, il considère que c'est deux blocs, deux entités différentes. Donc il n'y a pas d'héritage à ce niveau-là. En tout cas, ce qu'il faut retenir là et ce qui est important, c'est de bien voir qu'on mélange encore la partie statique. Donc publier le et la partie dynamique qui, elle, vient de la base de données. Donc celui-là, par contre, je vais l'enlever. Je vais garder le groupe parce que je vais mettre un élément à l'intérieur qui est intéressant, qui est la navigation. Je vais ajouter après. Ce n'est pas navigation. C'est article suivant, article précédent. On va faire article précédent. Donc là, tu peux changer le texte. Précédent, article précédent. Donc là, il y a des options. On peut afficher le titre sous la forme. Donc là, il me met article précédent de point. Donc là, je vais mettre. Il faut l'éditer directement. Il faut cliquer dedans. Et puis l'article suivant après. Et puis là, pareil, je mets le titre. Alors tu as des petites options. Tu peux mettre une flèche. Tu peux mettre des chauverons. Là, je vais mettre ici. Tu as la flèche. Je vais en mettre sur les deux. Et puis si tu veux les mettre de chaque côté, on va utiliser la même logique, l'arranger et on peut la centrer ou la faire déborder. Alors c'est ici. Je la centre. Alors si je voulais la faire déborder de chaque côté, je vais te montrer quelque chose qui peut être intéressant là dans ce cadre-là. On va sortir celui-ci et je vais lui donner une largeur particulière. C'est-à-dire que le groupe, il est boxé. Et je vais lui donner. Donc si je me mets ici, je veux dire qu'il est à 900 pixels. Là, on va laisser tel quel. C'était 650. Et ici, je vais mettre 900 pixels pour la version large. Et donc si je reprend l'élément interne, je peux faire un débordement. Et alors ce qui est bien, c'est que je peux décréter ce contenu, il est boxé. Mais que ma version large, elle est plus à 1050. On va peut-être faire 1100 pour que tu puisses voir la différence. Mais elle est à 900. Donc on peut faire un débordement qui serait juste pour cette partie-là. Donc là, j'enregistre. Ici, je recharge. Alors il me fait pas de navigation parce que j'ai qu'un article au point. Donc je vais juste recréer un article vite fait. Enfin, il faudrait que je mette une image pour te montrer. Je vais éditer celui-ci. Donc toi, la grande largeur, elle a 1100. Je lui ai demandé d'avoir une autre largeur. Donc là, je suis à 900, un débordement qui est différent. Et là, ici, je suis à 1100 qui est le réglage global sur tous les éléments. Voilà. On pourra ajouter d'autres éléments. On peut mettre l'auteur. On peut mettre... Donc là, c'est que sur la single. Si je repars ici, tu vois que j'ai pas la date. Ça, c'est un modèle d'archier. Mais quand je clique, là, j'ai vraiment l'élément. Je aurais pu très bien dire que je mets l'image à la une avant. On repartira sur la single la prochaine fois pour les articles, pour ajouter plus d'éléments. Je voulais qu'on se concentre un peu sur les questions. Alors les questions que j'ai eu la dernière fois qui m'ont été envoyées dans les formuleurs, Max me demande si au niveau du DOM, ça n'alourdit pas trop de grouper un texte unique. Bon, ça ajoute une balise, mais on n'est pas non plus dans les constructeurs de pages. Tiper les mentors ou autres qui ajoutent des groupes dans des groupes dans des groupes dans des groupes. Donc ça reste très correct. Est-ce que c'est nécessaire d'utiliser un thème enfant ? Moi, je considère pour l'instant qu'on peut partir directement, et c'est sans doute mieux comme ça. Ça va vous demander un peu plus de temps, mais vous créez votre thème 2.0 avec créez de bloc thème. Vous familiarisez petit à petit, vous ajoutez votre style. Et comme là, finement dans nos modèles, on va voir qu'on ajoute globalement que des blocs qui sont natifs. Il n'y aura pas de problème au niveau des mises à jour, parce que les blocs vont se mettre à jour automatiquement, et du coup vous n'aurez pas de conflit au niveau de ce que vous avez utilisé dans vos modèles. Plus vous restez proche du cœur de WordPress, c'est moins vous aurez de soucis. Pourquoi on utilisait à un moment les thèmes enfants ? Parce qu'il y avait des modèles qui étaient mises à jour et qui permettaient de s'accorder à l'évolution de WordPress. Mais là, comme finement, nos modèles, c'est globalement que des blocs qu'on assemble. Donc ça n'a pas tellement de sens de faire des thèmes enfants puisque ce sont les blocs qui vont se mettre à jour et non pas le thème. Serge, on me posait la question sur les templates et template parts. J'espère que j'ai répondu tout à l'heure. Donc ça, c'est des éléments qui sont mutualisés à les éléments de modèles. On reviendra dessus parce que je voulais qu'on ait... On n'a pas eu le temps de faire ça, mais je voulais qu'on fasse un modèle personnalisé. Mais on reprendra cette partie la prochaine fois. Oui, pourquoi il y a des problèmes de rendu ? Alors, ça, normalement, si on applique, je vous ai mis le lien, je le remettrai dans la page très haut dans ce qui permettait de télécharger les visuels. On a ce petit code qui n'est pas grand chose à mettre. Ça faut vraiment ajouter un fichier qui s'appelle fonction.php dans votre thème qui, lui, est pas natif quand on utilise Create Block Thème. Il faut l'ajouter manuellement. Et ce fichier vous permet d'ajouter des fonctions sur mesure, et notamment celle-ci qui va synchroniser le CSS entre le back-office et le front-office. Vous pouvez faire un copier collé tel quel et les deux vont synchroniser. Et avec le FSE, on a très peu de décalage. Pourquoi ? Parce qu'il y a une routine au niveau du FSE qui va générer des classes automatiquement. Ça veut dire quoi ? Ça veut dire qu'on va appliquer un style sur le front-office, donc sur l'aspect du thème. Et automatiquement, la classe va s'appliquer également au back-office. Il n'y aura quasiment aucun décalage. Vraiment, c'est à peine visible. Je suis vraiment très content de cette partie-là parce que avant, on est obligé de faire deux feuilles de style à part. Les classes n'étaient pas les mêmes, et ça donnait beaucoup de boulot. Maintenant, comme dynamiquement la classe est générée, ça se fait quasiment à la vouloir. Ensuite, l'autre question, c'était... Alors oui, on me demandait le style guide qui parfois disparaît. Alors ça, je n'ai jamais eu ça. Je vais rafficher mon écran. Le style guide, c'est ça. Si je suis dans l'éditeur, on l'a vu la dernière fois. Il faut vraiment être dans l'éditeur. On est dans l'onglet style, et c'est le petit oeil. Je n'ai jamais eu ce bug parce que ça affiche quand tu fais tout tes réglages au niveau de la police, des couleurs. Tu l'as en direct. Par exemple, si là, j'ai le titre. Là, j'ai le titre, le titre 1. Tu vois que si tu changes en fait, tu sais que tous les titres 1 vont être affichés comme ça dans ton site. Tu le fais en direct. Quand on modifie un thème FSE, ce qui est important à retenir, on va faire des choses dans le back office, notamment ici. Ça, c'est sur la single poste. Qu'est-ce que j'ai fait ? J'ai ajouté par l'auteur, donc un contenu statique et puis un bloc de thème qui s'appelle auteur. Attention, par défaut, il affiche l'avatar. Ça, il faut le décocher. Je vais faire un autre par publié. J'ai oublié par écrit. On va faire écrit par. Là, je fais une modification du modèle. Là, j'enregistre. Là, si je fais gérer tous les modèles, là, il a été personnalisé. Donc, à tout moment, quand je fais un test, je peux très bien me dire, tiens, je peux effacer les personnalisations. Ça veut dire quoi ? C'est que j'ai modifié un modèle, mais si j'efface les personnalisations, la référence, ça va toujours être ce que j'ai dans mon code. Donc, du coup, ça me permet de valider au fur et à mesure ce que je fais. Et si je considère que le modèle est correct, dans ce cas-là, je valide et ça va être vraiment enregistré dans mon thème. Là, tu vois, je ne peux pas le supprimer. Je vais faire un modèle pour une page spécifique, juste pour te montrer. Donc là, c'est, on va prendre ce modèle-là, je vais enregistrer. Donc là, si je reprends ici, j'assuprimerai après. C'est pas grave. Et bien là, j'ai fait un modèle dans mon back office et il n'est pas enregistré dans mon thème. C'est-à-dire, je peux le supprimer. Donc là, ce qui est important, c'est quand tu vois que le modèle fonctionne, tu l'orgistres en dur dans ton thème. Donc pour faire ça, tu cliques sur n'importe quel modèle et tu fais ici enregistrer les modifications. Donc là, j'enregistre. Et si je repars, donc, d'enregistrer tous les modèles, tu vois qu'il a été enregistré et je ne peux pas le supprimer. Là, l'élément que j'ai, si je le modifie, je le reprends pour te montrer toutes les étapes. Donc là, si je repars dans le code, il a bien été ajouté cette fois-ci. Et si je l'édite juste pour celui-là, tu vois, c'est pour la simple page. Donc là, je vais mettre pour modèle pour ma page spéciale. Ça, ça va s'appliquer juste ici. Donc là, je vais repartir pour te montrer. Donc là, c'est ma page spéciale. C'est un modèle que pour cette page. Tu vois qu'il est possible de faire un modèle que pour une page. On verra que c'est plus intéressant de faire un modèle de page qui est mutualisé. Et si je repars dans mes modèles, et bien tu vois que là, il est personnalisé. C'est-à-dire que pareil, le fichier du modèle, il est enregistré dans mon thème, mais j'ai ajouté quelque chose de différent dans le back-office. Donc là, tu peux valider de la même manière. Tu peux dire, non, moi, j'efface les personnalisations. Je n'ai pas envie d'avoir ce truc-là, ma page spéciale juste en bas. Donc là, j'efface ou alors, je clique sur le modèle et je fais enregistrer, ça le valide de mon thème. Mais là, je veux dire non, moi ça, ça ne m'intéresse pas. C'est juste un test. Regarde si je recharge. Il va toujours prendre la référence qui est enregistrée dans ton thème. Donc ça, c'est important de garder cette logique, de valider au fur et à mesure ce que tu fais avec CreateBlockThème. Si tu as déjà fait du versioning avec Git, c'est exactement la même logique. C'est-à-dire que tu peux créer des modèles directement de back-office. À un moment, il faut les valider dans ton thème. Tu peux modifier ces modèles tant que tu veux. Tu vois si ça marche, si ça marche, tu les valides. On s'arrête là pour ce soir. Pour la prochaine fois, on va se concentrer sur les archives, les modèles d'archives. Un bloc qui est essentiel, qui s'appelle QueryBlock, qui permet de faire des boucles sur mesure. Alors pour te donner une idée quand même, moi, ça fait plus de 10 ans, j'enseigne WordPress. Pour les boucles sur mesure, on a utilisé un objet PHP qui s'appelle WP Query. Pour cette partie-là, on passait facile une journée. Maintenant, sans coder, on a accès à tout. Évidemment, tu n'as pas autant de souplesse que l'objet WP Query, mais dans 90% des cas, ça sera suffisant. On fera un modèle, on reprendra la logique des modèles pour faire un modèle sur mesure d'abord sans lentette et sans le footer. Et on accélérera un petit peu. J'aimerais bien te montrer un modèle où on peut faire plusieurs requêtes dans la même page. Pour faire, typiquement, une page d'accueil où tu appellerais des articles d'une catégorie, des articles d'une autre catégorie. Donc ça pourrait être un peu ça dans l'approche. Tu es resté jusqu'à la fin. Un grand merci à toi pour ta présence. N'oublie pas de noter notre prochain live prévu en novembre. Nous continuerons à explorer les modèles. Cette fois, nous verrons comment créer des pages d'archives et une page d'accueil sur mesure avec plusieurs boucles. Je te dis à très vite et n'hésite pas à t'abonner ou à mettre un pouce pour m'encourager à continuer.