La modification complète du site vous permet de créer chaque aspect de votre site WordPress, de l’en-tête au pied de page, en utilisant diverses fonctionnalités de blocs directement depuis l’Éditeur de site.
L’Éditeur de site vous permet de modifier les modèles, les composants de modèle et de personnaliser le style général de votre site. Avant l’Éditeur de site, la conception des principaux éléments du site (comme l’en-tête, la barre latérale et le pied de page) était définie par votre thème. Avec l’Éditeur de site, vous pouvez définir vous-même la structure et le style de votre site. En plus de servir à créer le contenu des pages et des articles, l’Éditeur de site vous permet de créer l’apparence générale de votre site à l’aide de modèles.
L’Éditeur de modèles vous permet de modifier, de créer et d’attribuer des modèles à chaque article et à chaque page, et de concevoir des modèles personnalisés pour vos articles et vos pages à l’aide de l’éditeur de blocs WordPress habituel.
Objectif
À l’issue de cette formation, les participants seront capables de :
- Distinguer les fonctions de l’Éditeur de site et de l’Éditeur de modèles.
- Gérer les modèles, les composants de modèle et les réglages de style globaux via l’Éditeur de site.
- Modifier, créer et attribuer des modèles à chaque article et à chaque page via l’Éditeur de modèles.
Compétences requises
Les participants tireront le meilleur parti de cette formation s’ils sont familiarisés avec :
Questions liées aux compétences
- Pouvez-vous expliquer la fonction des modèles ?
- Êtes-vous familiarisé avec la manière d’attribuer un modèle à un article ou à une page ?
Ressources nécessaires
- Installation de WordPress sur un réseau local
- Un thème de blocs, tel que Twenty Twenty-Two
Remarque à l’intention des présentateurs
- Il vous sera très utile de créer un site local avant de commencer cette formation.
- Introduction à l’Éditeur de site et à l’Éditeur de modèles
- Modèles
- Composants de modèle
Plan de la formation
- Présenter un aperçu de la mise en page et des fonctions de l’Éditeur de site : modèles, composants de modèle et réglages de style.
- Montrer comment utiliser les réglages de style pour modifier le style général de votre site.
- Expliquer comment les modèles sont des ensembles de blocs combinés pour créer la conception d’une page web ou la mise en page générale d’une page.
- Distinguer les parties dynamiques (contenu) des parties réutilisables (composants statiques) d’un modèle.
- Démontrer comment modifier des composants de modèle existants et en créer de nouveaux.
- Démontrer comment utiliser l’Éditeur de modèles pour modifier, créer et attribuer des modèles à chaque article et à chaque page.
Exercices
- Utilisez les réglages de style pour modifier la police, la couleur d’arrière-plan et la couleur du texte de votre site.
- Modifiez un modèle existant et changez les composants de modèle de l’en-tête et du pied de page.
- Créez un modèle personnalisé et utilisez-le sur une page.
Évaluation
L’Éditeur de site donne accès aux fonctionnalités suivantes. Sélectionnez toutes les réponses appropriées.
- Modèles
- Composants de modèle
- Modification des pages ou du contenu des articles
- Réglages de style globaux
Réponse : 1. Modèles, 2. Composants de modèle, 4. Réglages de style globaux
L’Éditeur de modèles vous permet de…
- construire l’intégralité de votre site avec des blocs.
- modifier, créer et attribuer des modèles à chaque article et à chaque page.
Réponse : 2. modifier, créer et attribuer des modèles à chaque article et à chaque page.
Lors de la gestion des modèles, le contenu est affiché via le bloc Contenu de l’article.
- Vrai
- Faux
Réponse : 1. Vrai
Lorsque vous créez un modèle…
- vous en tirez le meilleur parti lorsque vous ne séparez pas les parties réutilisables des parties dynamiques.
- vous en tirez le meilleur parti lorsque vous séparez les parties réutilisables des parties dynamiques.
Réponse : 2. vous en tirez le meilleur parti lorsque vous séparez les parties réutilisables des parties dynamiques.
Références supplémentaires
- Éditeur de site
- Éditeur de modèles
- Manuel de l’Éditeur de blocs : modèles de modification complète du site
- Manuel de l’Éditeur de blocs : hiérarchie des modèles
- Manuel du développeur de thèmes : modèles et composants de modèle
Exemple de formation
Aujourd’hui, nous allons approfondir l’Éditeur de site et l’Éditeur de modèles. Si vous avez installé un thème de blocs, tel que Twenty Twenty-Two, et que vous êtes prêt à commencer votre parcours dans la modification complète du site, vous constaterez que l’outil de personnalisation a disparu. Cependant, lorsque vous accéderez à Apparence, vous verrez une nouvelle option : Éditeur. Et lorsque vous cliquerez sur Éditeur, vous serez redirigé vers l’Éditeur de site.
Ici, vous pouvez modifier les modèles, les composants de modèle et personnaliser le style de l’ensemble de votre site. L’Éditeur de site fournit une vue de la liste des modèles, comme vous le verrez à gauche, qui permet aux utilisateurs d’explorer la section Site, c’est-à-dire le modèle de la page d’accueil, les modèles et tous les autres composants de modèle. Il s’agit d’une partie essentielle de l’ensemble des fonctionnalités de l’Éditeur de site ; vous pourrez essentiellement modifier la conception globale de votre site. Pour changer ce que vous voyez, cliquez sur l’icône WordPress ou sur l’icône de votre site en haut à gauche. Vous pourrez ensuite choisir entre retourner au tableau de bord, accéder au site (qui correspond à votre modèle de page d’accueil, comme indiqué précédemment), consulter la liste des modèles ou consulter la liste des composants de modèle.
Lorsque vous cliquez sur l’icône Styles, vous pouvez modifier la typographie et les couleurs générales de votre site. Et si vous descendez davantage, vous trouverez également des options pour personnaliser l’apparence de blocs spécifiques dans l’ensemble de votre site. À noter que les réglages de style seront disponibles quelle que soit le modèle ou le composant de modèle que vous êtes en train de modifier. Si vous cliquez sur Typographie, vous pourrez gérer les réglages typographiques du texte et des liens. Vous pouvez modifier la couleur d’arrière-plan de votre site ou la couleur du texte et des liens en un seul clic. En haut à droite, vous verrez le texte « définir une couleur d’arrière-plan ou un dégradé pour l’ensemble du site web. »
Si vous cliquez sur les trois points verticaux en haut à droite, vous pouvez modifier certaines préférences dans les réglages de l’éditeur :
- Mode projecteur : met en évidence le bloc sélectionné et estompe le reste du contenu.
- Afficher les libellés des boutons : affiche du texte au lieu d’icônes sur les boutons.
- Toujours ouvrir la vue en liste : ouvre par défaut la barre latérale de la vue en liste des blocs.
Comment gérer les modèles via l’Éditeur de site ? Cliquez sur l’icône WordPress en haut à gauche et ouvrez les modèles. Les modèles sont des ensembles de blocs combinés pour créer la conception d’une page web. Ouvrons le modèle Page. On peut dire qu’un modèle correspond à la mise en page complète d’une page. Cela inclut des éléments tels que la zone d’en-tête, le contenu et le pied de page. Cliquez sur Vue en liste. En haut, vous verrez l’en-tête et, en bas de la page, votre pied de page ; au centre se trouve votre bloc Contenu de l’article. Lorsque vous créez un modèle, vous en tirez le meilleur parti en séparant les parties réutilisables des parties dynamiques. La partie dynamique correspond au contenu qui changera sur chaque page utilisant ce modèle. La partie réutilisable est la partie statique du modèle qui restera identique. Les modèles ne servent pas à publier du contenu. Le modèle d’un article ou d’une page affiche votre contenu avec le bloc Contenu de l’article. Comme son nom l’indique, un modèle est une conception qui peut être utilisée par une ou plusieurs pages et un ou plusieurs articles.
Lorsque vous commencez à créer un nouveau site web, vous pouvez modifier les modèles existants ou en ajouter de nouveaux. Vous pouvez également créer des modèles personnalisés. N’oubliez pas d’attribuer chaque page ou chaque article à un modèle à l’aide de l’Éditeur de modèles.
Ensuite, parlons davantage de la gestion des composants de modèle. À titre d’information complémentaire, les composants de modèle sont particulièrement adaptés à la création de zones telles que votre en-tête, votre pied de page et votre barre latérale.
Lorsque nous ouvrons les composants de modèle, nous voyons les composants de modèle que nous avons créés nous-mêmes ainsi que ceux fournis par le thème que nous utilisons. Les quatre composants de modèle situés en bas de la liste sont donc ceux fournis par le thème Twenty Twenty-Two. Et si vous voyez un point au-dessus de l’icône d’un composant de modèle, vous saurez que ce modèle a été modifié. Le modèle de page situé plus haut est un composant de modèle que j’ai créé moi-même.
Enfin, vous pouvez décider d’ajouter un nouveau composant de modèle. Lorsque vous ajoutez un nouveau composant de modèle, vous avez le choix entre un composant de modèle général, un en-tête et un pied de page. Un composant de modèle général n’est pas lié à une zone particulière. N’oubliez pas de donner à votre composant de modèle un nom descriptif.
Voyons comment ajouter un bloc Composant de modèle. Je vais ouvrir mon modèle 404, qui s’affiche lorsqu’aucun contenu n’est trouvé. Comme vous pouvez le voir, il n’y a actuellement aucun en-tête. Ouvrons donc la Vue en liste. Au-dessus du bloc Groupe, je vais insérer mon bloc Composant de modèle. Après avoir sélectionné le bloc Composant de modèle, vous pouvez choisir un bloc Composant de modèle existant ou en créer un nouveau. Choisissons celui qui existe déjà et que j’ai créé.
Parlons maintenant de l’Éditeur de modèles. L’Éditeur de modèles vous permet de modifier, de créer et d’attribuer des modèles à chaque article et à chaque page. Voyons comment cela fonctionne en le mettant en pratique. Cliquez sur l’icône WordPress en haut à gauche et retournez au tableau de bord. Cliquez sur Pages et ouvrez l’une des pages existantes. Dans la barre latérale des réglages à droite, vous verrez que le modèle attribué à cette page est le modèle par défaut, c’est-à-dire votre modèle de page. Vous pouvez également attribuer l’un des autres modèles disponibles. Lorsque vous êtes prêt, vous pouvez modifier le modèle de votre choix.
Lorsque vous cliquez sur Modifier, vous accédez au mode de modification des modèles. Vous saurez que vous êtes dans ce mode lorsque le nom du modèle apparaît dans la barre supérieure. De plus, un cadre de couleur sombre apparaît autour du modèle pendant que vous le modifiez. Mais vous disposez également d’une troisième possibilité : créer un nouveau modèle personnalisé. L’invite « décrivez l’utilisation du modèle, par exemple pleine largeur » apparaîtra, et le modèle personnalisé pourra être appliqué à n’importe quel article ou page. Vous pouvez décider de créer un modèle personnalisé pour une page d’atterrissage, ou peut-être pour une page de portfolio.
Après avoir cliqué sur Créer, vous constaterez que l’en-tête est différent et qu’il n’y a pas de pied de page. Vous disposez donc d’une toile vierge pour créer votre propre modèle personnalisé. Pour rappel, le mode de modification des modèles permet de basculer entre la modification du contenu de chaque article ou page et celle du modèle utilisé par cet article ou cette page.
Nous pensons que vous comprenez maintenant mieux comment utiliser l’Éditeur de site et l’Éditeur de modèles.
Conclusion de la formation