CSS personnalisé : Faut-il utiliser un thème enfant WordPress ou le Customizer ?

WordPress est un outil dynamiquement flexible qui peut être utilisé aussi bien par les développeurs Web experts que par les propriétaires de sites novices. Si vous ne trouvez pas le moyen de styliser quelque chose à votre goût, vous pouvez ajouter des styles personnalisés, également appelés CSS (Cascading Stylesheets) pour modifier l'apparence de votre site, de la mise en page et du positionnement aux couleurs, polices, etc.

Historiquement, les utilisateurs de WordPress ont utilisé des thèmes enfants pour personnaliser l'apparence d'un site Web WordPress. Un thème enfant hérite de toutes les qualités d'un thème parent, cependant, il en fait un peu plus. Au fur et à mesure que WordPress Customizer a été ajouté, il est devenu plus facile d'ajouter un peu de CSS pour effectuer certaines des mêmes choses que nous avons traditionnellement faites avec les thèmes enfants.

Quand utilisez-vous un thème enfant plutôt que d'ajouter simplement du CSS au personnalisateur ? Y a-t-il des cas où un plugin d'extrait de code a plus de sens ?

Dans cet article de blog, nous examinons la personnalisation de vos thèmes avec votre propre CSS de différentes manières et discutons du moment où il est judicieux d'utiliser une méthode plutôt qu'une autre. Mais d'abord, clarifions certains termes. Qu'est-ce que le personnalisateur, qu'est-ce qu'un thème enfant et quels plugins font également ces travaux ?

Qu'est-ce qu'un thème enfant ?

Un thème enfant est un thème WordPress qui hérite de toutes les qualités d'un autre thème WordPress. Le thème principal, le thème parent, peut être un thème commercial, un thème que vous avez développé vous-même ou l'un des thèmes gratuits du répertoire de thèmes WordPress.org. Et oui, vous pouvez créer un thème enfant de Kadence. Nous parlerons plus tard dans cet article de la question de savoir si vous n'en avez peut-être pas besoin ou des cas où vous pourriez le vouloir.

Pour créer un thème enfant, vous allez créer un répertoire séparé sous wp-content/themes/ au même niveau que le thème parent. En règle générale, il commencera par deux fichiers, style.css et functions.php, mais vous pouvez également ajouter de nombreuses autres personnalisations à un thème enfant que vous souhaitez. Nous avons un guide qui parle de la création de thèmes enfants si vous en avez besoin. Il existe un certain nombre de plugins qui créeront un thème enfant pour vous, et vous pouvez supprimer ces plugins de configuration de thème enfant une fois le thème enfant créé.

Pourquoi les gens utilisent-ils des thèmes enfants ?

Les utilisateurs de WordPress créent des thèmes enfants lorsqu'ils doivent apporter une modification au thème parent, mais ils souhaitent un processus de mise à niveau simple pour le thème parent.

Par exemple, vous souhaitez ajouter vos balises Google Analytics à l'en-tête de votre site, ou vous voulez vous assurer que tous les formulaires, images ou boutons sont stylisés d'une certaine manière, ou peut-être que vous apportez des personnalisations aux e-mails WooCommerce qui doivent être enregistré dans votre espace thématique.

Lorsque vous créez un thème enfant, toutes vos personnalisations sont enregistrées et protégées contre l'écrasement lorsque votre thème parent nécessite une mise à jour. Pour des raisons de sécurité et de fonctionnalité, il est toujours important de maintenir à jour les thèmes et les plugins. Mais vous ne voulez pas avoir à re-personnaliser votre thème chaque fois que votre thème nécessite une mise à jour, donc l'ajout de styles à un thème enfant est logique. De cette façon, le thème parent est mis à jour tandis que votre thème enfant reste le même.

Avez-vous besoin d'un thème enfant?

Dans l'histoire de WordPress, l'ajout d'un thème enfant a été l'une des personnalisations les plus importantes d'un nouveau site WordPress. Peu importe ce que vous faites avec WordPress, un thème n'a jamais été la solution ultime. Il y a eu historiquement deux raisons de créer un thème enfant.

1. Pour ajouter du CSS supplémentaire.
2. Pour ajouter des fonctions supplémentaires.

Historiquement, pour la plus grande personnalisation, un thème enfant a été le moyen le plus simple de le faire tout en préservant l'intégrité du thème parent. Mais beaucoup de choses ont changé avec l'ajout de WordPress Customizer.

Qu'est-ce que le personnalisateur ?

Lorsque vous consultez une page WordPress ou que vous publiez en tant qu'utilisateur connecté avec des droits d'édition ou d'administration, il existe une option dans la barre d'administration pour personnaliser WordPress. En cliquant dessus, il ouvre un cadre à deux fenêtres où il y a un personnalisateur à gauche et le site lui-même à droite.

Dans le personnalisateur, vous avez accès à tout ce qui peut être personnalisé pour un site particulier. Le noyau de WordPress ajoute quelques contrôles généraux, mais de nombreux thèmes, y compris Kadence, ajoutent également des options de configuration ici.

L'ajout du personnalisateur offre aux propriétaires de sites de nouvelles façons de définir n'importe quoi, y compris une option pour ajouter du CSS supplémentaire. Dans le passé, la seule façon d'appliquer du CSS supplémentaire à un site WordPress était de le faire via un thème enfant.

Les paramètres des couleurs, des polices et même des mises en page d'en-tête/pied de page peuvent tous être effectués avec le personnalisateur.

Le point de vue de Kadence sur les thèmes enfants, les personnalisateurs et les plugins

Kadence a adopté la position selon laquelle vous devriez pouvoir personnaliser autant que possible votre site WordPress via le Customizer. Il existe une variété de paramètres à votre disposition dans les options de personnalisation de Kadence, et vous pouvez même ajouter votre code Google Analytics via le personnalisateur à votre site sur le thème de Kadence en utilisant la version Kadence Pro.

Et si vous ajoutez des fonctions supplémentaires à votre site WordPress, le faire avec le plugin Code Snippets a été le moyen le plus simple de le faire pour la plupart des utilisateurs.

De cette façon, pour la plupart des utilisateurs de WordPress, Kadence a simplifié la façon dont des styles et des fonctionnalités supplémentaires sont ajoutés à WordPress, ce qui facilite grandement la gestion d'un site WordPress.

Cela étant dit, tous les sites WordPress ne sont pas identiques, tous les utilisateurs de WordPress ne sont pas identiques, et les besoins d'un site et de sa mise en œuvre peuvent être différents d'un autre. En outre, il existe une myriade de méthodes pour faire quelque chose avec WordPress.

Voici quelques éléments à prendre en compte lors de l'ajout de code personnalisé à votre site WordPress.

Quand devez-vous utiliser le personnalisateur

Si vous ajoutez simplement quelques lignes de code CSS, le personnalisateur sera votre meilleur pari. Vous pouvez facilement ajouter quelques lignes, publier et voir comment le CSS prend effet sur votre site WordPress directement dans la vue du personnalisateur.

Pour la plupart des propriétaires de sites, le personnalisateur est tout ce dont ils ont besoin.

Pour les utilisateurs de Kadence Pro, il existe des emplacements d'événements dans le personnalisateur pour ajouter des scripts d'en-tête, de pied de page et de balise de corps, donc même si vous utilisez Google Tag Manager, Google Analytics ou tout autre service nécessitant l'ajout de scripts personnalisés, le personnalisateur peut facilement accueillir vos personnalisations.

Quand devriez-vous utiliser le plugin Code Snippets

Si vous ajoutez simplement quelques lignes de code PHP, le plugin Code Snippets est un excellent moyen d'ajouter du code. Vous pouvez facilement activer et désactiver le code à l'aide du plugin pour tester et vous assurer que le code fonctionne correctement.

Dans l'exemple ci-dessus, du code a été ajouté à un site à l'aide d'extraits de code pour s'exécuter uniquement dans la zone d'administration afin que LearnDash et Elementor fonctionnent mieux ensemble pour l'édition de cours. Cela aurait également pu être fait avec un thème enfant, mais pour ce propriétaire de site, Code Snippets était une alternative plus simple.

Bien sûr, pour les minimalistes de plugins qui souhaitent exécuter leurs sites avec le moins de plugins possible, le plugin Code Snippets pourrait être un grand pas en avant. Équilibrer moins de plugins avec les fonctionnalités nécessaires est quelque chose qui doit être fait au cas par cas.

Quand utiliser un thème enfant

Si vous ajoutez plus de quelques lignes de code CSS ou si vous étendez les fonctionnalités du site avec du code PHP supplémentaire, un thème enfant peut être la meilleure solution. La zone CSS Customizer est plutôt petite, donc ajouter beaucoup de CSS là-bas pourrait être écrasant ou déroutant à gérer. Dans un cas comme celui-ci, un thème enfant sera plus simple. De plus, si vous ajoutez des fonctions personnalisées qui dépassent ce que le plugin Code Snippets peut facilement gérer, un thème enfant peut facilement le faire.

Un thème enfant vous permet d'ajouter plusieurs lignes de CSS et de les gérer avec le système de fichiers plutôt que d'avoir des CSS stockés dans la base de données et ajoutés à chaque page. Via un thème enfant, le CSS est chargé via un fichier style.css, qui peut être mis en cache par les navigateurs, ce qui améliore légèrement les performances. Si vous ajoutez pas mal de code personnalisé ou de fonctions personnalisées, un thème enfant est la meilleure solution.

Les problèmes de performance

Lorsque vous utilisez la fonction CSS supplémentaire du personnalisateur, les styles ajoutés ajouteront votre code en ligne dans une balise <style> en tête de chaque page. Cela signifie que si vous avez beaucoup de CSS, vous augmenterez la taille de toutes vos pages individuellement. Le navigateur du visiteur de votre site téléchargera plusieurs fois vos styles personnalisés.

D'autre part, si l'ajout de CSS à un fichier de feuille de style signifie que le navigateur doit télécharger une feuille de style supplémentaire, cela signifie également que le navigateur peut mettre le fichier en cache afin que les styles supplémentaires n'aient pas besoin d'être téléchargés à nouveau pour chaque page individuelle.

Problèmes d'entretien

L'ajout de CSS à des CSS supplémentaires signifie que vous devez utiliser l'éditeur dans le Customizer, qui est assez étroit et n'est pas bien adapté à de grandes quantités de CSS. Si vous les ajoutez dans une feuille de style, vous pouvez utiliser l'éditeur de texte de votre choix, à une taille plus confortable. Vous pouvez même utiliser l'éditeur de thème dans wp-admin pour modifier le fichier CSS directement dans le navigateur. Vous pouvez trouver l'éditeur de thème sous Apparence > Éditeur de fichier de thème . Assurez-vous de basculer vers le bon thème lors de l'édition, et nous vous recommandons fortement de faire une sauvegarde de votre site avant d'apporter des modifications à vos fichiers de thème enfant.

Modification de vos fichiers de thème

Nous vous recommandons fortement d'utiliser l'une de ces méthodes répertoriées au lieu de modifier vos principaux fichiers de thème parent, que vous utilisiez Kadence ou tout autre thème. La modification de vos fichiers de thème peut non seulement casser votre site, mais vous perdrez ces personnalisations lors de la prochaine mise à jour de votre thème.

Ou pire, lors de l'ajout ou de la modification de code dans vos fichiers de thème, vous serez amené à essayer de comprendre comment conserver vos personnalisations tout en mettant à jour votre thème pour de nouvelles fonctionnalités ou pour résoudre un problème de sécurité.

Conclusion

Nous espérons que cet aperçu des thèmes enfants a été utile pour comprendre quand utiliser un thème enfant, quand ne pas le faire, et de nouvelles façons de personnaliser votre site pour des performances optimales lors de l'ajout de personnalisations. Si toutes ces choses semblent trop importantes à considérer, vous êtes probablement très bien avec les outils du Customizer pour le moment.