Décoder WordPress : Templates personnalisés et parties de template

Avec l’introduction de WordPress 5.9, tu peux maintenant utiliser l’Édition Complète du Site pour personnaliser l’apparence de ton thème. De plus, tu peux accéder à plus de fonctionnalités de design pour construire ton site web sans coder en utilisant un thème basé sur des blocs. Cependant, ces paramètres de base pourraient ne pas répondre à tes besoins.

Heureusement, tu peux facilement ajouter des modèles personnalisés et des parties de modèle à ton thème de blocs WordPress. Que ce soit en utilisant l’Édition Complète de Site ou en modifiant ton fichier de thème, tu peux créer un agencement personnalisé à réutiliser lors de la conception de nouveaux contenus.

Dans cet article, nous allons discuter de ce que sont les modèles et les parties de modèles. Ensuite, nous te montrerons comment les créer dans WordPress. Commençons !

Une Introduction Aux Modèles De Pages WordPress

Les thèmes sont l’une des fonctionnalités les plus polyvalentes de WordPress. En installant un thème sur ton site, tu peux radicalement modifier son apparence pour répondre à tes besoins. De plus, il est généralement facile de trouver des thèmes qui correspondent à ton créneau particulier et offrent beaucoup de flexibilité pendant le processus de conception.

Cependant, il y a quelques choses qui sont difficiles à réaliser si tu utilises uniquement un thème pour personnaliser l’apparence de ton site. Par exemple, que faire si tu veux que tes archives aient une mise en page très différente du reste de tes pages ? De même, tu pourrais vouloir que la barre latérale contienne des informations différentes selon les types de pages.

Entrez les modèles de page — un moyen d’obtenir plus de contrôle sur l’apparence de ton site. À certains égards, les modèles de page sont très similaires aux thèmes. Les deux sont des fichiers avec du code qui indiquent à ton site comment afficher les informations.

Comme le suggère le nom, cependant, un modèle de page contrôle uniquement le style d’une page particulière (ou type de page). De nombreux thèmes proposent différents modèles de page parmi lesquels choisir, mais tu peux également créer le tien. Ainsi, tu peux décider exactement comment il doit être configuré et quelles pages doivent être assignées pour suivre ce modèle.

Comprendre et utiliser les templates est un peu plus technique que de gérer des thèmes. Si tu veux vraiment comprendre le fonctionnement des templates, tu pourrais passer du temps à lire sur la Hiérarchie des Templates WordPress. Ce système attribue un niveau de priorité à chaque type de template afin que ton site WordPress sache toujours lequel afficher.

Nous n’entrerons pas trop dans les détails à propos de ce concept pour le moment car nous allons d’abord nous concentrer spécifiquement sur les modèles de pages. Commençons par explorer pourquoi tu pourrais vouloir utiliser des modèles en premier lieu.

Les Avantages D’Utiliser Des Modèles De Page

À ce stade, tu devrais avoir une idée de pourquoi les modèles de pages sont si utiles. Ils offrent beaucoup plus de contrôle sur l’apparence et la disposition de ton site que ce que tu peux généralement obtenir en modifiant ton thème. Les applications pour les modèles de pages sont nombreuses — la seule limite est ta propre créativité.

Pour te donner une idée de l’importance de cette fonctionnalité, voici quelques exemples de situations dans lesquelles tu pourrais vouloir utiliser un modèle de page :

• Si tu veux qu’une page particulière ait une mise en page en pleine largeur tout en conservant un design à largeur fixe pour les autres pages.
• Pour créer une page personnalisée qui utilise des widgets non affichés sur les autres pages.
• Pour afficher des articles recommandés aux lecteurs qui sont pertinents pour le contenu spécifique qu’ils consultent.
• Pour construire une page avec un ensemble unique de fonctionnalités, tel qu’une page de contributeur ou des archives.

À la fin de cet article, nous allons te montrer comment faire chacune de ces choses. Une fois que tu auras commencé à expérimenter avec les modèles de page et à comprendre comment ils fonctionnent, tu pourras faire tout ce que tu veux avec.

Une Introduction À L’Édition Complète Du Site Avec Des Modèles Et Des Parties De Modèles

En utilisant l’Édition Complète du Site, tu peux concevoir la disposition de ton site web avec des blocs. Tu utilises probablement déjà des blocs pour créer des articles WordPress. Maintenant, ils peuvent construire ton site entier, y compris les zones non liées au contenu.

Un avantage de l’édition complète de site est ses modèles de page. Ils te permettent de voir et de personnaliser facilement tes modèles sans avoir à éditer manuellement tes fichiers de thème :

Dans WordPress, il y a aussi des parties de modèle, qui fonctionnent comme des sections structurelles plus petites d’un modèle de page. Tu verras généralement des parties de modèle pour les en-têtes ou les pieds de page :

En utilisant un modèle, tu peux construire des pages avec des fonctionnalités uniques. Par exemple, tu pourrais ne pas vouloir que ta page d’accueil ait la même disposition que le reste de ton contenu. Par conséquent, tu peux obtenir un design unique avec un modèle de page.

De plus, tu peux gagner du temps pendant le processus de conception en réutilisant des modèles et des parties de modèles. En cliquant simplement sur un modèle ou un élément individuel, tu peux l’implémenter instantanément.

Comment Créer Des Modèles Dans WordPress Avec L’Éditeur De Modèles

Si tu utilises un thème par blocs, il est équipé de l’Éditeur de Modèles. En utilisant cette fonctionnalité, tu peux créer et modifier des modèles pour n’importe quelle page ou publication sur ton site web. Il fonctionne de manière similaire à l’Éditeur de Blocs, te permettant de personnaliser ton thème avec des blocs.

Pour commencer, tu devras installer un thème par blocs. Dans ton tableau de bord WordPress, navigue vers Apparence > Thèmes > Ajouter nouveau. Ensuite, filtre les résultats avec une étiquette Édition complète du site:

Sélectionne Appliquer les filtres. Dans les résultats de recherche, installe et active un thème. Nous utiliserons le thème par défaut Twenty Twenty-Two pour ce tutoriel :

Pour créer un nouveau modèle, commence par ajouter un nouvel article ou une nouvelle page. Ensuite, dans l’onglet des paramètres de Post, trouve la section Template et sélectionne le bouton New :

Dans la fenêtre pop-up, donne ton nouveau modèle un nom. Ensuite, sélectionne Créer :

Cela ouvrira automatiquement l’éditeur de modèles. Tu peux concevoir ton modèle en utilisant les mêmes blocs que tu utiliserais dans un article. Cependant, il est important de noter que ces blocs seront ajoutés à chaque article avec ce modèle :

Tu peux aussi insérer des blocs liés à ton thème. En faisant défiler vers le bas jusqu’à la section Theme des options de bloc, tu peux afficher un logo, une accroche, les commentaires des articles, et plus encore :

Lorsque tu auras fini de personnaliser ton modèle, clique sur Publier. Ensuite, chaque fois que tu souhaiteras attribuer un article ou une page à ce modèle, sélectionne-le simplement dans l’onglet des paramètres.

Comment Créer des Parties de Modèle dans WordPress avec l’Éditeur de Site

Avec un thème par blocs, tu peux modifier les modèles avec l’éditeur de site. Tu peux éditer ton thème directement au lieu de créer un nouveau post ou une nouvelle page.

D’abord, va à ton tableau de bord. Ensuite, sélectionne Apparence > Éditeur (bêta):

Cela ouvrira l’éditeur de site. Pour trouver les modèles et les parties de modèle de ton thème, clique sur l’icône WordPress dans le coin supérieur gauche :

Après avoir sélectionné Template Parts, tu verras une liste d’options par défaut. Pour ajouter une nouvelle partie de modèle, clique sur le bouton Add New :

Ensuite, crée un nom pour ta partie de modèle et choisis où la placer. Les trois zones de placement sont Général, En-tête et Pied de page:

Quand tu as terminé, sélectionne Créer. Cela te mènera à la partie de modèle isolée, que tu peux personnaliser en ajoutant des blocs :

Tu pourrais afficher un appel à l’action simple, le logo du site web, ou tout ce que tu pourrais vouloir réutiliser comme partie de modèle. Une fois enregistré, tu peux l’ajouter à n’importe quel modèle en insérant simplement le bloc Template Part.

Comment Créer Des Modèles Personnalisés Et Des Parties de Modèle Dans WordPress (Codage Manuel)

Bien que l’édition complète de site te permette de créer des modèles et des parties de modèle pour un thème existant, tu pourrais vouloir développer ton thème. De plus, cette option peut te donner plus de contrôle sur l’apparence de ton site web.

Si tu construis ton nouveau thème à partir d’un existant, nous recommandons de créer un thème enfant. Cette étape garantit que les nouvelles mises à jour du thème parent ne remplaceront pas tes personnalisations.

Étape 1 : Ajouter Un Fichier De Configuration

Avec les thèmes basés sur PHP précédents, tu pouvais modifier l’en-tête de ton fichier de modèle. Cependant, pour créer du contenu personnalisé dans un thème basé sur des blocs, tu devras créer un nouveau fichier theme.json.

Tu devras d’abord accéder à ton site via Secure File Transfer Protocol (SFTP) ou le tableau de bord du gestionnaire de site de ton fournisseur d’hébergement. Ensuite, cherche le dossier themes, qui devrait se trouver sous wp-content :

Dans ton dossier de thème enfant, crée un nouveau fichier. Nomme-le « theme.json » :

Dans ce fichier, inclue le numéro de version entre accolades. Si tu ne l’ajoutes pas, il sera lu comme « version 0 » :

{
    "version": 2
}

Tu devras configurer ce fichier theme.json pour supporter la largeur de ton contenu. Après ton numéro de version, copie et colle ce code supplémentaire :

{
        "version": 2,
"settings": {
"layout": {
"contentSize": "840px",
"wideSize": "1100px"
 }
 }
}

Cela définira la largeur de ton contenu à 840px. La largeur large sera également mise à jour à 1100px. Ces valeurs correspondent aux largeurs par défaut dans l’éditeur de site, mais tu peux les modifier selon tes besoins.

Étant donné que la largeur du contenu est maintenant de 840px, cela fournira beaucoup d’espace pour chaque ligne de caractères. Selon la police et la taille que tu as choisies, tu pourrais avoir besoin de l’ajuster pour que les spectateurs puissent confortablement lire ton contenu.

Étape 2 : Créer De Nouvelles Parties De Modèle

Ensuite, retourne à ton dossier themes et ouvre le dossier templates :

Ici, crée un fichier index.html :

Retourne dans ton dossier de thème et clique sur template-parts. Dans ce dossier, crée des fichiers pour footer.html et header.html :

À l’intérieur du fichier header.html, ajoute les codes pour les blocs du titre de ton site et de la ligne de tag. Tu peux le faire en incluant ce marquage de bloc:

<!-- wp:site-title /-->
<!-- wp:site-tagline /-->

Ensuite, va dans le fichier footer.html et colle le code suivant :

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Fièrement propulsé par 
<a href="https://wordpress.org/">WordPress</a>.</p>
<!-- /wp:paragraph /—->

Une fois que tu ajoutes ces parties de modèle, elles peuvent facilement être identifiées lorsque tu es prêt à tester ton thème.

Étape 3 : Combinez Les Parties Du Modèle

La prochaine étape consiste à placer le balisage de bloc pour les parties de ton modèle dans ton fichier HTML de modèle. Ouvre le dossier templates et trouve le fichier index.html que tu as créé lors de la dernière étape.

Ensuite, tu devras ajouter du code pour tes deux parties de modèle :

<!-- wp:template-part {"slug":"header"} /-->
<!-- wp:template-part {"slug":"footer"} /—->

Sur la base du nom du fichier de partie de modèle, ce nom deviendra le slug. Par exemple, la partie de modèle header.html aura « header » comme slug.

Ensuite, ajoute le bon élément HTML pour chaque partie du modèle. Ils identifieront l’emplacement de la partie du modèle :

"tagName":"en-tête"
"tagName":"pied de page"

Si tu prévois d’utiliser CSS pour identifier cet en-tête et ce pied de page, tu devras ajouter un nom de classe CSS personnalisé. Tu peux placer ce code à la fin de chaque ligne :

"className":"en-tête-du-site"
"className":"pied-de-page-du-site"

Enfin, le paramètre de mise en page que tu as inséré dans le fichier theme.json doit être pris en charge. Pour ce faire, ajoute ce code à chaque partie du modèle :

"layout":{"inherit":true}

Voici à quoi devrait ressembler le code résultant :

Une fois que tu as terminé de coder, tu peux prévisualiser ton site pour voir ces modifications dans ta mise en page.

Prêt À Créer Tes Propres Modèles Personnalisés ?

Si tu veux simplifier ton processus de conception de site web, c’est une bonne idée d’utiliser l’édition complète du site. Tu peux facilement personnaliser l’apparence de ton site avec des modèles et des parties de modèles en utilisant cette fonctionnalité. Cette approche peut être une alternative plus simple que de redessiner complètement chaque page à partir de zéro.

Pour récapituler, voici les différentes manières de créer des templates et des parties de templates dans WordPress :

1. Crée un nouveau modèle avec l’éditeur de modèles.
2. Crée des parties de modèle avec l’éditeur de site.
3. Code manuellement des modèles et des parties de modèle.

Coder ton propre thème peut être délicat, surtout si tu n’as pas d’expérience en développement web. Si tu as besoin de personnaliser ta mise en page à partir de zéro, tu pourrais envisager d’engager un designer professionnel. Avec notre Service professionnel de conception web sur mesure, tu peux éviter ce processus de codage compliqué et obtenir un site web de haute qualité conçu pour ta marque !