Comment conserver le CSS personnalisé lors de la mise à jour d'un thème WordPress
Publié: 2022-05-05Les thèmes déterminent la mise en page et l'apparence des sites Web WordPress. Quel que soit le thème choisi, vous devrez peut-être le personnaliser un peu pour répondre à vos besoins spécifiques.
Une façon de personnaliser votre thème consiste à utiliser des feuilles de style en cascade (CSS). Ce langage de feuille de style populaire vous permettra de modifier presque tous les éléments de votre thème. Vous pouvez ajouter du CSS personnalisé à votre thème pour spécifier les couleurs d'arrière-plan, modifier la taille des polices, créer un espacement entre le contenu, repositionner les menus, etc. Cependant, le CSS personnalisé peut être supprimé la prochaine fois que vous mettez à jour votre thème.
Pourquoi les mises à jour de thème cassent le CSS personnalisé
Tous les thèmes ont un fichier style.css. Disponible dans le dossier du thème, il contient le CSS. Lorsque vous mettez à jour votre thème, vous en téléchargez une nouvelle version différente pour remplacer la version existante.
La mise à jour de votre thème supprimera le fichier style.css existant et le remplacera par un nouveau fichier style.css. Le nouveau fichier style.css ne contiendra aucun CSS personnalisé que vous auriez pu ajouter précédemment. Vous pouvez toujours rajouter le CSS personnalisé supprimé, mais le faire après chaque mise à jour de thème peut être fastidieux.
Ajouter au personnalisateur
Vous pouvez conserver le CSS personnalisé lors de la mise à jour de votre thème en l'ajoutant au personnalisateur. Le personnalisateur est un outil de personnalisation de thème dans le tableau de bord WordPress. Il comporte un champ "CSS supplémentaire". Plutôt que d'ajouter du CSS personnalisé directement au style.css de votre thème, vous pouvez l'ajouter à ce champ.
Le champ "CSS supplémentaire" a été introduit dans la version 4.7 de WordPress pour empêcher la suppression du CSS personnalisé lors des mises à jour du thème. Cela n'affecte pas le fichier style.css, ni aucun autre fichier du dossier de thème. Lorsque vous ajoutez du CSS personnalisé au personnalisateur via ce champ, il sera stocké dans la base de données de votre site Web. Vous pouvez ensuite mettre à jour votre thème tout en gardant le CSS personnalisé.
Pour accéder au personnalisateur, cliquez sur "Apparence" dans le tableau de bord WordPress et choisissez "Personnaliser". L'onglet "CSS supplémentaire" se trouve près du bas. Cliquer sur cet onglet affichera un champ dans lequel vous pourrez saisir un CSS personnalisé. La mise à jour de votre thème ne remplacera que les fichiers du dossier du thème. Il ne remplacera ni n'affectera la base de données de votre site Web, de sorte que le CSS personnalisé sera préservé.
L'ajout de CSS personnalisé au personnalisateur vous permet de le prévisualiser. Le personnalisateur a une fonction de prévisualisation intégrée pour toutes les modifications. Que vous définissiez de nouveaux widgets ou que vous ajoutiez du CSS personnalisé, le personnalisateur révélera à quoi ressemblera votre site Web. Vous pouvez ensuite choisir de procéder à la personnalisation en cliquant sur "Publier". Si votre site Web ne semble pas correct, vous pouvez modifier les options de personnalisation avant de le mettre en ligne. Quoi qu'il en soit, le personnalisateur affichera un aperçu de votre site Web avec le CSS personnalisé.
Créer un thème enfant
Une autre solution consiste à créer un thème enfant. Les thèmes enfants sont essentiellement des copies d'autres thèmes que vous pouvez personnaliser sans craindre de perdre vos modifications. Ce ne sont pas des copies complètes. Au lieu de cela, la plupart des thèmes enfants se composent de quelques fichiers de base, y compris un fichier style.css et un fichier functions.php.
Les thèmes enfants sont conçus pour hériter des propriétés d'un thème parent. Vous pouvez utiliser votre thème comme thème parent. Le thème enfant aura son propre dossier, qui contiendra son propre fichier style.css et son propre fichier functions.php. Le thème enfant, cependant, ne contiendra pas de fichier index.php, de fichier page.php, de fichier single.php ou d'autres fichiers de thème standard. Il tirera parti du thème parent pour ces propriétés.
Étant donné que les thèmes enfants ont leur propre fichier style.css, ils prennent en charge le CSS personnalisé. Plus important encore, les thèmes enfants conservent tous leurs CSS personnalisés lorsque leurs thèmes parents sont mis à jour. La mise à jour du thème parent n'affectera pas le fichier style.css du thème enfant. Pour savoir comment créer un thème enfant, rendez-vous sur developer.wordpress.org/themes/advanced-topics/child-theme. Alternativement, certains thèmes premium sont livrés avec un thème enfant.
Pour seulement quelques lignes de CSS personnalisé, vous voudrez peut-être l'ajouter au personnalisateur. Pour de plus grandes quantités de CSS personnalisées, la création d'un thème enfant en vaut probablement la peine. Un thème enfant vous fournira un fichier style.css séparé que vous pourrez personnaliser.
Vous pouvez même travailler hors ligne sur le fichier style.css du thème enfant, et comme il s'agit d'un fichier séparé, vous disposerez de beaucoup d'espace pour le CSS personnalisé. L'ajout de CSS personnalisé au personnalisateur vous limitera à un petit champ accessible uniquement en ligne. Le personnalisateur offre l'avantage d'un mode de prévisualisation, tandis qu'un thème enfant offre l'avantage d'un fichier style.css séparé.
Utiliser un plugin CSS personnalisé
Vous pouvez utiliser un plugin CSS personnalisé. Le plugin Simple Custom CSS, par exemple, fait exactement ce à quoi il ressemble : il vous permet d'ajouter facilement du CSS personnalisé à votre thème. Le CSS personnalisé ajouté au plugin remplacera le propre CSS de votre thème.
Une fois que vous avez activé le plugin Simple Custom CSS, vous devriez voir un nouvel onglet « Custom CSS » sous « Apparence » dans le tableau de bord WordPress. C'est ici que vous pouvez ajouter du CSS personnalisé. Lorsque vous mettez à jour votre thème, le CSS personnalisé sera conservé. La mise à jour de votre thème remplacera le fichier style.css du thème, mais le plugin remplacera le nouveau fichier style.css par votre CSS personnalisé.
Il existe également le plugin Simple Custom CSS et JS, qui prend en charge à la fois le CSS personnalisé et le JavaScript personnalisé. Vous pouvez l'utiliser pour créer un CSS personnalisé qui remplace le propre CSS de votre thème. Si vous ne voulez pas vous embêter avec la création d'un thème enfant, vous pouvez utiliser un plugin CSS personnalisé. Le téléchargement d'un plugin CSS personnalisé est un moyen simple de conserver le CSS personnalisé lors des mises à jour du thème.
Conclusion
C'est frustrant de perdre le CSS personnalisé après la mise à jour d'un thème. Même si vous avez enregistré le CSS personnalisé localement sur votre ordinateur, vous devrez revenir en arrière et l'ajouter. Vous pouvez conserver le CSS personnalisé de votre thème en utilisant le personnalisateur dans le tableau de bord WordPress, en créant un thème enfant ou en utilisant un plugin CSS personnalisé.
