Décodage de 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 votre site en fonction de vos besoins spécifiques et uniques. De plus, la possibilité de convertir des thèmes classiques en thèmes de blocs ajoute des fonctionnalités encore plus 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 vous permettre d’avoir plus facilement un beau site sur mesure, que vous soyez débutant ou intermédiaire. Compétences en développement WordPress.

Un aperçu des thèmes et modèles WordPress

Avant de passer en revue les dernières options de configuration de votre thème en utilisant les dernières options rendues possibles par un fichier appelé theme.json, nous allons nous familiariser avec ce qu’il en est réellement. moyens pour configurer un thème. Afin d’aider notre compréhension de 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 vous êtes novice.

Un thème est la conception complète et la base de l’apparence cohérente de votre site. Il comprend des éléments tels que les palettes de couleurs, la typographie, les mises en page, les marges, l’espacement des lignes, les en-têtes et les pieds de page, le positionnement de la barre latérale et d’autres éléments. Lorsque vous choisissez un thème et que vous l’installez, tous ces éléments sont également automatiquement installés. Il existe un nombre pratiquement incalculable de thèmes gratuits et payants disponibles.

Un modèle, cependant, est une mise en page d’une seule page dans un thème à l’échelle du site. Et bien que des modifications puissent être apportées à un modèle, elles ne sont appliquées qu’à l’une des pages qui utilisent ce modèle, et non à l’ensemble du site. Des éléments tels que la personnalisation de la mise en page de votre blog, la création de pages de destination et le fait de donner à d’autres contenus un aspect distinctif sont des exemples de ce que vous pouvez réaliser grâce aux modèles.

Alors, quelles sont les options de configuration du thème ?

Les options de configuration de thème sont des pages d’administration fournies avec certains thèmes WordPress. Ces pages d’administration vous permettent de personnaliser les paramètres de votre thème installé sans avoir à modifier les fichiers de thème ou à vous enliser avec la modification du code. Certaines de ces pages d’administration peuvent offrir quelques options, tandis que d’autres peuvent en avoir beaucoup, beaucoup plus. Si vous êtes un débutant, la simplicité relative d’une page d’administration par rapport à la route plus compliquée peut être un moment bienvenu – et un gain de santé mentale.

Si votre objectif est uniquement d’améliorer ou de modifier les fonctionnalités d’un thème, vous pouvez grandement simplifier les choses en installant un plugin plutôt que de reconfigurer l’ensemble du thème. Cependant, si vous souhaitez modifier les styles de thème et bloquer les paramètres sur l’ensemble de votre site, vous devrez reconfigurer les éléments via la personnalisation.

Qu’est-ce que c’est que JSON ?

Pour personnaliser votre thème WordPress lorsqu’il n’inclut pas de page d’administration, vous devrez 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 ouvert d’échange de données basé sur du texte qui peut être lu à la fois par les humains et les machines et qui n’est lié à aucun langage de programmation spécifique. Son utilisation la plus courante est la transmission de données dans des applications Web.

thème.json La prise en charge a été ajoutée à WordPress dans la version 5.8 et ne fonctionne pas avec les anciennes versions de WordPress, sauf si vous activez le plugin Gutenberg. (L’éditeur Gutenberg a été officiellement publié en 2018 aux côtés de WordPress 5.0.)

Certaines des options de personnalisation que vous pouvez choisir dans thème.json comprendre:

• Activer ou désactiver des fonctionnalités telles que les lettrines, le remplissage de bloc, les marges et les hauteurs de ligne personnalisées
• Ajout de plusieurs palettes de couleurs, dégradés et filtres bicolores pour les photos
• Modification des tailles de police
• Ajout de largeurs par défaut pour le contenu
• Gestion des propriétés personnalisées CSS (feuille de style en cascade). CSS est utilisé pour définir l’apparence visuelle et le formatage des documents HTML.
• Attribuer des pièces de modèle à des zones de pièces de modèle

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

Options expliquées

Avec ces options de personnalisation plus granulaires désormais à la portée des développeurs WordPress débutants et intermédiaires, parlons des deux Quel ils sont et Pourquoi ils pourraient vous être bénéfiques.

Activer ou désactiver des fonctionnalités telles que les lettrines, le remplissage de bloc, les marges et les hauteurs de ligne personnalisées

Lettrines (une technique de style dans laquelle la première lettre d’un paragraphe a une taille de police plus grande), remplissage de bloc (l’espace à l’intérieur du bloc qui se trouve entre l’élément/contenu et la bordure du bloc, et qui entoure tous les côtés de l’élément) , les marges et les hauteurs de ligne personnalisées peuvent donner à vos pages un aspect plus distinctif et même formel, selon la façon dont vous parvenez à les styliser.

Ajout de plusieurs palettes de couleurs, dégradés et filtres bicolores pour les photos

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

Modification des tailles de police

Parfois, les polices de votre thème choisi peuvent convenir à l’identité, au ton ou à l’attitude spécifique que vous souhaitez transmettre, mais les tailles de police définies qui sont disponibles peuvent ne pas l’être. Ils peuvent être trop petits ou trop grands. En ayant la possibilité de modifier les tailles, vous pouvez adapter chaque aspect de l’apparence de la copie de votre site à l’image de votre marque.

Ajout de largeurs par défaut pour le contenu

La largeur du contenu est une fonctionnalité de thème dans laquelle vous pouvez définir la largeur (taille) autorisée par défaut ou maximale pour tout contenu du thème, comme les intégrations et les images ajoutées aux publications. Lorsque vous définissez des largeurs par défaut, WordPress peut mettre à l’échelle les codes d’intégration à des tailles spécifiques sur le front-end et insérer de grandes images sans casser la zone de contenu principale.

Gestion des propriétés personnalisées CSS (feuille de style en cascade).

Si vous avez passé du temps à travailler avec CSS, nous sommes sûrs que vous vous demandez pourquoi vous voudriez même écrire votre CSS personnalisé dans le format JSON radicalement différent. En un mot : flexibilité.

Supposons que vous ayez choisi une couleur, le vert forêt, pour votre site que vous vraiment Comme. Avec CSS, vous devez parcourir et ajouter le code de couleur à tous les endroits où vous souhaitez utiliser cette couleur. Pas une grosse affaire, non ?

Supposons maintenant que quelques semaines plus tard, vous trouviez une teinte légèrement plus foncée de vert forêt que vous préféreriez utiliser. Avec CSS, vous devez revenir en arrière et rechercher/remplacer toutes les instances de l' »ancien » code de couleur vert forêt par le nouveau.

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

Attribuer des pièces de modèle à des zones de pièces de modèle

Les modèles de page sont des fichiers qui contrôlent l’apparence d’une page spécifique, et ils 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èle, qui fonctionnent comme des sections structurelles plus petites d’un modèle de page.

Si vous parcourez les fichiers de votre thème, vous verrez généralement des éléments de modèle pour des éléments tels que les en-têtes ou les pieds de page. thème.json vous permet d’affecter des composants de modèle aux trois zones de placement disponibles dans un modèle : Général, Entêteet Bas de page.

Convertir ou ne pas convertir – telle est la question

Maintenant que vous avez acquis une compréhension des options de configuration de thème WordPress à votre disposition grâce au thème.json nous voulons aborder une dernière chose : convertir un thème classique en thème de bloc, et les problèmes que vous devez prendre en compte lors de la conversion.

Les thèmes de blocs dans WordPress présentent un certain nombre d’avantages, car ils ont été conçus pour améliorer à la fois l’évolutivité et les performances.

• Les thèmes de blocs améliorent les performances de chargement en chargeant les styles uniquement pour les blocs qui ont été ajoutés à une page.
• Les thèmes de bloc ne sont pas tenus de mettre manuellement les feuilles de style en file d’attente pour le front-end et les éditeurs.
• thème.json gère tous les aspects de add_theme_support(), ce qui permet de passer moins de temps à tâtonner en PHP.
• Les fonctionnalités d’accessibilité telles que Passer au contenu, la navigation au clavier et les points de repère sont générées automatiquement sans ajouter de code supplémentaire.
• Avec un thème de bloc, 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 du site Web et des blocs qu’ils peuvent utiliser.

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

• La conversion d’un thème classique en thème de bloc peut affecter les thèmes enfants qui attendent un thème classique. Tenez compte des impacts potentiels – ou créez un nouveau projet avec un nouveau nom de thème – avant la conversion.
• thème.json nécessite WordPress version 5.8 ou ultérieure. Par conséquent, la prise en charge d’Internet Explorer 11 a été abandonnée lors de la sortie de WordPress 5.8. Ainsi, si votre thème classique prend en charge IE11 – ou si vous avez des visiteurs qui utilisent IE11 – la conversion d’éléments en un thème de bloc a potentiellement un impact sur l’expérience de votre visiteur.

L’aide Pro est disponible !

Bien que la personnalisation de vos thèmes WordPress avec des options via un thème.json peut être raisonnablement faisable si vous êtes un développeur WordPress débutant ou intermédiaire, peut-être n’êtes-vous pas encore sûr à 100 % que c’est une étape que vous êtes à l’aise de prendre seul. N’ayez crainte, car lorsque vous vous inscrivez aux trois plans d’hébergement WordPress gérés DreamPress de DreamHost, vous avez automatiquement accès à notre équipe d’élite d’experts WordPress entièrement internes, qui sont disponibles 24h/24 et 7j/7 pour vous aider à travers cela et tout autre composant de votre parcours de développement !