WordPress: Comment personnaliser votre thème WordPress (5 méthodes étape par étape)

WordPress: Comment personnaliser votre thème WordPress (5 méthodes étape par étape)

Si vous avez installé un thème mais qu’il ne vous convient pas, vous vous sentez peut-être frustré. De nombreuses options s’offrent à vous pour personnaliser vos thèmes .

Le défi est de trouver la bonne façon de le faire.

Dans cet article, je vais vous guider à travers les options de personnalisation de votre thème , vous aider à décider lequel vous convient le mieux et vous montrer comment le faire de manière sûre et efficace.

Vous préférez regarder la version vidéo ?


Options de personnalisation d’un thème

Avant de plonger et de commencer à apporter des modifications à votre thème, il est utile de comprendre quelles sont les options, car elles conviennent à différentes situations.

Voici un aperçu des options qui s’offrent à vous :

  • Si vous souhaitez ajouter des fonctionnalités à votre thème, installez un plugin.
  • Utilisez le Customizer dans vos écrans d’administration 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 de création de page, utilisez ses fonctionnalités pour personnaliser la conception de votre site.
  • Si vous avez installé un thème de 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 souhaitez modifier le code d’un thème tiers, créez un thème enfant.

Si vous souhaitez modifier le code, vous disposez d’un certain nombre d’options, de l’utilisation de l’éditeur de blocs au personnalisateur, en passant par la modification des fichiers. Nous les examinerons tous dans cet article, mais commençons par l’option la plus simple : installer un plugin.

Avez-vous vraiment besoin de personnaliser votre thème ?

Parfois, vous n’avez pas du tout besoin de personnaliser votre thème : à la place, vous devez installer un plugin.

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 de thème pour identifier le thème sous-jacent d’un design que vous aimez). Les plugins ajoutent des fonctionnalités supplémentaires.

Si les modifications que vous souhaitez apporter sont axées sur la fonctionnalité plutôt que sur la conception, envisagez d’installer un plugin vous-même. Il peut s’agir d’un plugin que vous devez écrire, que vous téléchargez à partir du répertoire des plugins ou que vous achetez.

Si vous souhaitez 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 doit aller dans un plugin, pas dans votre thème.

De bons exemples de ce que vous utiliseriez un plugin au lieu d’un thème, y compris l’ajout de widgets, l’enregistrement de types de publication et de taxonomies personnalisés, la création de champs personnalisés et l’ajout de fonctionnalités supplémentaires comme un magasin ou des améliorations SEO.

Personnalisation de votre thème via les écrans d’administration

Si les modifications que vous souhaitez apporter sont axées sur la conception et relativement simples, vous pourrez peut-être les effectuer via les écrans d’administration. Le Customizer vous offre une variété d’options pour peaufiner votre thème : ce qui est à votre disposition dépendra de votre thème. Et vous pouvez voir quelque chose appelé l’éditeur dans le menu Apparence. Évitez cela, pour des raisons que je décrirai sous peu.

Personnalisation de votre thème via le personnalisateur

Le moyen le plus simple de personnaliser votre thème est d’utiliser Customizer.

Vous y accédez de l’une des deux manières suivantes :

  • Lors de la visualisation de votre site (lorsque vous êtes connecté), cliquez sur le Personnaliser lien dans la barre d’administration en haut de l’écran.
  • Dans les écrans d’administration, cliquez sur Apparence > Personnaliser.

Cela vous amène à la personnalisation.

Le personnalisateur WordPress

Le personnalisateur

Dans la capture d’écran ci-dessus, j’ai installé un thème gratuit appelé ColorMag qui propose de nombreuses options de personnalisation. Il a ajouté des sections au personnalisateur pour les fonctionnalités de conception, notamment une image d’en-tête, les médias sociaux, les couleurs des catégories et un onglet Options de conception qui vous permet d’accéder à d’autres onglets dans lesquels 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 nouveaux thèmes semblent en ajouter de plus en plus. Si vous trouvez un thème que vous aimez mais qui ne vous convient pas, vous constaterez peut-être que 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 l’éditeur de thème, que vous accédez via Apparence > Éditeur de thème.

L'éditeur de thème WordPress

L’éditeur de thème

Cela vous donne accès aux fichiers de votre thème, ce qui signifie que vous pouvez les modifier directement.

Non.

Même si vous êtes à l’aise pour écrire du CSS ou du PHP, éditer les fichiers de votre thème comme celui-ci 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 mettez à jour le thème (et vous devez garder votre thème à jour pour des raisons de sécurité).
  • Plus important encore, si vous apportez une modification qui endommage votre site, elle ne sera pas suivie et la version précédente du fichier ne sera pas modifiée. Vous pourriez irrévocablement casser le site.

Si vous souhaitez modifier le code de votre thème, vous devez le faire à l’aide d’un éditeur de code (consultez les meilleurs éditeurs HTML gratuits), et vous ne devez pas modifier les fichiers de votre site en direct tant que vous ne l’avez pas testé sur un site de mise en scène. Si vous devez modifier un thème tiers, vous devez le faire via un thème enfant. Plus d’informations sur ces deux éléments plus tard dans cet article.

sait à quel point il est dangereux d’utiliser l’éditeur de thème : il vous avertit même lorsque vous essayez d’y accéder.

Avertissement de ne pas utiliser l'éditeur de thème WordPress

Avertissement de ne pas utiliser l’éditeur de thème

Alors suivez le conseil de : n’utilisez pas l’éditeur de thème !

Utilisation de générateurs de pages et de frameworks pour personnaliser votre thème

Une grande partie des thèmes ont des options de personnalisation, ce qui signifie que vous pouvez apporter des modifications à la conception et à la mise en page via le Customizer.

Mais certains thèmes vont plus loin et sont conçus pour être étendus et considérablement personnalisés. Ces thèmes sont appelés cadres de thèmes.

Une autre option consiste à utiliser un plugin qui vous permet de concevoir votre site à l’aide d’une interface conviviale : ceux-ci sont appelés constructeurs de pages.

Utiliser un générateur de page pour personnaliser votre thème

Les plugins Page Builder sont conçus pour vous permettre de définir facilement la conception de votre site, en utilisant une interface qui vous permet de voir ce que vous obtenez.

Vous installez un plugin de création 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 découvrir quelques alternatives dans notre tour d’horizon des constructeurs de pages.

Les constructeurs de pages vous permettent de modifier vos publications et vos pages avec une interface glisser-déposer, ce qui signifie que vous pouvez voir à quoi ressemblera votre contenu et rendre chaque page unique.

Ci-dessous, j’utilise le générateur de page Elementor avec le thème Hello Elementor, qui est compatible avec celui-ci.

L'interface Elementor

L’interface Elementor

Les constructeurs de pages vous offrent une grande flexibilité dans la mise en page et la conception de vos pages. Si vous êtes habitué à un constructeur de site Web comme Wix, il peut vous aider à faciliter la transition vers . Et si vous préférez une interface WYSIWYG pour votre contenu , ils peuvent vous aider à concevoir vos pages rapidement.

Utilisation d’un cadre de thème pour personnaliser votre thème

Les frameworks de thèmes constituent une alternative aux constructeurs de pages. Ce sont des suites de thèmes conçus pour fonctionner ensemble. Il existe un thème parent qui est le cadre et un choix de thèmes enfants que vous pouvez utiliser pour personnaliser le thème principal et lui donner l’apparence que vous souhaitez.

Divi est un exemple de framework de thème, qui propose des options de personnalisation qui vous permettent de peaufiner encore plus la conception de votre thème enfant, y compris une interface glisser-déposer similaire à celle des constructeurs de pages.

Le thème Divi

Le thème Divi

Lectures recommandées : Divi vs Elementor : Comparaison des plugins Page Builder

Modification du code de votre thème

Si vous êtes à l’aise avec l’édition CSS et/ou PHP, vous pouvez éditer le code de 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, vous pouvez alors apporter des modifications directement au thème. Mais si vous travaillez avec un thème tiers et que vous souhaitez le modifier, vous devez créer un thème enfant pour éviter de perdre vos modifications la prochaine fois que vous mettez à jour le thème.

Modification des fichiers de thème

La première étape pour modifier votre thème consiste à comprendre quels fichiers de thème contrôlent quoi et lesquels vous devrez modifier.

La feuille de style

Chaque thème a une feuille de style, appelée style.css. Il contient tout le code pour styliser votre site : mise en page, polices, couleurs, etc.

Si vous souhaitez modifier les couleurs de votre thème, par exemple, vous devez apporter des modifications à la feuille de style. Si vous souhaitez ajouter une nouvelle police, vous utiliserez la feuille de style pour l’appliquer à différents éléments tels que le corps du texte et les titres.

Faites attention lors de l’édition 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 se trouve. Les éléments hériteront du style des autres éléments situés 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) :

Inspecter le code dans un site WordPress

Inspection du code dans un site avec Chrome DevTools

Vous pouvez ensuite l’utiliser pour écrire un nouveau CSS qui cible des éléments individuels ou une plage 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 en sachiez plus sur CSS et son fonctionnement.

Le fichier des 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 trucs dans votre thème. À l’intérieur, vous pouvez trouver du code pour enregistrer des fonctionnalités de thème telles que des images en vedette, des widgets, etc.

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 un plugin. Demande toi:

Voudrais-je conserver cette fonctionnalité si je changeais de thème à l’avenir ?

Si la réponse est oui, écrivez un plugin au lieu d’ajouter du code au fichier de fonctions. Les plugins n’ont pas besoin d’être gros : rien ne vous empêche d’en créer un pour quelques lignes de code.

Le fichier de fonctions est entièrement écrit en PHP, vous devrez donc vous familiariser avec cela. Ne copiez pas aveuglément le code que vous trouvez via une recherche Google : prenez le temps de comprendre ce que fait ce code et de le comprendre. 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 de modèle de thème

La plupart des fichiers d’un thème sont des fichiers de modèle de thème. Ce sont des fichiers qui déterminent le contenu que produit sur une page donnée, et sont choisis en fonction de la hiérarchie des modèles.

Si vous souhaitez modifier la façon dont le contenu est affiché sur un type de publication, une page ou une archive donné, vous devrez soit modifier l’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 générer des pages d’archive pour les catégories et les balises. Vous souhaitez apporter des modifications à la façon dont les balises sont sorties. Vous créez donc un fichier appelé « tag.php », qui serait basé sur archive.php avec vos réglages.

Encore une fois, soyez prudent en éditant les fichiers : ils pourraient casser votre site. Testez toujours d’abord sur une installation locale à l’aide d’un outil tel que DevKinsta et/ou d’un site de transfert.

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 d’une manière qui ne cassera pas votre site et ne vous causera pas de problèmes de sécurité.

Personnaliser un thème tiers avec un thème enfant

Si le thème que vous exécutez sur votre site provient d’un tiers et que vous souhaitez modifier le code, vous devrez créer un thème enfant.

En effet, si vous modifiez le thème directement puis que vous le mettez à jour (ce que vous devriez faire), vous perdrez toutes les modifications que vous avez apportées.

La création d’un thème enfant comprend quatre étapes :

  1. Créer un nouveau dossier dans wp-contenu/thèmes.
  2. Dans ce dossier, créez une feuille de style. Dans cette feuille de style, dites à qu’il s’agit d’un thème enfant de votre thème existant.
  3. Ajoutez des copies des fichiers que vous souhaitez modifier au thème enfant et modifiez-les là-bas.
  4. Activez le thème enfant dans votre site.

utilisera toujours un fichier du thème enfant pour produire du contenu, sauf s’il existe un fichier plus haut dans la hiérarchie du thème parent. S’il existe 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

Vous envisagez donc de personnaliser votre thème. Avant de procéder aux modifications, suivez ces conseils pour vous assurer de le faire en toute sécurité et de ne pas casser votre site, le rendre vulnérable aux attaques ou perdre votre code.

Si possible, personnalisez sans modifier le code

Si vous pouvez effectuer vos personnalisations via le Customizer ou ailleurs dans les écrans d’administration, c’est plus sûr que de modifier le code.

N’éditez le code que si vous connaissez CSS (pour la feuille de style) et PHP (pour les autres fichiers de thème) et que vous savez comment le faire en toute sécurité.

Utilisez un site de développement local pour apporter vos modifications

Si vous modifiez le code de votre thème ou créez un thème enfant pour apporter des modifications, vous devez effectuer le travail de développement sur une installation locale de avec votre thème installé et votre contenu copié à partir de votre site en direct.

De cette façon, vous disposez d’un miroir de votre site en direct pour tester vos modifications. Travailler sur un site local n’aura aucun effet sur votre site en ligne et peut être plus rapide.

Même si vous utilisez le Customizer, il peut être utile d’utiliser une version locale de votre site pour les tests, car vous pouvez publier vos modifications et les tester sans affecter le site en ligne.

Une fois que vous avez testé les modifications apportées à votre thème, vous pouvez le télécharger sur votre site en direct ou, mieux encore, vous pouvez le tester sur un site de test, puis le mettre en ligne.

Utiliser 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 si vous voulez faire le contrôle de version correctement, vous devez utiliser un service comme GitHub pour suivre vos modifications.

De cette façon, si une modification pose des problèmes, vous pouvez facilement l’annuler sans avoir à effectuer de 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. Assurez-vous de lire notre guide git vs Github.

Utilisez un site intermédiaire pour tester vos modifications

Si vous avez accès à un site de mise en scène (comme la mise en scène gratuite de Kinsta fournie avec tous les plans), le tester avant d’activer la nouvelle version de votre thème (ou le nouveau thème enfant) sur votre site en direct est le moyen le plus sûr de procéder.

Mise en scène myKinsta

Mise en scène myKinsta

En effet, tout site local aura quelques différences par rapport à votre site en ligne : il se trouve sur un serveur différent (un serveur créé sur votre ordinateur local), il peut exécuter une version différente de PHP ou l’un des autres outils qui exécutent votre site.

Faites une copie de votre site en direct sur votre serveur de transfert, puis téléchargez et activez votre nouveau thème. Testez soigneusement votre site pour vous assurer que tout fonctionne, puis vous pourrez appliquer vos modifications à votre site en ligne.

Rendez votre thème responsive

Toutes les modifications que vous devez apporter à votre thème devraient fonctionner sur mobile ainsi que sur ordinateur de bureau.

Avec de plus en plus de personnes accédant à Internet via un téléphone mobile et l’index Mobile-first de Google, il est probablement plus important maintenant que votre thème fonctionne sur mobile que sur ordinateur. Ainsi, toutes les modifications que vous apportez à votre thème doivent être adaptées aux mobiles ou, de préférence, axées sur les mobiles, le cas échéant.

Cela s’appliquera principalement à toutes les modifications que vous apporterez à 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édias afin que la mise en page s’adapte aux différentes tailles d’écran.

Si votre thème n’est pas réactif, cela aura un impact négatif sur votre classement dans les moteurs de recherche et vos taux de conversion.

Si vous n’avez pas accès à de nombreux appareils mobiles différents sur lesquels tester, vous pouvez utiliser un outil comme BrowserStack pour voir à quoi ressemble votre site sur différents appareils. Vous pouvez également utiliser les outils de développement dans votre navigateur et les vues réactives dans le personnalisateur.

Outils réactifs dans le personnalisateur WordPress

Outils réactifs dans le personnalisateur

Assurez-vous que vos personnalisations n’ont pas d’impact sur l’accessibilité

Toute modification de 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 les schémas de couleurs et les tailles de police sont importantes pour un grand nombre de personnes.

Si les modifications que vous apportez à votre thème visent à rendre les couleurs plus vives ou le texte plus petit, détrompez-vous : cela peut rendre difficile la lecture ou l’interaction avec votre site.

Avant d’apporter des modifications en direct, utilisez un vérificateur d’accessibilité pour tester votre site et assurez-vous qu’il n’exclut pas de personnes.

Respectez les normes de codage

Si vous modifiez le code de votre thème ou créez un thème enfant, vous devez vous assurer que votre code est conforme aux normes de codage .

Ces normes existent pour assurer la cohérence et la qualité du code et pour éviter le code qui est un gâchis. Il existe des normes pour PHP, CSS et JavaScript, alors prenez le temps de vérifier celles qui vous concernent et assurez-vous de les suivre.

Si votre thème existant est bien codé et que vous écrivez tout nouveau code d’une manière cohérente avec cela, vous êtes sur le point de vous assurer que votre code est conforme. Assurez-vous d’ajouter des commentaires à toutes les modifications que vous apportez au thème afin que vous ou d’autres sachiez ce que vous avez fait lorsque vous reviendrez travailler sur le code à l’avenir. 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.

Besoin de personnaliser votre thème # pour le rendre unique ? Il y a plein d’options! Choisissez celui qui vous convient dans notre guide détaillé ! ??Cliquez pour tweeter

Sommaire

Personnaliser votre thème n’est pas si difficile. Parfois, il s’agit simplement d’utiliser le Customizer pour modifier les polices, les couleurs ou votre favicon (assurez-vous de lire notre guide détaillé sur les polices ). 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’un plugin ou du personnalisateur, la modification directe du code du thème ou la création d’un thème enfant.

Identifiez la bonne option pour vous et effectuez vos personnalisations en toute sécurité, le tout sans casser votre site.


Économisez du temps, des coûts et optimisez les performances du site avec :

  • Aide instantanée d’experts en hébergement , 24h/24 et 7j/7.
  • Intégration Cloudflare Enterprise.
  • Audience mondiale avec 28 centres de données dans le monde.
  • Optimisation avec notre surveillance intégrée des performances des applications.

Tout cela et bien plus encore, dans un seul plan sans contrats à long terme, migrations assistées et garantie de remboursement de 30 jours. Consultez nos plans ou parlez aux ventes pour trouver le plan qui vous convient.



All the CMS Templates You Could Ask For.

WordPress: Comment personnaliser votre thème WordPress (5 méthodes étape par étape)

2M+ items from the worlds largest marketplace for CMS TemplatesEnvato Market.



WordPress: Comment personnaliser votre thème WordPress (5 méthodes étape par étape)

#Comment #personnaliser #votre #thème # #méthodes #étape #par #étape