Créez votre site WordPress avec Elementor.Découvrir Elementor Lien partenaire

LANGUES DE BLOGPASCHER

Archives par langue

Choisissez une archive disponible ou retrouvez les langues prévues pour les traductions.

Archives disponibles

Traductions prévues (32)
  • Englishanglais
  • Españolespagnol
  • Deutschallemand
  • Portuguêsportugais
  • Italianoitalien
  • Nederlandsnéerlandais
  • Polskipolonais
  • Українськаukrainien
  • Češtinatchèque
  • Slovenčinaslovaque
  • Hrvatskicroate
  • Românăroumain
  • Magyarhongrois
  • Ελληνικάgrec
  • Türkçeturc
  • العربيةarabe
  • עבריתhébreu
  • हिन्दीhindi
  • বাংলাbengali
  • ไทยthaï
  • Tiếng Việtvietnamien
  • Bahasa Indonesiaindonésien
  • 简体中文chinois simplifié
  • 日本語japonais
  • 한국어coréen
  • Danskdanois
  • Svenskasuédois
  • Norsknorvégien
  • Suomifinnois
  • Eestiestonien
  • Latviešuletton
  • Lietuviųlituanien

Apparence du site

Apparence et thèmes · intermediaire

Retrouver les réglages de theme.json ignorés par WordPress

Un réglage de theme.json ne s’applique pas dans WordPress ? Vérifiez le fichier chargé, son schéma, les styles enregistrés et le rendu du bloc concerné.

Identifier ce que WordPress semble ignorer

Vous modifiez theme.json et la palette reste identique, une option manque dans l’éditeur ou les liens conservent leur ancienne couleur. Ces symptômes correspondent à des contrôles différents. Le fichier peut manquer dans la livraison, utiliser une propriété incompatible ou fournir une valeur par défaut qu’une personnalisation remplace. Un style peut également être produit par WordPress et perdre face à une autre règle dans le navigateur.

Ce guide concerne une installation autohébergée sur laquelle vous pouvez examiner le thème actif et préparer une copie de travail. Un thème de blocs offre généralement l’écran Styles dans l’Éditeur de site. Le cœur utilise aussi theme.json dans certains thèmes classiques, mais leurs écrans et leur façon d’afficher les styles varient. Si vous ne gérez que le contenu, relevez le nom du thème et les éléments observés avant de demander une correction des fichiers.

Le résultat attendu doit être observable. Choisissez une option précise à retrouver dans l’éditeur ou un élément précis dont le style doit changer. Traitez ce cas avant de réviser toute la configuration. Cela permet de savoir quel changement a produit l’effet.

Construire un témoin dans l’éditeur et sur la page publique

Sur une copie privée représentative, repérez une page qui contient le bloc concerné. Notez la version de WordPress, l’éventuelle extension Gutenberg déjà active et le thème. Comparez l’éditeur utilisé par le problème avec la page publique. Un réglage d’interface et une déclaration CSS ne produisent pas le même résultat. Par exemple, masquer la couleur personnalisée dans le sélecteur peut laisser en place une couleur enregistrée dans un ancien bloc.

Pour un problème d’apparence, ajoutez sur la copie un bloc témoin de même type, sans couleur ni style choisi manuellement. Gardez l’ancien bloc comme comparaison. Cette lecture permet de distinguer les valeurs par défaut des attributs déjà enregistrés dans le contenu. N’utilisez pas un bloc d’un autre type pour conclure qu’une règle ciblée fonctionne partout.

  1. Notez le nom du réglage attendu et le type du bloc ou de l’élément visé.
  2. Relevez la valeur actuelle dans l’éditeur et le rendu de la page témoin.
  3. Conservez un exemplaire de la configuration active et des personnalisations de la copie.
  4. Prévoyez une seule modification par essai, avec une façon de rétablir l’état initial.

Ouvrir le fichier du thème réellement actif

Dans Apparence puis Thèmes, identifiez le thème actif pour le site concerné. Sur un multisite, faites cette lecture dans le tableau de bord du bon sous-site. Retrouvez son dossier dans le gestionnaire de fichiers ou le dépôt utilisé pour le déploiement. Le fichier attendu se nomme theme.json à la racine du thème, généralement sous wp-content/themes/nom-du-theme/. Un fichier placé sous templates ou dans le dossier d’une autre copie n’est pas le fichier racine du thème actif.

Pour un thème enfant, inspectez aussi le fichier du parent. Comparez la même propriété dans les deux fichiers. Le thème enfant peut apporter une valeur qui l’emporte sur celle du parent. Si vous déployez depuis une archive, ouvrez le fichier présent après livraison et comparez-le à celui que vous avez modifié. Une copie préparée localement peut être correcte sans avoir été publiée sur l’environnement que vous observez.

Ne corrigez pas le parent tiers en place. Quand le thème appartient à l’équipe, travaillez dans ses sources et déployez par son mécanisme habituel. Quand il vient d’un éditeur, privilégiez le fichier enfant maintenu ou le correctif officiel adapté.

Corriger la syntaxe avant de chercher une surcharge

Ouvrez le fichier de la copie dans un éditeur qui signale les erreurs JSON. Cherchez en priorité une virgule manquante entre deux propriétés, une virgule après la dernière entrée, des guillemets simples ou un commentaire ajouté dans le fichier. Vérifiez aussi que les objets et les tableaux sont correctement fermés. Le fichier doit rester du JSON ordinaire, même si votre éditeur accepte un format plus permissif dans ses propres fichiers.

Lisez la structure depuis la racine. Une clé qui apparaît deux fois au même niveau rend le résultat ambigu pour les outils qui lisent le fichier. Fusionnez les deux parties sous une clé unique. Évitez également d’ajouter une deuxième section settings pour reprendre un exemple trouvé ailleurs. Les autres valeurs du thème doivent rester dans l’objet déjà présent.

  1. Corrigez la première erreur signalée par l’analyseur et relisez le fichier en entier.
  2. Comparez la différence avec l’original pour vérifier qu’aucune section n’a disparu.
  3. Enregistrez dans la copie et vérifiez le témoin avant de modifier une autre valeur.
  4. Si la correction touche trop de lignes, repartez du fichier sauvegardé et reportez seulement le changement voulu.

Choisir le schéma qui correspond au WordPress cible

Un document peut être du JSON valide et contenir un chemin que WordPress ne connaît pas. Vérifiez la propriété dans la référence de la version du site et dans le schéma correspondant. Pour un thème distribué sur plusieurs versions, prenez aussi en compte la plus ancienne version prise en charge. Le schéma de développement peut déjà proposer une propriété absente d’un cœur installé sans Gutenberg.

La clé version indique le format des données. La version 3 a été introduite dans WordPress 6.6. Un fichier plus ancien peut continuer à fonctionner sur un cœur récent. Ne remplacez pas 2 par 3 pour débloquer une option sans lire les changements de format. Lorsqu’une migration est utile, préparez-la et contrôlez les différences de comportement sur la copie avant de l’inclure dans une livraison.

La clé $schema aide un éditeur compatible à proposer les bons types et noms. Elle ne donne aucune fonction supplémentaire au WordPress qui lit le fichier. Si la propriété souhaitée n’est disponible que sur une version plus récente, choisissez un réglage compatible avec l’installation ou préparez une mise à jour séparée. Vérifiez d’abord la compatibilité du thème et du reste du site.

Placer une option d’interface dans settings

L’exemple cible un thème dont le fichier utilise déjà la version 3. Il montre comment interdire le choix d’une couleur arbitraire dans les sélecteurs qui prennent en charge ce réglage. Le test est pertinent si cette option est visible au départ sur le bloc témoin. Contrôlez le sélecteur dans l’éditeur après avoir rechargé la page. Les couleurs prédéfinies et celles déjà enregistrées dans le contenu suivent leurs propres règles.

Reportez uniquement la clé custom sous settings.color dans le fichier existant. Conservez la palette et les autres propriétés. La valeur false est un booléen JSON et s’écrit sans guillemets. L’adresse de schéma sert ici d’exemple pour WordPress 6.6. Si votre projet cible une autre version, adaptez-la à sa référence.

Si la propriété existe déjà au niveau global, cherchez une valeur propre au bloc sous settings.blocks. Cette valeur peut expliquer pourquoi le contrôle reste disponible pour un seul type de bloc. Décidez si le changement doit être général ou limité à ce bloc. Réglez seulement ce périmètre, puis vérifiez également un bloc voisin qui devrait conserver son interface.

{
  "$schema": "https://schemas.wp.org/wp/6.6/theme.json",
  "version": 3,
  "settings": {
    "color": {
      "custom": false
    }
  }
}

Définir le style par défaut du bon élément

Lorsque le but est de changer la couleur des liens, placez la valeur dans styles. Le fragment suivant fixe une couleur de texte pour l’élément lien. Il convient à un témoin qui contient un lien ordinaire sans style local. Il ne vise pas le fond d’un bloc Bouton ni la couleur appliquée uniquement au survol. Choisissez une couleur qui reste lisible sur le fond du thème.

Dans le fichier existant, reportez seulement la propriété de texte sous styles.elements.link.color. Conservez les propriétés déjà définies pour les liens et les autres éléments. Après le déploiement sur la copie, inspectez le lien témoin et vérifiez la valeur calculée. Si un lien dans un autre bloc conserve une autre couleur, examinez la portée de ce bloc et ses attributs avant d’élargir la règle globale.

Si la valeur est générée et perd face à un sélecteur plus spécifique, modifier plusieurs fois le code de couleur ne résoudra pas le conflit. Identifiez la règle gagnante dans le navigateur et choisissez ensuite où doit vivre la valeur. Retirez la modification d’essai en restaurant la propriété d’origine.

{
  "version": 3,
  "styles": {
    "elements": {
      "link": {
        "color": {
          "text": "#24536e"
        }
      }
    }
  }
}

Examiner les Styles enregistrés pour le thème actif

Pour un thème de blocs, ouvrez Apparence puis Éditeur et entrez dans Styles. Inspectez la zone liée au symptôme. Pour les liens, ouvrez Couleurs puis l’élément correspondant. Pour un seul type de bloc, examinez aussi ses réglages dans la partie Blocs de Styles. Une valeur enregistrée à ce niveau peut prendre le dessus sur le fichier du thème. Relever la valeur affichée et son périmètre évite de réinitialiser des personnalisations utiles pour une seule différence.

Sur la copie, modifiez ou rétablissez la seule propriété en cause si l’écran le permet. Vérifiez aussi la présence d’un style appliqué au bloc depuis l’éditeur de la page. Un réglage global ne retire pas automatiquement ce que l’auteur a choisi dans le bloc. Si vous ne pouvez pas rétablir seulement la propriété, utilisez une copie disposant d’un état de référence ou une révision appropriée pour faire la comparaison.

  1. Relevez les choix existants dans Styles et dans le bloc témoin.
  2. Comparez la propriété dans la configuration du thème et dans l’interface.
  3. Décidez laquelle doit rester la référence pour le site.
  4. Vérifiez le témoin et un autre bloc après l’ajustement, puis remettez la valeur enregistrée si le résultat régresse.

Vérifier une variation de styles après sélection

Un thème peut proposer des variations sous forme de fichiers JSON dans son dossier styles. Dans l’Éditeur de site, l’utilisateur peut choisir une de ces variantes puis sauvegarder les Styles du site. La configuration effectivement utilisée peut donc inclure des choix issus d’une variation sélectionnée auparavant. Une simple modification du fichier qui propose cette variation ne remplace pas forcément les choix déjà enregistrés pour le thème.

Si l’écart concerne une installation qui utilise une variation, retrouvez le fichier qui propose celle-ci et comparez la même propriété dans le fichier racine, dans la variation et à l’écran Styles. Lisez aussi les surcharges du thème enfant si celui-ci est actif. La couleur qu’un site présente peut être intentionnelle même si la nouvelle valeur du fichier racine est valide.

Sur la copie, prévisualisez ou sélectionnez la variation adaptée, puis vérifiez les changements avant de sauvegarder. Ce choix peut modifier plusieurs styles à la fois. Si seul un réglage doit changer, modifiez-le à son niveau. Pour une comparaison temporaire, notez la variation d’origine et revenez à la version sauvegardée des Styles dès que vous avez identifié la source.

Suivre la règle CSS qui détermine la valeur finale

Ouvrez la page témoin et inspectez l’élément concerné dans les outils du navigateur. Consultez la propriété calculée, par exemple color pour le texte d’un lien. Revenez ensuite à la déclaration active et relevez son sélecteur et son origine. L’outil peut aussi montrer les déclarations qui s’appliqueraient mais perdent face à une autre. Cela distingue un style absent d’un style présent dont la priorité est insuffisante.

Si la règle du thème est absente, vérifiez la propriété et le niveau concernés, puis comparez avec un bloc sans personnalisation. Si elle est présente, identifiez le fichier, le style local ou le CSS supplémentaire qui l’emporte. Ajustez la source qui porte réellement la décision. Évitez d’ajouter une suite de règles !important, qui rendrait ensuite le réglage plus difficile à comprendre et à surcharger.

Un navigateur peut aussi recevoir une ancienne page ou d’anciennes ressources. Si la copie montre le changement et que le site public reçoit encore la version précédente, confirmez d’abord le fichier livré et la date de la réponse. Ensuite seulement, traitez le cache qui sert la version ancienne en visant l’URL touchée.

Vérifier la correction et garder un retour ciblé

La réparation est établie lorsque le témoin montre l’option ou le style attendu et que la cause identifiée explique la différence. Pour un réglage, contrôlez le sélecteur avec le profil et le type de bloc concernés. Pour un style, vérifiez la valeur calculée et le résultat visuel. Faites un essai sur une seconde page qui réutilise la même règle, puis vérifiez au moins un bloc qui devait conserver ses choix.

Un changement de fichier se retire en restaurant la version précédente du fichier concerné. Une personnalisation faite dans Styles se retire en rétablissant les valeurs notées ou, si l’écran et l’historique le permettent, en revenant à la révision pertinente. Regardez ce que cette révision change avant de l’appliquer. Restaurer les fichiers du thème ne rétablit pas à lui seul ce qui a été enregistré dans la base.

  1. Refaites le même relevé qu’au départ, dans l’éditeur et sur la page si les deux sont concernés.
  2. Comparez les pages voisines et les états utiles, comme le survol pour une couleur de lien.
  3. Si une personnalisation voulue disparaît, restaurez sa valeur et réduisez le périmètre du changement.
  4. Conservez la différence finale et le nom du fichier effectivement livré.

Documenter où chaque décision de style doit être modifiée

Décidez avec l’équipe quels réglages appartiennent au thème et lesquels restent à la main des personnes qui gèrent le site. Une valeur répétée dans le parent, l’enfant, la variation et Styles peut rester cohérente aujourd’hui, puis diverger à la prochaine livraison. Indiquez dans le dossier du thème le niveau à modifier pour le réglage corrigé et la version de WordPress sur laquelle il est prévu.

Gardez un exemple de bloc témoin pour les couleurs, espacements ou options qui structurent le design. Au prochain changement, comparez d’abord ce témoin avec le rendu précédent. Si le thème doit fonctionner sur plusieurs versions du cœur, vérifiez l’option sur la plus ancienne version annoncée et sur la version de déploiement. Le fait que l’éditeur de code reconnaisse une propriété ne suffit pas à couvrir les deux environnements.

Le fichier, l’Éditeur de site et l’inspecteur du navigateur suffisent à cette démarche. Les fonctions décrites font partie de WordPress et n’exigent aucun achat supplémentaire. Si vous devez transmettre le problème, joignez le chemin de la propriété, le fichier chargé, le type de bloc, la valeur calculée et la version du site. Ces éléments orientent la correction vers la bonne couche.

Notre méthode éditoriale

Ces guides peuvent aussi vous aider