Name: WordPress Personnaliser les thèmes Gutenberg sans coder (5e édition)
Rating: 5 (2 reviews)

Accéder aux styles du thème

Nous l’avons vu dans le chapitre La structure des thèmes Gutenberg, les styles d’un thème sont des variations de mise en page et de mise en forme que propose le designer. Ces styles s’appliquent à l’ensemble des modèles de pages, des compositions, des navigations et des contenus rédactionnels que sont les articles et les pages. Donc, si vous modifiez ou personnalisez ces styles, c’est l’ensemble de l’affichage du site qui sera affecté.

D’un point de vue plus technique et en simplifiant grandement, les styles d’un thème sont des feuilles de styles CSS. À chaque style du thème correspond une feuille de style CSS.

Pour accéder aux styles du thème Twenty Twenty-Five, dans le menu Apparence, veillez à ce que le thème Twenty Twenty-Five soit bien actif.

Dans le menu Apparence, choisissez Éditeur, puis cliquez sur Styles.

WordPress affiche tous les styles du thème.

Les palettes de couleurs :

Et les styles typographiques :

Changer le style du thème

1. Changer le style

À tout moment vous pouvez changer le style de votre site. Pour voir le rendu d’un style, vous pouvez utiliser le contenu existant de votre site. C’est l’option par défaut. Si vous n’avez pas encore de contenu, vous pouvez utiliser des contenus fictifs générés par WordPress.

Pour utiliser les contenus de WordPress, dans la liste des styles, cliquez sur le bouton Guide de style images/06ic01.PNG .

Dans la partie droite de l’écran, WordPress affiche une page avec des contenus variés, du texte, des images, des tableaux… En voici un extrait :

Dans la liste des styles, cliquez sur le nom du style que vous souhaitez tester.

Dans cet exemple, c’est le style Midi qui est choisi. Voici un extrait de l’écran d’application du nouveau style :

Pour revenir au style par défaut, cliquez sur le bouton du style nommé Par défaut.

2. Changer la palette des couleurs

Pour un style donné, le designer peut proposer plusieurs palettes de couleurs qu’il est aussi possible de tester à l’aide de la liste PALETTE. Dans cet exemple, c’est le style Par défaut qui est utilisé et c’est la première palette qui est appliquée, elle est entourée d’un filet blanc. Voici un extrait de cette utilisation :

Pour appliquer...

Personnaliser un style

1. Accéder à la personnalisation d’un style

Vous pouvez personnaliser un style du thème.

Dans la liste des styles, pour le style sélectionné, c’est le style nommé Par défaut dans cet exemple, cliquez sur le bouton Modifier les styles.

Dans le volet Styles, vous pouvez à nouveau utiliser les contenus de WordPress si vous n’en avez pas, en cliquant sur le bouton Guide de style.

WordPress affiche à nouveau des exemples de contenu. Dans l’écran des exemples, vous pouvez choisir différents types de contenus. Vous avez les onglets : Texte, Média, Design, Widgets et Thème. Dans la colonne latérale de droite, vous avez le nom et l’aperçu du style qui est actif :

Dans le volet Styles, pour changer de style, cliquez sur Parcourir les styles.

Voici un extrait :

Et c’est bien le style nommé Par défaut qui est sélectionné dans cet exemple.

Pour revenir à l’écran précédent, cliquez sur le bouton Retour, à gauche du bouton Parcourir les styles.

2. Modifier la typographie

La première personnalisation qui est proposée est la typographie.

Dans le volet Styles, cliquez sur Typographie.

Le thème propose dans un premier temps de choisir entre plusieurs JEUX DE POLICE de caractères.

Cliquez sur l’un de ces jeux pour en afficher le résultat dans la page d’exemple centrale.

Voici un exemple, avec l’onglet Texte sélectionné pour les exemples de contenu :

En fonction du jeu de police choisi, WordPress affiche le nom des polices utilisées dans la section POLICES. Avec l’exemple précédent, ce sont les polices Platypi et Ysabeau Office qui sont utilisées :

Selon les polices utilisées, une ou plusieurs variantes peuvent être disponibles. Dans cet exemple, la police Platypi dispose de deux variantes, comme la police Ysabeau Office.

Pour exploiter une variante, cliquez sur le nom de la police, Platypi dans cet exemple :

Cochez les variantes que vous souhaitez utiliser dans la personnalisation des polices.

Notez dans cet écran que vous pouvez installer des polices, via Google Fonts, dans l’onglet Installer des polices. Il faut alors autoriser l’accès...

Gérer les modifications du style personnalisé

Lorsque vous avez fait des modifications dans le style sélectionné, il faut les enregistrer.

Dans la barre des outils, cliquez sur le bouton Enregistrer.

Si vous avez fait des erreurs et que vous souhaitez retrouver le style initial, dans la barre des Styles, dans le menu En savoir plus, choisissez Réinitialiser les styles.

Appliquer les personnalisations du style

Toutes les personnalisations du style s’appliquent immédiatement dans toutes les pages du site. Et les personnalisations des couleurs, des dégradés, des ombres portées et des polices de caractères sont disponibles pour mettre en forme certains blocs sélectionnés des contenus du site.

Voici en exemple un bloc Paragraphe sélectionné dans un article. C’est la personnalisation de la couleur du texte qui est utilisée. Dans la liste des couleurs, nous retrouvons la couleur Rose intense créée dans la personnalisation du style Pardéfaut.

Voici un autre exemple, avec un bloc Titre sélectionné et l’application de la police de caractère ADLaM Display installée dans la personnalisation du thème :