Décoder WordPress : nouvelles options de configuration de thème avec le fichier Theme.JSON

Les nouvelles options de configuration de thème dans WordPress facilitent plus que jamais la modification de l’apparence de ton site selon tes besoins spécifiques et uniques. De plus, la possibilité de convertir les thèmes classiques en thèmes de blocs ajoute encore plus de fonctionnalités conviviales.

Dans cet article de blog, le quatrième de notre série « Décoder WordPress », nous discuterons de ces deux développements, y compris ce qu’ils sont et comment ils peuvent te permettre d’avoir un site magnifique et personnalisé, que tu aies des compétences de développement WordPress débutantes ou intermédiaires.

Vue D’Ensemble Des Thèmes Et Modèles WordPress

Avant d’aborder les nouvelles options pour configurer ton thème en utilisant les nouvelles possibilités offertes par un fichier appelé theme.json, nous allons d’abord comprendre ce que cela signifie réellement de configurer un thème. Pour aider à comprendre cela, clarifions d’abord la différence entre un thème et un modèle dans WordPress, car il y a souvent une certaine confusion à ce sujet, surtout si tu es débutant.

Un thème est la conception complète et la base du look and feel cohérent de ton site. Il inclut des éléments comme les palettes de couleurs, la typographie, les dispositions de page, les marges, l’interligne, les en-têtes et les pieds de page, le positionnement des barres latérales et d’autres éléments. Lorsque tu choisis un thème et l’installes, tous ces éléments sont également installés automatiquement. Il existe pratiquement un nombre incalculable de thèmes gratuits et payants disponibles.

Un modèle, cependant, est une mise en page d’une seule page au sein d’un thème de site. Et bien que des modifications puissent être apportées à un modèle, elles ne s’appliquent qu’aux pages utilisant ce modèle, et non à l’ensemble du site. Des éléments comme personnaliser la mise en page de ton blog, construire des pages de destination et donner à d’autres contenus un aspect distinctif sont des exemples de ce que tu peux réaliser grâce aux modèles.

Alors, Quelles Sont Les Options De Configuration De Thème ?

Les options de configuration de thème sont des pages d’administration qui accompagnent certains thèmes WordPress. Ces pages d’administration te permettent de personnaliser les paramètres de ton thème installé sans avoir à modifier des fichiers de thème ou à te perdre dans la modification de code. Certaines de ces pages d’administration peuvent offrir quelques options, tandis que d’autres peuvent en avoir bien plus. Si tu es débutant, la simplicité relative d’une page d’administration par rapport à une voie plus compliquée peut être un véritable gain de temps et un sauveur de santé mentale.

Si ton objectif est simplement d’améliorer ou de modifier des fonctionnalités dans un thème, tu peux grandement simplifier les choses en installant un plugin plutôt que de reconfigurer tout le thème. Cependant, si tu souhaites modifier les styles de thème et les paramètres des blocs sur l’ensemble de ton site, il faudra reconfigurer les choses en personnalisant.

Qu’est-ce Que C’est JSON ?

Pour personnaliser ton thème WordPress lorsque celui-ci n’inclut pas de page d’administration, tu devras créer et ajouter un fichier de configuration theme.json au thème. Mais qu’est-ce que JSON ? L’acronyme signifie JavaScript Object Notation, qui est un format d’échange de données textuel ouvert qui peut être lu à la fois par les humains et les machines et n’est lié à aucun langage de programmation spécifique. Son utilisation la plus courante est pour la transmission de données dans les applications web.

theme.json a été ajouté à WordPress dans la version 5.8, et ne fonctionne pas avec les versions antérieures de WordPress à moins que tu n’actives le plugin Gutenberg. (L’éditeur Gutenberg a été officiellement lancé en 2018 en même temps que WordPress 5.0.)

Certaines des options de personnalisation que tu peux choisir dans theme.json incluent :

• Activer ou désactiver des fonctionnalités telles que les lettrines, le rembourrage des blocs, les marges et les hauteurs de ligne personnalisées
• Ajouter plusieurs palettes de couleurs, dégradés et filtres duo-ton pour les photos
• Modifier les tailles de police
• Ajouter des largeurs par défaut pour le contenu
• Gérer les propriétés CSS (feuille de style en cascade). Le CSS est utilisé pour définir l’apparence visuelle et la mise en forme des documents HTML.
• Attribuer des parties de template aux zones de parties de template

Au fur et à mesure que le développement de Gutenberg avance, les options disponibles avec theme.json dans WordPress diffèrent entre la version 5.8 (où la version 1 de theme.json est utilisée) jusqu’à la version 5.9+ (où la version 2 de theme.json est utilisée) ainsi que le plugin Gutenberg.

Options Expliquées

Avec ces options de personnalisation plus détaillées désormais accessibles aux développeurs WordPress débutants et intermédiaires, parlons à la fois de ce qu’elles sont et pourquoi elles pourraient t’être bénéfiques.

Activer Ou Désactiver Des Fonctionnalités Comme Les Lettrines, Le Rembourrage Des Blocs, Les Marges Et Les Hauteurs De Ligne Personnalisées

Les lettrines (une technique de style où la première lettre d’un paragraphe est de plus grande taille), le remplissage des blocs (l’espace à l’intérieur du bloc situé entre l’élément/contenu et la bordure du bloc, entourant tous les côtés de l’élément), les marges et les hauteurs de ligne personnalisées peuvent donner à tes pages un aspect plus distinctif et même formel, selon la manière dont tu réussis à les styliser.

Ajout de plusieurs palettes de couleurs, dégradés et filtres duo-ton pour les photos

La palette de couleurs adéquate – ou plusieurs palettes – peut aider à définir et à améliorer l’identité commercialisable de ta marque et de ton site, et les dégradés (arrière-plans de deux couleurs qui se fondent l’une dans l’autre) peuvent donner à ton site une identité plus dynamique que l’utilisation de couleurs unies pour les pages de ton site. Les filtres Duotone peuvent être appliqués aux photos que tu as téléchargées sur ton site, et réduire le nombre de couleurs dans la photo à juste deux – une pour les parties sombres de la photo, une autre pour les parties claires. En utilisant ces ressources dans les paramètres du thème WordPress de ton site, les schémas de couleurs globaux de ton site peuvent être formels, modérés ou avant-gardistes – limités seulement par ton imagination.

Modification des tailles de police

Parfois, les polices de ta thème choisie peuvent convenir à l’identité spécifique, au ton ou à l’attitude que tu souhaites transmettre, mais les tailles de polices disponibles peuvent ne pas l’être. Elles peuvent être trop petites ou trop grandes. En ayant la possibilité de modifier les tailles, tu peux personnaliser chaque aspect de l’apparence du texte de ton site à l’image de ta marque.

Ajout de largeurs par défaut pour le contenu

La largeur du contenu est une fonctionnalité du thème qui te permet de définir la largeur par défaut ou maximale autorisée (taille) pour tout contenu dans le thème, comme les intégrations et les images ajoutées aux articles. Lorsque tu définis des largeurs par défaut, WordPress peut redimensionner les codes d’intégration à des tailles spécifiques sur le frontend et insérer de grandes images sans rompre la zone de contenu principale.

Gérer les propriétés CSS personnalisées (feuille de style en cascade).

Si tu as passé du temps à travailler avec le CSS, nous sommes sûrs que tu te demandes pourquoi tu voudrais écrire ton CSS personnalisé dans le format JSON radicalement différent. En un mot : flexibilité.

Disons que tu as choisi une couleur, vert forêt, pour ton site que tu aimes vraiment. Avec CSS, tu devrais parcourir et ajouter le code couleur partout où tu souhaites utiliser cette couleur. Pas un gros problème, n’est-ce pas ?

Maintenant, disons que quelques semaines plus tard, tu trouves une nuance de vert forêt légèrement plus foncée que tu préférerais utiliser. Avec CSS, tu dois revenir en arrière et remplacer toutes les occurrences du code couleur “ancien” vert forêt par le nouveau.

Mais, en utilisant theme.json, tu n’aurais qu’à mettre à jour la définition de la couleur une fois, dans le fichier JSON, pour qu’elle change sur l’ensemble de ton site.

Affecter des parties de modèle aux zones de parties de modèle

Les modèles de page sont des fichiers qui contrôlent l’apparence d’une page spécifique et peuvent être utilisés pour appliquer des mises en page particulières à différentes pages de votre site. Dans WordPress, il existe également des parties de modèles, qui fonctionnent comme des sections structurelles plus petites d’un modèle de page.

Si tu explores les fichiers de ton thème, tu verras généralement des parties de modèle pour des éléments comme les en-têtes ou les pieds de page. theme.json te permet d’assigner des parties de modèle aux trois zones de placement disponibles dans un modèle : Général, En-tête et Pied de page.

Convertir Ou Ne Pas Convertir – Telle Est La Question

Maintenant que tu as acquis une compréhension des options de configuration de thème WordPress disponibles grâce au fichier theme.json, nous voulons aborder une dernière chose : convertir un thème classique en thème à blocs, et les problèmes que tu devrais considérer lors de la conversion.

Les thèmes en blocs dans WordPress présentent plusieurs avantages, car ils ont été conçus pour améliorer à la fois la scalabilité et la performance.

• Les thèmes en blocs améliorent la performance de chargement en chargeant les styles uniquement pour les blocs qui ont été ajoutés à une page.
• Les thèmes en blocs ne nécessitent pas d’enfiler manuellement des feuilles de style pour le frontend et les éditeurs.
• theme.json gère tous les aspects de add_theme_support(), ce qui résulte en moins de temps passé à manipuler PHP.
• Les fonctionnalités d’accessibilité telles que Passer au contenu, la navigation au clavier et les repères sont générées automatiquement sans ajouter de code supplémentaire.
• Avec un thème en blocs, un utilisateur final peut modifier toutes les parties de son site web sans toucher à aucun code.
• En utilisant l’interface Styles, les utilisateurs peuvent personnaliser les couleurs et la typographie pour le site web et pour tous les blocs qu’ils pourraient utiliser.

Toutefois, convertir un thème classique en un thème de bloc n’est pas sans risques.

• Convertir un thème classique en thème bloc peut affecter les thèmes enfant qui s’attendent à un thème classique. Considère les impacts potentiels — ou la création d’un nouveau projet avec un nouveau nom de thème — avant de convertir.
• theme.json nécessite la version 5.8 de WordPress ou ultérieure. Par conséquent, le support pour Internet Explorer 11 a été abandonné lorsque WordPress 5.8 a été lancé. Donc, si ton thème classique prend en charge IE11 — ou si tu as des visiteurs qui utilisent IE11 — la conversion en thème bloc pourrait impacter l’expérience de tes visiteurs.

L’Aide Pro Est Disponible !

Bien que la personnalisation de tes thèmes WordPress avec des options via un fichier theme.json puisse être assez faisable si tu es un développeur WordPress débutant ou intermédiaire, peut-être n’es-tu pas encore à 100% sûr que c’est une étape avec laquelle tu te sens à l’aise de faire seul. N’aie pas peur, car lorsque tu t’inscris aux trois plans d’hébergement WordPress géré DreamPress de DreamHost, tu obtiens automatiquement accès à notre équipe d’élite d’experts WordPress entièrement internes, qui sont disponibles 24/7 pour t’aider dans cette composante et toutes les autres de ton parcours de développement !