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

Si vous avez installé un thème WordPress mais qu’il ne vous convient pas, vous pourriez vous sentir frustré. De nombreuses options s’offrent à vous pour personnaliser vos thèmes WordPress.

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

Dans cet article, je vais vous guider à travers le des options pour personnaliser votre thème WordPress, vous aider à choisir celui qui vous convient et vous montrer comment le faire en toute sécurité et efficacement.

Vous préférez regarder notre version vidéo? Cliquez sur play ci-dessous:

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 Personnalisateur dans vos écrans d’administration 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 de création de page, utilisez ses fonctionnalités pour personnaliser la conception de votre site.
• Si vous avez installé un thème de cadre, 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 de 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 à l’outil de personnalisation, en passant par l’édition 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 ne le faites pas ‘ 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. 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, pensez à installer vous-même un plugin. Cela peut être un plugin que vous devez écrire, un que vous téléchargez à partir du répertoire du plugin, ou un que vous achetez.

Si vous souhaitez éditer le fichier functions.php dans votre thème, posez-vous la question:

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

Si la réponse est oui, ce code devrait 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 d’articles personnalisés et de taxonomies , en créant des champs personnalisés et en ajoutant des fonctionnalités supplémentaires comme une boutique ou des améliorations SEO.

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

Si les modifications que vous souhaitez apporter sont axées sur la conception et relativement simple, vous pourrez peut-être les faire via les écrans d’administration. L’outil de personnalisation vous offre une variété d’options pour peaufiner votre thème: ce qui vous est disponible 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 WordPress consiste à utiliser le personnalisateur WordPress.

Vous y accédez de deux manières:

• 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.

Cela vous amène à l’outil de personnalisation.

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 à l’outil de personnalisation pour les fonctionnalités de conception, notamment une image d’en-tête, des médias sociaux, des couleurs de catégorie et un onglet Options de conception qui vous emmè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 des options de personnalisation différentes, mais les nouveaux thèmes semblent en ajouter de plus en plus tout le temps. Si vous trouvez un thème que vous aimez mais qui ne vous convient pas, vous constaterez peut-être que sa personnalisation vous donne exactement la conception et la mise en page dont vous avez besoin.

L’éditeur de thème (et pourquoi ne pas l’utiliser it)

Dans vos écrans d’administration, vous remarquerez peut-être une option appelée Éditeur de thème, que vous acmes 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 le faites pas.

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 apportez seront perdues lors de la prochaine mise à jour du thème (et vous devez garder votre thème à jour pour des raisons de sécurité).
• Plus important encore, si vous effectuez 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 souhaitez modifier le code de votre thème, vous devez le faire en utilisant un éditeur de code (consultez les meilleurs éditeurs HTML gratuits), et vous ne devriez pas ne modifiez pas les fichiers de votre site en direct tant que vous ne l’avez pas testé sur un site de préparation. 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 loin dans cet article.

WordPress sait à quel point 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 les conseils de WordPress: ne le faites pas utilisez l’éditeur de thème!

Utilisation des constructeurs de pages et des cadres 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 à 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 frameworks de thèmes.

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

Utilisation d’une page Builder 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 donne pour concevoir votre site exactement comme vous le souhaitez.

L’un des constructeurs de page les plus connus est Elementor, mais vous pouvez découvrir quelques alternatives dans notre tour d’horizon des créateurs de page.

Les créateurs de page vous permettent de modifier vos articles et vos pages avec une interface glisser-déposer, ce qui signifie que vous pouvez voir à quoi ressemblera votre contenu et peut 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 lui.

Les constructeurs de pages vous offrent beaucoup de flexibilité dans la mise en page et la conception de vos pages. Si vous êtes habitué à un créateur de site Web comme Wix, il peut vous 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 framework de thème pour personnaliser votre thème

Une alternative aux constructeurs de pages est le thème cadres. Ce sont des suites de thèmes conçus pour fonctionner 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 lui donner l’apparence que vous voulez.

Un exemple de frameworks de thème est Divi, qui a 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 à celles des constructeurs de pages.

Modifier le code de votre thème WordPress

Si vous êtes à l’aise avec l’édition CSS et / ou PHP, vous pouvez modifiez 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 cela, 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 de l’édition de votre thème WordPress est de comprendre quels fichiers de thème contrôlent quoi, et lesquels vous devrez modifier.

La feuille de style

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

Si vous souhaitez modifier les couleurs de votre thème, par exemple, vous apportez 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 en-têtes.

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 d’où vous pense que c’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, sauf si vous ajoutez un style qui est spécifique à l’élément inférieur.

Pour découvrir quel CSS affecte quels éléments de la page, vous pouvez utilisez 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 plage d’éléments ou de classes sur la page.

Si tout ce discours sur les éléments, les classes et la spécificité est nouveau 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 de fonctions

Un autre fichier que presque tous les thèmes auront est le fichier de fonctions (functions.php) . C’est le fichier qui permet à un tas de choses de fonctionner dans votre thème. À l’intérieur, vous pouvez trouver du code pour enregistrer des fonctionnalités de thème telles que des images, des 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 un plugin. Posez-vous la question:

Voudrais-je conserver cette fonctionnalité si je change 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 volumineux: 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 cette. 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 WordPress 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ée , vous devrez soit modifier l’un de ces fichiers, soit en créer un nouveau.

Par exemple, supposons que votre thème possède un fichier archive.php qui est utilisé pour générer des pages d’archives pour les catégories et les balises. Vous souhaitez modifier la manière dont les balises sont générées. 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. Toujours tester sur un local installation en utilisant un outil comme DevKinsta et / ou le site de préparation en premier.

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é.

Personnalisation d’un thème tiers avec un thème enfant

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

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

La création d’un thème enfant se compose de quatre étapes:

1. Créez un nouveau dossier dans wp-content / thèmes.
2. Dans ce dossier, créez une feuille de style. Dans cette feuille de style, tel l WordPress 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 ici.
4. Activez le thème enfant dans votre site.

WordPress utilisera toujours un fichier du thème enfant pour afficher le contenu à moins qu’il n’y ait un fichier plus haut dans la hiérarchie dans le 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.

Bonnes pratiques pour la personnalisation des thèmes WordPress

Vous prévoyez 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 endommager votre site, le rendre vulnérable aux attaques ou de 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.

Modifiez le code uniquement si vous le souhaitez familier avec CSS (pour la feuille de style) et PHP (pour les autres fichiers de thème) et vous savez comment le faire en toute sécurité.

Utilisez un site de développement local pour effectuer 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 un installation locale de WordPress avec votre thème installé et votre contenu copié à partir de votre site en direct.

De cette façon, vous avez 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 l’outil de personnalisation, il peut être utile d’utiliser une version locale de votre site pour tester pendant que vous peut publier vos modifications et les tester sans affecter le site en direct.

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 préparation, puis mettez-le en ligne.

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 plus simple expression, 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 à faire de manuel les modifications.

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 de test pour tester vos modifications

Si vous avez accès à un site de test (tel que le site de test gratuit de Kinsta, fourni avec tous plans), tester à ce sujet avant d’activer la nouvelle version de votre thème (ou le nouveau thème enfant) sur votre site en ligne est le moyen le plus sûr de procéder.

En effet, tout site local aura des différences par rapport à votre site en direct: il se trouve sur un serveur différent (créé sur votre machine locale), 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 développement, 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.

Rendre votre thème réactif

Toutes les modifications que vous devez apporter à votre thème devraient fonctionne aussi bien sur mobile que sur ordinateur.

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. fait sur le bureau. Par conséquent, toutes les modifications que vous apportez à votre thème doivent être adaptées aux mobiles ou de préférence aux mobiles, le cas échéant.

Cela s’appliquera principalement à toutes les modifications que vous apportez à 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 à différentes tailles d’écran.

Si votre thème n’est pas réactif, il 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 pour tester, vous pouvez utiliser un outil tel que 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 responsives dans le Customizer.

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 garantir que votre site fonctionne sur les lecteurs d’écran: d’autres considérations telles que les jeux de couleurs et les tailles de police sont importantes pour un grand nombre de personnes.

Si les changements vous apportez à votre thème pour rendre les couleurs plus lumineuses ou le texte plus petit, détrompez-vous: cela peut rendre difficile pour les gens de lire ou d’interagir 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 les gens.

Tenez-vous en aux normes de codage WordPress

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

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 WordPress existant est bien codé et que vous en écrivez un 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 les 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.

Vous devez personnaliser votre thème #WordPress pour le rendre unique? Il y a plein d’options! Choisissez celui qui vous convient dans notre guide détaillé! 👚👔Cliquez pour Tweet

Résumé

La personnalisation de votre thème WordPress n’est pas si difficile. Parfois, il s’agit simplement d’utiliser le personnalisateur pour modifier les polices ou les couleurs (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 de modèle à un thème.

Les options dont vous disposez pour personnaliser votre thème incluent l’utilisation d’un plugin ou du Customizer, éditant directement le code du thème WordPress , ou en créant un thème enfant.

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