Décoder WordPress : Une Introduction aux Styles Globaux

Les blocs WordPress et les fonctionnalités d’Édition Complète du Site (FSE) rendent la construction et la personnalisation d’un site web réussi rapides et faciles.

Les styles globaux peuvent t’aider à unifier l’apparence de ton site WordPress sans avoir à modifier des blocs ou des pages individuels. Que tu souhaites changer la couleur de fond ou ajuster la typographie des titres, tu pourras réaliser tes modifications en un seul endroit, ce qui résulte en une expérience utilisateur (UX) plus cohérente et globalement meilleure User Experience (UX).

Dans cet article, nous allons te guider à travers les Styles Globaux. Nous expliquerons ce qu’ils sont, leurs avantages, et comment fonctionnent les nouvelles fonctionnalités. Ensuite, nous discuterons de la manière de les utiliser pour styliser ton site web WordPress. Commencez maintenant !

Vue D’ensemble Des Styles Globaux De WordPress

Avant de travailler avec les Styles Globaux, il est important de comprendre ce qu’ils sont et comment ils fonctionnent. Cette fonctionnalité fonctionne en conjonction avec theme.json, un nouveau fichier de paramètres de thème. Les développeurs peuvent utiliser theme.json pour définir les valeurs par défaut pour un site ainsi que pour des blocs individuels. Gutenberg applique automatiquement ce JSON lorsque vous placez le fichier dans le répertoire racine d’un thème basé sur des blocs.

Ce fichier est l’un des outils les plus utiles du nouvel éditeur complet de site dans WordPress 5.9. Le fichier permet aux auteurs de thèmes de partager des Styles Globaux ainsi que des Paramètres Globaux. WordPress reformate les données prises de ces objets JSON et les transforme en CSS. Ensuite, les utilisateurs peuvent personnaliser davantage les styles dans l’éditeur WordPress.

Dans les versions précédentes du plugin Gutenberg, tu devais enregistrer le support pour les propriétés de style d’un bloc avant de pouvoir travailler avec dans theme.json. De plus, dans les thèmes classiques et les versions antérieures, tu devais utiliser PHP pour définir des éléments tels que tes choix de couleurs et polices. Ensuite, il fallait ajouter des styles pour les côtés frontend et backend de ton thème.

Cependant, avec la dernière version, lorsque tu utilises un thème avec le fichier theme.json en place, WordPress ajoute automatiquement les styles définis là à ta feuille de style. Tu peux utiliser ce système pour ajouter entièrement de nouvelles palettes de couleurs, changer la typographie des thèmes, et plus encore.

Pourquoi Utiliser Les Styles Globaux De WordPress

Peu importe ton niveau de compétence, tu trouveras probablement que l’utilisation des Styles Globaux est une expérience intuitive et accessible. Globalement, cela peut rationaliser le processus de conception web en rendant plus facile la modification de l’apparence et de la sensation de ton site. Si tu es un débutant sur WordPress, tirer parti de ces Styles Globaux pourrait signifier que tu n’auras pas besoin de recruter un développeur pour concevoir ton site web. Désolé, développeurs.

En revanche, cette nouvelle fonctionnalité pourrait être particulièrement utile pour les développeurs de thèmes. C’est parce que les Styles Globaux aident les développeurs WordPress à styliser les blocs dans l’Éditeur de Blocs. Cela peut être très avantageux, notamment pour les nouveaux auteurs de thèmes. Il offre une variété de contrôles qui minimisent le besoin de créer des solutions personnalisées pour styliser un site.

En d’autres termes, Global Styles simplifie considérablement le développement de thèmes. Par conséquent, cela peut aider les développeurs à éviter des erreurs de conception dommageables.

Création du fichier theme.json

Le fichier theme.json contient deux parties importantes : les paramètres et les styles. Les paramètres se réfèrent à une liste de valeurs de configuration globales ou contextuelles qui déterminent le comportement de l’éditeur et des blocs. Par exemple, cela influence quels contrôles sont activés par défaut, quels contrôles sont cachés de l’Interface Utilisateur (UI), la palette de couleurs disponible, les paramètres de typographie, etc.

Styles gère le langage de conception du thème et permet aux auteurs de thème de définir des éléments tels que :

• Taille de police
• Hauteur de ligne
• Couleurs d’arrière-plan
• Couleurs des liens

Si tu veux créer un fichier theme.json, tu peux créer un nouveau fichier portant ce nom et ensuite le placer dans le dossier racine de ton thème. Tous les contenus de ton fichier doivent être insérés à l’intérieur de deux accolades : { }.

Ensuite, tu utiliseras des noms de propriété et des valeurs entre guillemets doubles et séparés par un deux-points, par exemple :

{

"nom-de-propriété": "valeur"

}

Le nom de la propriété peut être un paramètre ou un nom de bloc. Voici un exemple d’un fichier theme.json très basique :

{

    "version": 1,

    "paramètres": {},

    "styles": {},

    "modèlesPersonnalisés": {},

    "partiesDeModèle": {}

}

La version 1 du format theme.json est la plus ancienne et la plus stable. Cependant, la version 2 est utilisée à partir de WordPress 5.9. Bien que la section de version doit être la première à suivre l’accolade ouvrante, les sections suivantes peuvent être placées dans n’importe quel ordre.

Comme nous l’avons mentionné, les deux principales sections du fichier sont Paramètres et Styles. Alors, examinons de plus près les préréglages pour chacun.

Préréglages Des Paramètres

Presets font référence aux contrôles par défaut ainsi qu’à toutes les propriétés CSS personnalisées et sont générés par les valeurs dans theme.json. Certaines des principales catégories de presets incluent :

• Couleur
• Typographie
• Disposition
• Espacement

Les catégories peuvent également avoir des sous-catégories. Par exemple, une sous-catégorie de Couleur pourrait être Palette de couleurs :

{

"version": 2,

"paramètres": {

"couleur": {

"palette": [

{

Chaque pré-réglage crée également une propriété CSS personnalisée en utilisant la convention de nommage “–wp–preset–{preset-category}–{preset-slug}”.

Il y a une tonne de préréglages et d’exemples que tu peux utiliser pour créer ton fichier theme.json, donc nous n’allons pas tous les passer en revue ici. Cependant, tu peux consulter le Manuel WordPress pour obtenir des conseils plus détaillés.

Préréglages De Styles

Préréglages de styles contrôlent les styles des objets dans les blocs. Par exemple, la méthode suivante serait une façon d’utiliser la valeur hexadécimale pour un arrière-plan et un préréglage de Styles Globaux pour la couleur du texte :

{

        "version": 2,

"settings": { ... },

"styles": {

"color": {

"background": "#FBF",

"text": "var(--wp--preset--color--purple)"

}

}

}

Si nous voulions changer la couleur du titre d’un bloc, cela ressemblerait à ceci :

{

        "version": 2,

"settings": {...},

"styles": {

...,

               "blocks": {

             "core/heading": {

     "color": {

      "text": "var(--wp--preset--color--blue)"

     }

Encore une fois, il existe presque une infinité d’exemples et de manières d’utiliser les préréglages pour les styles de blocs. Tu peux consulter la documentation de WordPress pour une explication complète.

Il existe également des sections Template et parties de Template. Celles-ci incluent les fichiers de base de ton thème, tels que index.html, ainsi que des sections pour organiser et structurer ton thème.

Comment Styler Ton Site WordPress Avec Les Styles Globaux

Si tu cherches une manière conviviale pour les débutants d’utiliser les Styles Globaux pour styliser ton site web, tu peux utiliser l’interface des Styles Globaux avec un thème de bloc WordPress. Note que tu auras uniquement accès à l’interface des Styles avec WordPress 5.9 ou supérieur.

Choisir Un Thème Basé Sur Des Blocs

Tout d’abord, tu auras besoin d’un thème basé sur des blocs. Pour en trouver un, tu peux naviguer vers le répertoire de thèmes WordPress depuis ton tableau de bord admin en parcourant Apparence > Thèmes > Ajouter Nouveau. Ensuite, tu peux cliquer sur le Filtre de fonctionnalités et sélectionner Édition Complète du Site, suivi de Appliquer:

Une fois que tu trouves un thème WordPress qui te plaît, tu peux passer ta souris dessus, puis sélectionner Installer suivi de Activer. Nous utiliserons Twenty Twenty-Two, qui pourrait déjà être installé si tu utilises WordPress 5.9 ou ultérieur.

Accéder à L’interface Des Styles

Ensuite, dirige-toi vers ton Éditeur de Thème (Apparence > Éditeur). Dans le coin supérieur droit de l’écran, tu verras un cercle à demi ombragé, qui représente le panneau des Styles :

Lorsque tu cliques dessus pour la première fois, cela affichera un Guide de Bienvenue des Styles. Si tu as besoin d’y accéder ultérieurement, tu peux le trouver en cliquant sur les trois points verticaux dans le coin supérieur droit et en sélectionnant Guide de Bienvenue.

La fenêtre de prévisualisation te montre à quoi ressemble le style actuel de ton thème. Sous le panneau Styles, tu trouveras des réglages pour :

• Typographie
• Couleurs
• Mise en page
• Blocs

Examinons chacun de plus près.

Typographie

Sous Typography, tu peux gérer les paramètres de typographie pour deux éléments : Text et Links.

Tu peux changer la famille et la taille de la police :

Tu peux aussi ajuster la hauteur de ligne et sélectionner une graisse de police. Tu auras les mêmes options pour tes liens. Quand tu auras terminé, n’oublie pas de sauvegarder tes modifications.

Couleurs

Sous Couleurs, tu trouveras les préréglages de couleurs par défaut qui accompagnent ton thème. Pour créer tes propres palettes de couleurs, tu peux entrer les numéros de valeur HEX ou utiliser le sélecteur de couleurs par glisser-déposer pour générer les couleurs de ton choix :

Tu peux également renommer les couleurs par des noms plus identifiables ou descriptifs que les valeurs alphanumériques hexadécimales standards. Tu peux ajouter des dégradés personnalisés, appliquer des filtres duo-tones aux images, et plus encore.

Ensuite, tu peux modifier les couleurs pour trois éléments principaux : Background, Text, et Links. Tu peux également sélectionner n’importe lequel de ces éléments pour personnaliser le style. Les modifications seront appliquées instantanément pendant que tu édites.

Disposition

Sous Layout, tu peux ajuster les marges et d’autres éléments. C’est simple et peut être très utile lorsque tu dois faire un petit ajustement (par exemple, pour la symétrie de la page).

Blocs

Enfin, tu peux modifier l’apparence des blocs individuels. Après avoir sélectionné Blocs dans le panneau de styles, tu trouveras une liste des blocs sur ton site.

Disons que tu souhaites modifier le style de ton bloc de Titre. Tu peux sélectionner Heading dans la liste, puis ajuster ses paramètres de Colors et de Typography :

Quand tu auras terminé, tu peux cliquer sur Save. Si tu souhaites revenir aux styles de thème que tu avais avant de faire des modifications, tu peux te rendre dans le panneau Styles, cliquer sur les trois points verticaux, puis sélectionner Reset to defaults.

Une Meilleure Façon D’utiliser Et De Styliser WordPress

WordPress travaille continuellement à améliorer l’expérience d’édition pour ses utilisateurs. Désormais, grâce aux Styles Globaux, le développement de thèmes vient de devenir beaucoup plus facile pour les débutants comme pour les professionnels expérimentés.

Comme discuté dans cet article, tu peux créer un fichier theme.json pour appliquer les configurations de Styles Globaux à ton thème. Tu peux également utiliser l’éditeur de Styles avec un thème basé sur des blocs pour personnaliser l’apparence de ton site. Tout cela rend la conception d’un site web réussi très simple.

DreamHost est une équipe d’experts en web expérimentés. Nous comprenons l’importance d’optimiser ton expérience WordPress. Nous nous engageons à soutenir tes efforts en utilisant la dernière technologie open-source et un support primé. Découvre nos plans d’hébergement WordPress géré aujourd’hui pour en savoir plus!