Styles WordPress perdus après un changement de thème : les récupérer et les adapter

Distinguer un style disparu d’un style devenu incompatible

Après un changement de thème, une couleur, une bordure ou une disposition personnalisée ne s’applique plus. Le CSS peut encore être conservé avec l’ancien thème sans être utilisé par le nouveau. Il peut aussi être chargé, mais viser des éléments que le nouveau thème ne produit plus. Le résultat recherché est de retrouver les réglages utiles, puis de les adapter à la structure actuelle.

Un thème apporte son apparence, ses blocs de structure et ses propres choix de styles. Changer de thème ne transfère pas automatiquement toutes les personnalisations de l’ancien. Une règle qui visait son en-tête ou une classe particulière peut ne plus correspondre à rien. Recopier l’ensemble de son CSS risque alors d’ajouter des effets indésirables.

Préparez le nom de l’ancien thème, celui du nouveau et deux pages témoins. Conservez une sauvegarde de l’état actuel et travaillez d’abord sur une copie. Le site public n’a pas besoin de revenir provisoirement à l’ancien thème pour effectuer la recherche.

Choisissez un élément précis dont le style manque.
Notez son ancien rendu et le résultat voulu avec le nouveau thème.
Relevez les noms des thèmes, y compris les thèmes enfants éventuels.
Gardez une sauvegarde et une copie du CSS actuellement présent.
Séparez la récupération de l’ancien code et la décision de le réappliquer.

Choisir entre réglage natif, adaptation du CSS et stockage indépendant

Commencez par les réglages du nouveau thème et du bloc. Si la couleur ou la bordure voulue existe dans ses commandes natives, la remettre directement peut être plus simple que reprendre une ancienne règle. Ce premier choix ne demande aucune extension.

Le deuxième parcours récupère le CSS ancien puis adapte une petite règle au bon élément. Il convient lorsque le besoin reste pertinent et ne trouve pas de réglage équivalent. Un exemple limité à un paragraphe permet de vérifier la portée avant de traiter une série de personnalisations.

Le troisième parcours propose un stockage indépendant du thème avec une extension dédiée. Il peut servir si vous maintenez des styles liés à des composants stables, par exemple votre propre classe éditoriale. Il ne rend pas universels les sélecteurs d’un thème particulier et ne reconstitue pas les règles perdues.

Vérifiez d’abord si le nouveau bloc ou thème propose le réglage attendu.
Si une règle reste nécessaire, retrouvez sa source et testez-la isolément.
Adaptez le sélecteur à la structure actuelle.
Choisissez un emplacement de conservation unique.
N’utilisez une extension que si son indépendance au thème répond à votre organisation.
Contrôlez une page cible et une page qui ne doit pas changer.

Retrouver l’ancien CSS dans une copie

Cette démarche convient à un administrateur disposant de l’ancien thème et d’une copie sauvegardée. Sur cette copie seulement, ouvrez Apparence → Thèmes et activez l’ancien thème pour consulter ses personnalisations. Notez le thème initial de la copie avant l’essai. Les fichiers de l’ancien thème peuvent devoir être récupérés depuis votre sauvegarde s’ils ont été retirés.

Pour un thème classique, ouvrez Apparence → Personnaliser → CSS additionnel. Pour un thème de blocs, examinez Apparence → Éditeur → Styles, puis le menu à trois points et CSS additionnel. Conservez aussi le relevé des réglages visuels qui n’étaient pas écrits sous forme de CSS.

Le résultat attendu est une copie locale du code et de son contexte, pas la remise en ligne de l’ancien design. Un champ vide ne prouve pas que toutes les personnalisations sont perdues : elles peuvent se trouver dans un thème enfant, un constructeur ou une extension.

Confirmez le domaine de la copie et son thème actif.
Activez l’ancien thème sur cette copie.
Ouvrez son emplacement de CSS additionnel et copiez le contenu sans le modifier.
Notez les réglages natifs utiles et la source de chaque règle.
Revenez au thème initial de la copie après la consultation.
Conservez les deux états et poursuivez l’adaptation avec le nouveau thème.

Lire le CSS classique enregistré sans réactiver le thème

Ce contrôle facultatif s’adresse au technicien qui dispose déjà de WP-CLI et d’un accès autorisé à la copie. WordPress permet de lire le CSS additionnel classique pour un identifiant de thème donné. Il faut son identifiant de stylesheet, généralement le nom du dossier du thème actif à l’époque, et non simplement son titre commercial.

Remplacez l’adresse d’exemple et ancien-theme-enfant par les valeurs vérifiées. Exécutez la commande depuis la bonne installation. Elle affiche le CSS obtenu pour cet identifiant ; des filtres du site peuvent agir sur cette sortie. Elle ne retrouve pas automatiquement les styles globaux d’un thème de blocs ni le code conservé dans une extension.

Le résultat attendu est un contenu à sauvegarder localement pour l’examiner. La commande ne réactive aucun thème et ne modifie aucune option. Une sortie vide ne suffit pas à prouver une suppression : vérifiez l’identifiant et les autres emplacements de stockage. Aucun réglage n’est à annuler pour cette lecture.

Confirmez le dossier de l’installation et l’adresse de la copie.
Retrouvez l’identifiant exact de l’ancien thème ou thème enfant.
Lancez la commande avec ces valeurs.
Conservez le résultat dans vos notes locales autorisées.
Comparez-le à votre sauvegarde et à l’emplacement où le CSS avait été saisi.

wp --url="https://copie.exemple.fr" eval "echo wp_get_custom_css( 'ancien-theme-enfant' );"

Recréer un réglage natif plutôt que conserver une règle devenue inutile

Le nouveau thème peut proposer directement la couleur, la bordure ou l’espacement autrefois obtenus par du CSS. Sélectionnez le bloc concerné dans l’éditeur et ouvrez ses réglages. Les panneaux disponibles varient selon le bloc et les fonctions prévues par le thème. Un contrôle natif peut suffire sans reprendre une ancienne règle.

Commencez par le bloc individuel. Le panneau Styles → Blocs de l’éditeur du site règle généralement tous les blocs d’un type ; choisissez cette portée seulement si elle correspond au besoin. Une personnalisation locale et une définition globale ne doivent pas être empilées sans raison.

Le résultat attendu est un rendu obtenu avec une source unique. Gardez la règle ancienne dans votre archive, mais retirez son éventuelle copie active après avoir confirmé que le réglage natif la remplace. Pour annuler, rétablissez la valeur relevée et l’unique règle nécessaire.

Sur la copie, sélectionnez le bloc visé.
Ouvrez ses réglages de styles, couleurs, bordure ou dimensions selon le besoin.
Notez la valeur initiale et modifiez une seule propriété.
Enregistrez puis contrôlez le rendu public.
Vérifiez une autre page utilisant le même type de bloc.
Si le réglage natif convient, supprimez uniquement la règle active devenue redondante, après l’avoir conservée localement.

Récupérer les règles d’un ancien thème enfant sans changer son parent

Si les personnalisations étaient écrites dans un thème enfant, le changement de thème peut simplement arrêter leur chargement. Retrouvez d’abord une copie de ses fichiers. Le fichier wp-content/themes/ANCIEN-THEME-ENFANT/style.css constitue une piste, mais le code peut aussi résider dans un autre fichier chargé par ses fonctions. Remplacez le nom indicatif par le dossier vérifié.

Un ancien thème enfant dépend de son parent. Le rattacher arbitrairement au nouveau thème ne transpose pas sa structure ni ses fonctions. Ne copiez pas non plus son fichier de fonctions entier dans un autre thème pour retrouver quelques couleurs.

Pour quelques styles utiles, conservez le fichier source puis reprenez les seules règles adaptées dans le CSS additionnel du nouveau thème, selon le parcours précédent. Le résultat attendu est une personnalisation limitée et lisible, sans dépendance cachée envers le thème précédent. Pour annuler, retirez les seuls fragments transférés.

Accédez aux fichiers de la sauvegarde ou de la copie avec les droits autorisés.
Retrouvez le dossier réel de l’ancien thème enfant.
Lisez sa feuille de styles et les références aux autres fichiers CSS.
Copiez seulement la règle utile dans vos notes, avec sa provenance.
Adaptez son sélecteur puis testez-la dans l’emplacement natif du nouveau thème.
Gardez les fichiers d’origine intacts ; une migration de thème enfant complet constitue un travail distinct.

Conserver un petit CSS indépendant du thème

Simple Custom CSS and JS, publié par SilkyPress, peut conserver des extraits indépendamment du thème. Cette option convient à des règles que vous maintenez volontairement hors de celui-ci. Elle ne retrouve pas le code ancien et ne corrige pas les sélecteurs devenus incompatibles. Commencez avec les fonctions gratuites de CSS simple ; ce parcours ne nécessite pas de fonction payante.

Un administrateur autorisé peut l’essayer sur une copie sauvegardée après comparaison des prérequis de sa fiche avec l’installation. Le menu documenté est Custom CSS & JS → Add Custom CSS. Les captures officielles montrent les choix Internal, Header et In Frontend. L’activation peut aussi créer un rôle Web Designer ; gardez la gestion des extraits entre les mains des comptes prévus.

Le résultat attendu est l’application du seul extrait publié sur le site public. Pour annuler, mettez uniquement ce nouvel extrait dans la corbeille depuis All Custom Code, sans désactiver globalement d’autres styles utiles.

Dans Extensions → Ajouter une extension, recherchez le nom exact et vérifiez SilkyPress.
Installez et activez l’extension sur la copie si elle est compatible.
Ouvrez Custom CSS & JS → Add Custom CSS et donnez un titre descriptif.
Collez uniquement le fragment validé, sans balise de style.
Choisissez Internal, Header et seulement In Frontend pour ce besoin public.
Publiez l’extrait puis vérifiez la page cible et la page témoin.
Si vous retenez cet emplacement, retirez la copie active de la même règle ailleurs pour éviter un double chargement.

Éviter les doublons et les règles héritées du mauvais thème

Après récupération, une même personnalisation peut se retrouver dans plusieurs emplacements : CSS additionnel, extrait d’extension et fichier du thème enfant. Le résultat peut varier selon l’ordre de chargement ou la priorité des sélecteurs. Conservez un seul emplacement actif pour chaque règle que vous maintenez.

N’importez pas tout le CSS de l’ancien thème comme s’il s’agissait d’une couche autonome. Certaines règles supposent ses classes, ses variables, ses dimensions ou ses images. Une règle devenue inutile peut aussi viser accidentellement un élément différent du nouveau thème. Réintroduisez les personnalisations par petits groupes compréhensibles.

Le résultat attendu est de savoir quelle règle produit chaque effet. Si une ancienne copie reste visible, contrôlez le cache réellement utilisé après avoir confirmé l’enregistrement du CSS. L’option Internal de l’extension place le style dans la page ; elle ne supprime pas le cache de cette page.

Listez les emplacements où la règle se trouve encore.
Choisissez celui qui doit être maintenu.
Conservez les copies inactives dans votre archive locale.
Retirez une seule copie active redondante à la fois.
Rechargez la page et vérifiez les valeurs calculées.
Rétablissez la copie retirée si elle était nécessaire à un autre contexte, puis séparez les règles plutôt que multiplier les priorités.

Tenir compte de WordPress.com et des permissions du réseau

Sur WordPress.com, l’accès au CSS personnalisé dépend de l’offre et des fonctions activées. L’aide consultée le prévoit pour les offres Personal, Premium, Business et Commerce. Avant d’acheter quoi que ce soit, vérifiez si le réglage natif du bloc répond déjà au besoin et si l’accès au CSS est disponible dans votre compte.

Le chemin dépend aussi du thème : Styles dans l’éditeur du site ou CSS additionnel dans Personnaliser. Un code conservé dans l’historique ne signifie pas qu’il est appliqué dans les conditions actuelles. Reprenez la règle et son contexte avant d’en faire une nouvelle version.

En multisite, le droit de gérer le site ne donne pas automatiquement toutes les permissions de code ou d’installation d’extensions. Faites effectuer la consultation ou l’essai par le compte autorisé, sans distribuer ses identifiants. L’autorisation d’une extension pour un site doit rester conforme à la politique du réseau.

Vérifiez le site, le compte et les fonctions réellement accessibles.
Essayez d’abord le réglage visuel équivalent si vous ne pouvez pas ajouter de CSS.
Si le CSS est disponible, utilisez l’emplacement adapté au thème actif.
En réseau, confirmez qui peut gérer les extraits et leur portée.
Ne changez pas d’offre ou de rôle uniquement à partir d’un style absent.

Valider la reprise et conserver une migration lisible

Le bon résultat n’est pas le retour automatique de tout l’ancien design. Les personnalisations utiles doivent fonctionner dans le nouveau thème, avec une portée claire et sans dégrader les autres pages. Vérifiez au moins une page qui porte la classe et une autre qui ne doit pas être touchée.

Contrôlez aussi les petites largeurs, les liens et le contraste des textes si les règles concernent ces éléments. Un espacement fixe qui convenait à l’ancien thème peut être inadapté au nouveau. Retirez les règles abandonnées seulement après avoir gardé leur copie et leur raison d’être.

Gardez une note avec le sélecteur, la propriété modifiée, l’emplacement actif et les pages vérifiées. Ajoutez les anciens et nouveaux noms de thème. Lors d’un prochain changement, cette trace permettra de distinguer ce qui est lié au design du thème et ce qui correspond à une personnalisation éditoriale indépendante.

Ouvrez la page cible dans une session déconnectée.
Vérifiez la règle et son origine dans les outils du navigateur si nécessaire.
Contrôlez la page témoin et un écran plus étroit.
Confirmez qu’une seule copie active de la règle subsiste.
Retirez les classes et extraits de test devenus inutiles.
Conservez le CSS d’origine, le contenu actuel et les étapes de retour arrière avant toute mise en production décidée séparément.

Retrouver la cible de chaque règle

Un sélecteur CSS désigne les éléments auxquels une règle s’applique. Une classe propre à l’ancien thème peut avoir disparu du nouveau code de page. Dans ce cas, le CSS peut être chargé correctement sans produire d’effet. Inspectez l’élément actuel dans le navigateur avant de modifier les priorités des règles.

Dans Chrome, faites un clic droit sur l’élément puis Inspecter. Le panneau Elements montre ses classes ; Styles et Computed permettent de voir les règles candidates et les valeurs retenues. Relevez aussi si une règle est barrée parce qu’une autre l’emporte. Ajouter systématiquement une priorité forcée ne répare pas un sélecteur qui ne correspond plus à rien.

Le résultat attendu est une correspondance entre la règle utile et une cible actuelle. Pour un besoin éditorial local, une classe que vous attribuez vous-même au bloc est souvent plus facile à suivre qu’une ancienne chaîne de classes du thème. Gardez son usage limité aux blocs voulus.

Choisissez une règle et l’élément auquel elle était destinée.
Inspectez cet élément dans le nouveau thème.
Comparez son balisage aux classes de la règle ancienne.
Vérifiez si la règle manque, ne correspond plus ou est remplacée par une autre.
Adaptez seulement cette cible sur la copie.
Rechargez après les essais temporaires du navigateur pour revenir à l’état enregistré.

Tester une classe locale dans le CSS additionnel du nouveau thème

L’exemple suivant ajoute une bordure à un paragraphe précis. Il sert à vérifier la chaîne complète : classe présente, CSS enregistré et règle appliquée. Vous pourrez remplacer les valeurs par celles de votre besoin, après ce contrôle. Il ne reconstitue pas automatiquement l’ancien en-tête ou les mises en page du thème précédent.

Dans l’éditeur de la page sur la copie, sélectionnez le Paragraphe, ouvrez ses Réglages → Avancé et ajoutez avis-editorial au champ Classes CSS additionnelles. Saisissez le nom sans point, en conservant les classes déjà utiles. Enregistrez la page.

Ajoutez ensuite le code dans le CSS additionnel du site : Apparence → Personnaliser → CSS additionnel pour un thème classique, ou Apparence → Éditeur → Styles → menu à trois points → CSS additionnel pour un thème de blocs. Ce n’est pas le champ limité à tous les blocs d’un type. Conservez le CSS existant avant l’ajout.

Le résultat attendu est une bordure uniquement sur les blocs portant cette classe. Pour annuler, retirez le fragment ajouté et la seule classe d’essai, puis enregistrez.

Sur la copie, ajoutez la classe au paragraphe témoin.
Ouvrez le CSS additionnel du nouveau thème et conservez son contenu actuel.
Ajoutez le fragment sans balise HTML autour.
Enregistrez puis consultez la page publique.
Vérifiez une page qui ne porte pas la classe.
Si le test fonctionne, adaptez ensuite les seules propriétés nécessaires.

.avis-editorial {
  border-inline-start: 4px solid #334155;
  padding-inline-start: 1rem;
}

Comparer la règle chargée et la classe réellement présente

Sur une copie WordPress, le CSS additionnel d’un ancien thème enfant donnait une bordure de quatre pixels à un paragraphe. Après activation du nouveau thème, la bordure avait disparu. La commande de lecture a retrouvé le CSS associé à l’ancien identifiant pendant que le nouveau thème restait actif.

Avant de transférer une règle en production, consignez son ancien emplacement, son nouveau sélecteur et la zone qui doit changer. Le résultat attendu est une règle utile sur la page cible avec une source identifiable et un retour arrière limité.

Sur le nouveau thème, vérifiez si la règle retrouvée correspond encore à l’élément. Dans la recette, la copie brute restait sans effet car son sélecteur dépendait d’une classe du conteneur ancien.
Sur la copie, adaptez la règle à une classe stable du paragraphe. La bordure de quatre pixels est revenue avec la règle de la section précédente. Un autre paragraphe doté de son propre espacement a conservé cet espacement.
Retirez la seule règle ajoutée. La bordure d’essai disparaît et les autres réglages restent. Rouvrez l’ancien thème sur la copie si vous devez vérifier la provenance du CSS. Dans la recette, ses réglages se sont appliqués de nouveau.

Notre méthode éditoriale