Transcription
Introduction
Explorons l’éditeur du site, qui vous permet de concevoir l’ensemble de votre site à l’aide de blocs, de l’en-tête au pied de page et tout ce qui se trouve entre les deux. Rendez-vous dans Apparence, puis cliquez sur Éditeur. Cela ouvrira l’éditeur du site. À gauche se trouve la barre latérale d’affichage du site. Cet outil pratique vous permet d’explorer les éléments clés de votre site, notamment la navigation, les styles, les pages, les modèles et les compositions. Ce tutoriel vise à vous permettre de bien comprendre ces éléments.
Navigation
Commençons par la navigation, en haut de la page. Ici, vous pouvez rapidement voir et modifier tous vos menus. C’est votre centre de contrôle pour la gestion des menus. Vous pouvez effectuer des modifications simples directement, comme réorganiser les éléments. Lorsque vous cliquez sur les trois points verticaux à côté du nom de l’élément de menu, vous pouvez le renommer, le dupliquer et le supprimer selon vos besoins. S’il est ouvert en mode édition, vous pouvez effectuer certaines modifications sans distraction. Les mises à jour seront synchronisées sur l’ensemble de votre site. Vous pouvez ajouter de nouvelles pages ou d’autres éléments de menu en cliquant sur l’icône plus. Vous remarquerez que le bloc Navigation est verrouillé dans cette zone. Si vous souhaitez modifier le style de votre menu de navigation, vous devez ouvrir un modèle ou la partie de modèle dont il fait partie.
Styles
Parlons maintenant des styles. Lorsque vous sélectionnez Styles, vous pouvez parcourir différentes combinaisons de styles fournies avec votre thème. Lorsque vous cliquez sur Modifier les styles, vous pouvez parcourir vos styles depuis cet emplacement, puis modifier la typographie, les couleurs et la mise en page de votre site. Voyons comment cela fonctionne. Lorsque vous cliquez sur Typographie, vous pouvez gérer les réglages typographiques du texte, des liens, des titres, des légendes et des boutons. Une nouvelle fonctionnalité formidable est que vous avez désormais également accès à une bibliothèque de polices. Sous Polices, nous voyons les polices ajoutées à notre thème. Mais lorsque nous cliquons sur Gérer les polices, nous pouvons installer, supprimer et activer des polices locales et Google sur l’ensemble de votre site avec n’importe quel thème utilisant des blocs. Lorsque vous cliquez sur Installer des polices, vous pouvez installer n’importe quelle police Google sur votre site web et cliquer sur Téléverser si vous souhaitez importer une police depuis votre ordinateur. Assurez-vous d’avoir le droit d’utiliser les polices que vous importez. Sous Typographie, nous trouvons les couleurs. Ici, vous pouvez également modifier les couleurs des différents éléments globaux de votre site. Lorsque nous passons à Mise en page, nous constatons que vous pouvez même contrôler des éléments tels que les marges internes et l’espacement entre les blocs.
Livre des styles
Plus bas, vous pouvez personnaliser l’apparence de blocs spécifiques pour l’ensemble de votre site. Pour voir comment ces blocs changeront si vous les modifiez, accédez au Livre des styles de votre site. Vous remarquerez la présence d’une petite icône en forme d’œil en haut. Le Livre des styles permet à l’utilisateur de prévisualiser chaque bloc pouvant être inséré dans votre site. Il vous donne un aperçu de la manière dont les styles globaux affecteront les blocs affichés, sans que l’utilisateur ait à insérer ces blocs dans un modèle. Il est également important de noter que le style d’un bloc peut être ajusté depuis le Livre des styles. Mettons à jour le bloc Boutons, par exemple, en modifiant la couleur d’arrière-plan et la casse des lettres en majuscules. Si le résultat vous convient, vous pouvez cliquer sur Enregistrer. Notez également que la modification d’un bloc individuel dans votre Livre des styles est prioritaire sur les styles globaux que vous avez définis.
Révisions des styles
Pendant que nous sommes ici, nous devons également parler des révisions des styles. Cliquez sur Révisions des styles, à côté de l’icône du Livre des styles. Les révisions des styles s’ouvrent lorsque vous modifiez un modèle dans le Livre des styles. La fonctionnalité de révision des styles offre une manière visuelle de parcourir l’évolution de vos styles au fil du temps. Vous pouvez facilement revenir à une étape précédente si vous trouvez un style qui vous convient ou si vous souhaitez restaurer une version antérieure. Il vous suffit de sélectionner la version, puis de cliquer sur Appliquer. Dans cet exemple, je modifie un modèle et je vais suivre le même processus. J’ouvre les révisions des styles, je sélectionne un style précédent, puis je clique sur Appliquer pour le restaurer. Lorsque vous cliquez sur les trois points verticaux à côté des styles, vous pouvez réinitialiser les styles et ajouter du CSS supplémentaire.
Pages
Sous Styles, nous pouvons accéder aux Pages pour créer et publier des pages. Pour ajouter une nouvelle page, cliquez sur l’icône plus à côté de Pages et créez un brouillon. Vous pouvez bien sûr également créer une nouvelle page depuis votre Tableau de bord ou l’administration WP. Ouvrons ensuite l’une de nos pages existantes, ma page À propos. Lorsque vous ouvrez une page, il est important de penser à ajouter du contenu au bloc Contenu. Autrement dit, le bloc Contenu est la structure ou le conteneur de tout votre contenu. La deuxième chose à retenir est que vous ne pouvez pas personnaliser votre en-tête et votre pied de page lors de la modification d’une page. Cela fait partie de la gestion des modèles. Si vous cliquez sur l’en-tête, un message s’affiche : ‘Modifiez votre modèle pour modifier ce bloc.’ Si vous souhaitez modifier le modèle attribué à cette page, vous pouvez cliquer sur Modifier le modèle. Dans cet exemple, vous accéderez au modèle de votre page. Ici, vous pouvez modifier votre en-tête et votre pied de page. Vous ne pourrez pas ajouter de contenu à un modèle. Le contenu est bien sûr ajouté aux articles et aux pages. Dans ce contexte, le bloc Contenu n’est qu’un espace réservé.
Modèles
Cela nous amène à notre prochain sujet : les modèles. Les modèles définissent la structure d’affichage de votre contenu. Lorsque vous sélectionnez Modèles, vous remarquerez toute une série de modèles intégrés fournis avec votre thème. Par exemple, le modèle de page qui affiche une page unique, le modèle d’index qui sert de modèle de secours, ou le modèle d’article unique qui affiche la mise en page des articles individuels. Tout en bas, nous trouverons les modèles personnalisés. Lorsque vous cliquez sur l’icône plus à côté de Modèles, vous pouvez ajouter différents modèles, y compris un modèle personnalisé pouvant être appliqué à n’importe quel article ou page. Ouvrons le modèle de page pour mieux comprendre le fonctionnement d’un modèle. Un modèle fournit une structure. Il comprend généralement une partie de modèle d’en-tête et une partie de modèle de pied de page.
Le bloc Contenu de l’article récupère le contenu de la page ou de l’article associé au modèle. Un modèle sert donc uniquement à modifier la mise en page ou la conception de la page, notamment l’en-tête, le pied de page et même la barre latérale. L’éditeur du site établit ainsi une distinction claire entre la modification du modèle et celle de la page. Vous pouvez modifier votre en-tête et votre pied de page dans le modèle. Vous pouvez également cliquer sur les trois points verticaux et sélectionner Remplacer l’en-tête. Vous pouvez alors remplacer votre en-tête actuel par l’une de vos parties de modèle d’en-tête existantes ou par l’une des compositions d’en-tête fournies avec votre thème. Une autre option consiste à sélectionner votre en-tête, puis à cliquer sur Modifier. Cela vous permettra de modifier votre en-tête ou votre pied de page en mode d’édition du modèle, sans aucune autre distraction.
Attribuer un modèle
Pour attribuer un nouveau modèle à une page ou à un article, ouvrez le contenu concerné, dans ce cas ma page À propos, puis ouvrez les réglages de la barre latérale à droite. À côté de Modèle, cliquez sur le nom du modèle, sélectionnez Remplacer le modèle, puis choisissez un modèle personnalisé à attribuer à votre page ou à votre article.
Gérer les modèles
Il convient également de mentionner que lorsque vous cliquez sur Gérer tous les modèles, puis sélectionnez Modification groupée, vous pouvez parcourir et filtrer vos modèles sous forme de tableau ou de grille. Lorsque vous sélectionnez à nouveau Modification groupée, davantage d’options de filtrage sont disponibles. Notez que vous pouvez parcourir et filtrer les pages et les parties de modèle exactement de la même manière.
Compositions
Enfin, parlons des compositions. En haut, vous pouvez afficher toutes les compositions disponibles. Lorsque vous sélectionnez Mes compositions, vous pouvez créer et gérer vos propres compositions synchronisées et non synchronisées. Sous Mes compositions, nous pouvons voir toutes nos compositions personnalisées ainsi que les compositions fournies avec notre thème, dans leurs catégories respectives. Sous Parties de modèle, nous pouvons également créer et gérer nos parties de modèle d’en-tête, de pied de page et générales. Les parties de modèle sont essentiellement des compositions. Ce sont des composants réutilisables synchronisés qui peuvent être utilisés sur l’ensemble de votre site.
Compositions personnalisées
Commençons par Mes compositions. Pour créer votre composition personnalisée, cliquez sur l’inserteur à côté de Compositions, puis sélectionnez Créer une composition. Après lui avoir donné un nom, vous pouvez choisir de l’ajouter à la catégorie appropriée, puis décider de synchroniser ou non votre composition. Une composition synchronisée est synchronisée sur l’ensemble de votre site : si vous la modifiez à un endroit, elle sera mise à jour partout où elle est utilisée. Vous pouvez également désactiver cette option si vous préférez utiliser une composition non synchronisée. Les compositions non synchronisées sont simplement des compositions standard qui peuvent être modifiées indépendamment. Lorsque vous revenez dans votre espace de compositions personnalisées, vous remarquerez que les compositions synchronisées possèdent une icône violette, contrairement aux compositions non synchronisées. Vous remarquerez ensuite que les compositions fournies avec votre thème sont verrouillées et que vous ne pouvez pas les modifier. Toutefois, lorsque vous cliquez sur les trois points verticaux sous une composition, vous pouvez la copier dans votre espace Mes compositions.
Parties de modèle
En bas, nous pouvons créer et gérer nos parties de modèle d’en-tête, de pied de page et générales. Deux options s’offrent à vous. Vous pouvez créer des en-têtes et pieds de page personnalisés ou personnaliser les compositions de parties de modèle fournies avec votre thème. Pour créer votre propre partie de modèle, cliquez sur l’icône plus en haut, à côté de Compositions, puis sélectionnez Créer une partie de modèle. Lorsque vous ajoutez une nouvelle partie de modèle, vous pouvez choisir entre une partie de modèle générale, d’en-tête ou de pied de page. Les parties de modèle générales ne sont liées à aucune zone particulière ; pensez donc à leur donner un nom descriptif. Lorsque vous ouvrez une partie de modèle depuis cet emplacement, vous pouvez la modifier et l’éditer en mode d’édition des modèles, sans aucune distraction. Vous pouvez également ouvrir le modèle concerné, dans ce cas mon modèle personnalisé, puis modifier votre partie de modèle d’en-tête ou de pied de page depuis le modèle. Comme indiqué précédemment, vous pouvez facilement remplacer l’un de vos en-têtes ou pieds de page par une composition ou une partie de modèle existante de la bibliothèque.
Palette de commandes
Pour terminer, je souhaite également mettre en avant une fonctionnalité extrêmement utile appelée la palette de commandes. Elle vous fera gagner beaucoup de temps et vous aidera à vous déplacer plus efficacement dans l’éditeur du site. La palette de commandes vous permet d’effectuer rapidement des tâches et de naviguer dans l’éditeur du site. Vous pouvez, par exemple, saisir ‘Nouveau’ pour créer une page ou un modèle, ou simplement saisir le nom de la zone vers laquelle vous souhaitez vous rendre. Par exemple, composition pour gérer toutes mes compositions. Vous pouvez accéder à la palette de commandes à l’aide du raccourci commande+k sur Mac ou contrôle+k sur Windows. Vous la trouverez également dans la barre latérale d’affichage du site en cliquant sur l’icône de recherche. Vous pouvez aussi simplement cliquer sur la barre de titre.
Conclusion
Cela conclut notre bref aperçu de ce que vous pouvez accomplir avec l’éditeur du site.
Mise en pratique
Utilisez WordPress Playground pour explorer l’éditeur du site.
- Entraînez-vous à naviguer entre les différentes zones de l’éditeur du site.
- Utilisez la palette de commandes pour naviguer plus rapidement dans l’éditeur du site.
- Comparez la différence entre une page et un modèle.