Si vous avez installé un thème WordPress mais qu’il n’est pas tout à fait approprié pour vous, vous vous sentez peut-être frustré. Il y a beaucoup d’options disponibles pour personnaliser votre thème WordPress.
Le défi consiste à trouver la bonne façon de le faire.
Dans cet article, je vais vous guider à travers les options de personnalisation de votre thème WordPress, vous aider à choisir celui qui vous convient et vous montrer comment le faire de manière sûre et efficace.
Vous préférez regarder la version vidéo ?
Options pour Personnaliser un Thème
Avant de plonger et de commencer à modifier votre thème, il est utile de comprendre quelles sont les options qui s’offrent à vous, car elles conviennent à différentes situations.
Voici un aperçu des options qui s’offrent à vous :
- Si vous voulez ajouter des fonctionnalités à votre thème, installez une extension.
- Utilisez l’outil de personnalisation dans les écrans d’administration de WordPress pour personnaliser les polices, les couleurs et peut-être aussi la mise en page, en fonction de votre thème.
- Si vous travaillez avec un thème avec un constructeur de page, utilisez ses fonctionnalités pour personnaliser le design de votre site.
- Si vous avez installé un thème framework, utilisez l’un des thèmes enfants disponibles pour personnaliser votre site, ainsi que toutes les options de personnalisation viables propres aux écrans d’administration.
- Si votre thème est spécifique à votre site et que vous êtes à l’aise pour le faire, modifiez directement le code du thème.
- Si vous voulez modifier le code d’un thème tiers, créez un thème enfant.
Si vous souhaitez modifiez le code, vous disposez d’un certain nombre d’options, notamment l’utilisation de l’éditeur de blocs, de l’outil de personnalisation, en passant par la modification des fichiers. Nous les examinerons tous dans cet article, mais commençons par l’option la plus simple : installer une extension.
Avez-vous Vraiment Besoin de Personnaliser Votre Thème ?
Parfois, vous n’avez pas besoin de personnaliser votre thème du tout : au lieu de cela, vous devez installer une extension.
Les thèmes dictent la conception de votre site : son apparence et la façon dont il affiche le contenu (utilisez notre outil de détection des thèmes pour identifier le thème sous-jacent d’une conception qui vous plaît). Les extensions ajoutent des fonctionnalités supplémentaires.
Si les changements que vous voulez faire sont axés sur la fonctionnalité plutôt que sur le design, pensez à installer une extension vous-même. Il peut s’agir d’une extension que vous devez écrire, d’une extension que vous téléchargez à partir du répertoire de l’extension ou d’une extension que vous achetez.
Si vous voulez modifier le fichier functions.php dans votre thème, demandez-vous :
Voudrais-je conserver cette fonctionnalité si je changeais de thème à l’avenir ?
Si la réponse est oui, ce code devrait aller dans une extension, pas dans votre thème.
De bons exemples de ce que vous utiliseriez une extension au lieu d’un thème, y compris l’ajout de widgets, l’enregistrement de types de publication personnalisés et de taxonomies, en créant des champs personnalisés et en ajoutant des fonctionnalités supplémentaires telles que des améliorations SEO.
Personnalisation de Votre Thème WordPress via les Écrans d’Administration WordPress
Si les modifications que vous souhaitez apporter sont relativement simples et axées sur le design, vous pouvez les effectuer via les écrans d’administration. L’outil de personnalisation vous offre une variété d’options pour ajuster votre thème : ce qui est à votre disposition dépendra de votre thème. Et vous pouvez voir quelque chose appelé Éditeur de thème dans le menu Apparence. Évitez cela, pour des raisons que je décrirai plus loin.
Personnalisation de Votre Thème à l’Aide de la Personnalisation
La façon la plus simple de personnaliser votre thème WordPress est d’utiliser la personnalisation de WordPress.
Vous pouvez y accéder de deux façons :
- Lorsque vous consultez votre site (lorsque vous êtes connecté), cliquez sur le lien Personnaliser dans la barre d’administration en haut de l’écran.
- Dans les écrans d’administration, cliquez sur Apparence > Personnaliser.
Vous accédez alors à l’outil de personnalisation
Dans la capture d’écran ci-dessus, j’ai installé un thème gratuit appelé ColorMag qui offre de nombreuses options de personnalisation. Des sections ont été ajoutées à la personnalisation pour des fonctions de conception, y compris une image d’en-tête, des réseaux sociaux, des couleurs de catégories et un onglet Options de design qui vous amène à d’autres onglets où vous pouvez apporter des modifications à la mise en page et à la conception de votre site.
Différents thèmes ont différentes options de personnalisation, mais les thèmes plus récents semblent en ajouter de plus en plus. Si vous trouvez un thème qui vous plaît mais qui ne vous convient pas, vous trouverez peut-être que le fait de le personnaliser vous donne exactement le design et la mise en page dont vous avez besoin.
L’Éditeur de Thème (et Pourquoi Ne Pas l’Utiliser)
Dans vos écrans d’administration, vous remarquerez peut-être une option appelée Éditeur de thème, où vous pouvez accéder via Apparence > Éditeur de thème.
Cela vous donne accès aux fichiers de votre thème, ce qui signifie que vous pouvez les modifier directement.
Ne faîtes pas ça.
Même si vous êtes à l’aise avec l’écriture CSS ou PHP, modifier comme ceci les fichiers dans votre thème est une très mauvaise idée, pour deux raisons :
- Si vous avez acheté ou téléchargé un thème tiers, toutes les modifications que vous apporterez seront perdues la prochaine fois que vous mettrez à jour le thème (et vous devriez garder votre thème à jour pour des raisons de sécurité).
- Plus important encore, si vous faites un changement qui casse votre site, il ne sera pas suivi et la version précédente du fichier ne sera pas modifiée. Vous pourriez irrévocablement casser le site.
Si vous voulez modifier le code de votre thème, vous devriez le faire en utilisant un éditeur de code (consultez les meilleurs éditeurs HTML gratuits), et vous ne devriez pas éditer les fichiers de votre site en direct avant de l’avoir testé sur un site de test. Si vous devez modifier un thème tiers, vous devez le faire via un thème enfant. Nous reviendrons sur ces deux points plus loin dans cet article.
WordPress sait combien il est dangereux d’utiliser l’éditeur de thème : il vous donne même un avertissement lorsque vous essayez d’y accéder.
Alors suivez le conseil de WordPress : n’utilisez pas l’éditeur de thème !
Utilisation de Constructeurs de Page et des Frameworks pour Personnaliser Votre Thème WordPress
Une grande partie des thèmes WordPress ont des options de personnalisation, ce qui signifie que vous pouvez apporter des modifications au design et à la mise en page via l’outil de personnalisation.
Mais certains thèmes vont plus loin et sont conçus pour être étendus et personnalisés de manière significative. Ces thèmes sont appelés des thèmes frameworks.
Une autre option est d’utiliser une extension qui vous permet de concevoir votre site à l’aide d’une interface conviviale : ce sont les constructeurs de pages.
Utilisation d’un Constructeur de Pages pour Personnaliser Votre Thème
Les extensions de construction de page sont conçus pour vous permettre de définir facilement le design de votre site, en utilisant une interface qui vous permet de voir ce que vous obtenez.
Vous installez une extension de construction de page avec un thème compatible, puis utilisez les options qu’il vous offre pour concevoir votre site exactement comme vous le souhaitez.
L’un des constructeurs de pages les plus connus est Elementor, mais vous pouvez trouver d’autres solutions de rechange dans notre rassemblement des constructeurs de pages.
Les constructeurs de pages vous permettent de modifier vos articles et vos pages avec une interface en glisser-déposer, ce qui signifie que vous pouvez voir à quoi ressemblera votre contenu et rendre chaque page unique.
Ci-dessous, j’utilise le constructeur de page Elementor avec le thème Hello Elementor, qui est compatible avec lui.
Les constructeurs de pages vous donnent beaucoup de flexibilité dans la mise en page et la conception de vos pages. Si vous avez l’habitude d’un constructeur de site web comme Wix, ils peuvent aider à faciliter la transition vers WordPress. Et si vous préférez une interface WYSIWYG pour votre contenu WordPress, ils peuvent vous aider à concevoir vos pages rapidement.
Utilisation d’un Thème Framework pour Personnaliser Votre Thème
Une alternative aux constructeurs de pages est les thèmes frameworks. Ce sont des ensembles de thèmes conçus pour travailler ensemble. Il y a un thème parent qui est le framework, et un choix de thèmes enfants que vous pouvez utiliser pour personnaliser le thème principal et le transformer comme vous le souhaitez.
Un exemple de thème framework est Divi, qui possède des options de personnalisation qui vous permettent d’affiner encore plus le design de votre thème enfant, y compris une interface en glisser-déposer similaire à celles des constructeurs de pages.
Lecture recommandée : Divi vs Elementor : Comparaison des extensions WordPress de constructeur de pages
Modification du Code de Votre Thème WordPress
Si vous êtes à l’aise pour modifier du CSS et/ou du PHP, alors vous pouvez modifier le code dans votre thème pour personnaliser votre thème.
Cela vous donne le plus grand degré de contrôle.
Si vous modifiez votre propre thème, qui est spécifique à votre site et a été développé spécialement pour lui, alors vous pouvez faire des modifications directement dans le thème. Mais si vous travaillez avec un thème tierce partie et que vous voulez modifier ce thème, vous devez créer un thème enfant pour éviter la perte de vos modifications la prochaine fois que vous mettrez à jour le thème.
Modification des Fichiers du Thème
La première étape pour modifier votre thème WordPress est de comprendre quels fichiers du thème contrôlent quoi, et lesquels vous devrez modifier.
La Feuille de Style
Chaque thème WordPress a une feuille de style, appelée style.css. Elle contient tout le code de style de votre site : mise en page, polices, couleurs, et plus encore.
Si vous voulez changer les couleurs de votre thème, par exemple, vous pouvez modifier la feuille de style. Si vous voulez ajouter une nouvelle police, vous pouvez utiliser la feuille de style pour l’appliquer à différents éléments tels que le corps du texte et les titres.
Faites attention lors de la modification de la feuille de style : la spécificité signifie que le code d’un élément ne vient pas toujours de l’endroit où vous pensez qu’il est. Les éléments hériteront du style des autres éléments qui sont au-dessus d’eux dans la hiérarchie de la page à moins que vous n’ajoutiez un style spécifique à l’élément inférieur.
Pour découvrir quel CSS affecte quels éléments de la page, vous pouvez utiliser l’inspecteur de votre navigateur pour afficher le CSS (Chrome DevTools dans cet exemple) :
Vous pouvez ensuite l’utiliser pour écrire un nouveau CSS qui cible des éléments individuels ou une série d’éléments ou de classes sur la page.
Si toutes ces discussions sur les éléments, les classes et la spécificité sont nouvelles pour vous, vous voudrez peut-être éviter de modifier directement le CSS de votre thème. Au moins jusqu’à ce que vous ayez pu en savoir plus sur le CSS et son fonctionnement.
Le Fichier de Fonctions
Un autre fichier que presque tous les thèmes auront est le fichier de fonctions (functions.php). C’est le fichier qui fait fonctionner un tas de choses dans votre thème. À l’intérieur, vous pouvez trouver du code pour enregistrer les caractéristiques des thèmes comme les images mises en avant, les widgets, et plus encore.
Si vous êtes tenté d’ajouter du code fonctionnel à votre thème, c’est ici que vous l’ajouterez. Mais attention : dans la plupart des cas, vous devriez vraiment écrire une extension. Demandez-vous :
Voudrais-je conserver cette fonctionnalité si je changeais de thème à l’avenir ?
Si la réponse est oui, créez une extension au lieu d’ajouter du code dans le fichier des fonctions. Les extensions n’ont pas besoin d’être grosses : rien ne vous empêche d’en créer une pour quelques lignes de code.
Le fichier de fonctions est entièrement rédigé en PHP, donc vous devez être familier avec. Ne copiez pas aveuglément le code que vous trouvez via une recherche Google : prenez le temps de comprendre ce que fait ce code. De cette façon, vous êtes moins susceptible d’ajouter du code qui n’est pas aussi bon qu’il devrait l’être.
Les Fichiers Modèles de Thèmes
La plupart des fichiers d’un thème sont des fichiers de modèle de thème. Ce sont des fichiers qui déterminent quel contenu WordPress sort sur une page donnée et qui sont choisis en fonction de l’attribut hiérarchie de modèles.
Si vous voulez changer la façon dont le contenu est édité sur un type de publication, une page ou une archive donnée, vous devrez soit modifier un de ces fichiers, soit en créer un nouveau.
Par exemple, disons que votre thème a un fichier archive.php qui est utilisé pour produire des pages d’archives pour les catégories et les étiquettes. Vous voulez apporter des modifications à la façon dont les étiquettes sont affichées. Vous créez donc un fichier appelé « tag.php », qui serait basé sur archive.php avec vos réglages.
Encore une fois, faites attention en modifiant les fichiers : cela pourrait casser votre site. Toujours tester sur une installation locale en utilisant en premier un outil comme DevKinsta et/ou un site de staging.
Quel que soit le type de fichier que vous devez modifier, vous devez le faire correctement. Lisez la section ci-dessous sur les meilleures pratiques pour savoir comment modifier votre code de manière à ne pas casser votre site et à ne pas vous causer de problèmes de sécurité.
Personnalisation d’un Thème Tiers avec un Thème Enfant
Si le thème que vous utilisez sur votre site provient d’un tiers et que vous souhaitez modifier le code, vous devrez créer un thème enfant.
C’est parce que si vous modifiez le thème directement et que vous le mettez à jour (ce que vous devriez faire), vous perdrez tous les changements que vous avez faits.
La création d’un thème enfant se compose de quatre étapes :
- Créer un nouveau dossier dans wp-content/themes.
- Dans ce dossier, créez une feuille de style. Dans cette feuille de style, dites à WordPress qu’il s’agit d’un thème enfant de votre thème existant.
- Ajoutez des copies des fichiers que vous voulez modifier au thème enfant et modifiez-les à cet endroit.
- Activez le thème enfant dans votre site.
WordPress utilisera toujours un fichier du thème enfant pour produire du contenu à moins qu’il n’y ait un fichier plus haut dans la hiérarchie du thème parent. S’il y a deux versions du même fichier, il utilisera celle du thème enfant. Cela signifie que votre nouveau fichier dans le thème enfant remplacera celui du thème parent.
Meilleures Pratiques pour Personnaliser les Thèmes WordPress
Vous prévoyez donc de personnaliser votre thème. Avant d’aller de l’avant et d’effectuer les changements, suivez ces conseils pour vous assurer que vous le faites en toute sécurité et que vous n’allez pas casser votre site, le rendre vulnérable aux attaques, ou perdre votre code.
Si Possible, Personnalisez sans Modifier le Code
Si vous pouvez faire vos personnalisations via l’outil de personnalisation ou ailleurs dans les écrans d’administration, c’est plus sûr que de modifier le code.
Ne modifiez le code que si vous êtes familier avec CSS (pour la feuille de style) et PHP (pour les autres fichiers du thème) et que vous savez comment le faire en toute sécurité.
Utilisez un Site de Développement Local pour Vos Changements
Si vous modifiez le code de votre thème ou si vous créez un thème enfant pour faire des changements, vous devriez faire le travail de développement sur une installation locale de WordPress avec votre thème installé et votre contenu copié depuis votre site en production.
De cette façon, vous disposez d’un miroir de votre site en production pour tester vos changements. Travailler sur un site local n’aura aucun effet sur votre site en production et peut être plus rapide.
Même si vous utilisez la personnalisation, il peut être utile d’utiliser une version locale de votre site pour tester, car vous pouvez publier vos modifications et les tester sans affecter le site en production.
Une fois que vous avez testé les changements apportés à votre thème, vous pouvez le téléverser sur votre site en production ou, mieux encore, vous pouvez le tester sur un site de test et ensuite le passer en production.
Utilisez le Contrôle de Version
Lorsque vous apportez des modifications à votre thème, vous devez utiliser le contrôle de version pour suivre vos modifications.
Dans sa forme la plus simple, cela signifie changer le numéro de version du thème et conserver des copies des deux versions. Mais vous faîtes le contrôle de version correctement, vous avez besoin d’utiliser un service comme GitHub pour suivre vos changements.
De cette façon, si un changement cause des problèmes, vous pouvez facilement revenir en arrière sans avoir à effectuer des modifications manuelles.
Le contrôle de version est encore plus utile si vous travaillez en équipe, car vous pourrez voir ce que font les autres membres. N’oubliez pas de lire notre guide git vs Github.
Utilisez un Site de Développement pour Tester vos Modifications
Si vous avez accès à un site de développement (tel que la site de staging de Kinsta qui vient avec tous les plans), tester sur ce point avant d’activer la nouvelle version de votre thème (ou le nouveau thème enfant) sur votre site en production est la façon la plus sûre de procéder.
C’est parce que n’importe quel site local aura quelques différences par rapport à votre site en direct : il est sur un serveur différent (un serveur créé sur votre machine locale), il peut exécuter une version e PHP différente ou de tout autre outil qui exécute votre site.
Faites une copie de votre site en production sur votre serveur de test, puis téléversez et activez votre nouveau thème. Testez votre site à fond pour vous assurer que tout fonctionne, et vous pourrez ensuite apporter vos modifications sur votre site en production.
Faites en Sorte que Votre Thème Réponde à Vos Besoins
Tous les changements que vous devez apporter à votre thème doivent fonctionner aussi bien sur un mobile que sur un ordinateur de bureau.
De plus en plus de personnes accèdent à l’Internet par téléphone portable, et le Mobile-first index de Google, il est probablement plus important maintenant pour votre thème de travailler sur mobile que sur ordinateur de bureau. Par conséquent, tout changement que vous apportez à votre thème doit être adapté à la mobilité ou, de préférence, à la mobilité d’abord, le cas échéant.
Ceci s’appliquera principalement à toute modification apportée à votre style ou à votre mise en page : vérifiez que la nouvelle mise en page fonctionne sur mobile et que vous avez ajouté des requêtes multimédia afin que la mise en page s’adapte aux différentes tailles d’écran.
Si votre thème n’est pas responsive, il aura un impact négatif sur votre classement dans les moteurs de recherche et les taux de conversion.
Si vous n’avez pas accès à un grand nombre d’appareils mobiles différents pour faire des tests, vous pouvez utiliser un outil comme BrowserStack pour voir à quoi ressemble votre site sur différents appareils. Vous pouvez également utiliser les outils Developer dans votre navigateur et les vues responsives dans l’outil de personnalisation.
Assurez-vous que Vos Personnalisations n’ont pas d’Impact sur l’Accessibilité
Tout changement apporté à votre thème doit également être accessible aux utilisateurs handicapés ou ayant une déficience sensorielle.
Il ne s’agit pas seulement de s’assurer que votre site fonctionne sur les lecteurs d’écran : d’autres considérations telles que la disposition des couleurs et la taille des caractères sont importantes pour un grand nombre de personnes.
Si les changements que vous apportez à votre thème sont de rendre les couleurs plus vives ou le texte plus petit, réfléchissez bien : cela pourrait rendre difficile la lecture ou l’interaction avec votre site.
Avant d’apporter des modifications en production, utilisez un vérificateur d’accessibilité pour tester votre site et vous assurer qu’il n’exclut personne.
S’en Tenir aux Normes de Codage de WordPress
Si vous modifiez le code de votre thème ou si vous créez un thème enfant, vous devez vous assurer que votre code est conforme aux normes de codage de WordPress.
Ces normes visent à assurer l’uniformité et la qualité du code et à éviter le désordre dans le code. Il existe des normes pour PHP, CSS et JavaScript, alors prenez le temps de vérifier celles qui sont pertinentes pour vous et assurez-vous de les suivre.
Si votre thème WordPress existant est bien codé et que vous écrivez un nouveau code d’une manière cohérente avec cela, vous êtes sur la bonne voie pour vous assurer que votre code est conforme. Assurez-vous d’ajouter des commentaires à tous les changements que vous apportez au thème afin que vous ou les autres sachiez ce que vous avez fait lorsque vous reviendrez travailler sur le code dans le futur. Vous pensez peut-être que vous n’oublierez pas, mais après quelques mois, il est étonnamment facile d’oublier pourquoi vous avez modifié une ligne de code.
Résumé
Personnaliser votre thème WordPress n’est pas si difficile. Parfois, il s’agit simplement d’utiliser la personnalisation pour modifier les polices, les couleurs ou votre favicon (assurez-vous de lire notre guide détaillé sur les polices WordPress). D’autres fois, vous devez créer un nouveau thème enfant pour ajouter un nouveau fichier modèle à un thème.
Les options dont vous disposez pour personnaliser votre thème incluent l’utilisation d’une extension ou de l’outil de personnalisation, la modification directe du code du thème WordPress, ou la création d’un thème enfant.
Identifiez la bonne option pour vous et faites vos personnalisations en toute sécurité, le tout sans casser votre site.
Rachel McCollin aide les gens à construire des sites web avec WordPress depuis 2010. Elle est une grande fan de WordPress auto-hébergé et veut aider autant de personnes que possible à créer un site web génial avec lui.
Laisser un commentaire