Accueil
/
Tutoriels WordPress
/
Comment personnaliser les thèmes WordPress

Comment personnaliser les thèmes WordPress

La personnalisation des thèmes WordPress vous aide à présenter votre marque de manière unique et à différencier votre entreprise de ses concurrents.

De nombreux propriétaires de sites font appel à des services de développement professionnels pour la personnalisation de leur WordPress. Néanmoins, avec une bonne stratégie et un peu de diligence, vous pouvez apprendre à modifier vous-même des thèmes dans WordPress. Cette compétence est toujours bénéfique car elle vous permet de contrôler l’apparence visuelle et les fonctionnalités de votre site web.

Dans ce tutoriel, nous verrons pourquoi vous devriez personnaliser votre thème WordPress. De plus, nous allons vous montrer comment modifier les thèmes WordPress selon vos préférences en utilisant différentes options de personnalisation, alors lisez la suite.

Pourquoi personnaliser mon thème WordPress ?

Quel que soit le thème choisi, il remplacera l’apparence de votre site par son design prédéfini. En personnalisant le thème, vous pourrez donner à votre site web un look unique, le distinguant des autres sites web utilisant le même thème.

Étant facilement reconnaissable et mémorable, votre site web se démarquera du lot. Ceci, à son tour, augmentera la réputation et la reconnaissance de votre marque.

WordPress est livré avec un thème prédéfini par défaut, que vous pourrez modifier ultérieurement. Il existe une pléthore de thèmes gratuits ou Premium parmi lesquels vous pouvez choisir en fonction de l’idée ou de l’activité de votre site. Vous pouvez trouver un thème directement dans le répertoire de thèmes WordPress ou sur une place de marché de confiance.

Ci-dessous, vous pouvez voir tous les avantages de la personnalisation du thème que vous avez choisi.

  • Différenciez votre site web de vos concurrents

Si vous avez parcouru des thèmes précédemment, vous avez probablement remarqué que certains d’entre eux sont construits pour promouvoir des niches spécifiques. Cependant, même ces thèmes de niche ont tendance à être formulés de manière plus générale. Ainsi, vous devrez modifier davantage le vôtre pour que votre site WordPress se démarque des autres.

  • Attirez votre public

Le thème que vous avez choisi peut ne pas correspondre exactement à vos besoins ou attentes concernant les couleurs, les autres éléments et les fonctionnalités. Les bonnes couleurs et la bonne disposition peuvent influencer de manière significative la façon dont vos visiteurs perçoivent le caractère unique de votre marque. De nombreuses marques marquent même les couleurs qu’elles utilisent pour avoir un impact durable sur la perception visuelle de leur public.

  • Offrir structure et efficacité

Les sites web les mieux notés sont bien organisés et offrent un design intuitif. Dans cet esprit, vous devez vous efforcer d’améliorer l’efficacité de l’apparence de votre site web et de générer une expérience utilisateur positive.

  • Ajout de fonctionnalités

N’oubliez pas que la personnalisation des thèmes WordPress est cruciale pour établir l’apparence générale et le style de votre site web. Cependant, si vous souhaitez ajouter plus de fonctionnalités à votre site web, vous pouvez installer divers plugins WordPress.

Le référentiel de plugins WordPress contient de nombreux plugins gratuits et payants, fournissant des fonctionnalités basiques ou plus complexes telles que la gestion des fonctionnalités d’optimisation WordPress et de sécurité. Par exemple, avec l’aide d’un plugin comme WooCommerce, vous pouvez transformer votre blog en un site de commerce électronique.

L’essentiel est qu’en modifiant votre thème WordPress, vous avez la possibilité d’exprimer le point de vue de votre marque et de faire une déclaration. Votre site web est sans doute l’un des atouts les plus importants pour votre image de marque ; Considérez-la comme le visage de votre marque. Ainsi, vous devez personnaliser votre thème dans WordPress pour en tirer le meilleur parti dans le but de séduire et de fidéliser votre public.

Comment personnaliser les thèmes WordPress – 3 méthodes simples et 2 méthodes avancées

Dans cette section, nous aborderons les étapes pratiques de la personnalisation de votre site WordPress. Ici, nous allons vous guider à travers plusieurs approches différentes dans WordPress pour modifier un thème, alors continuez à lire.

Modifiez votre thème WordPress avec l’éditeur de site complet (version bêta) (Facile)

Édition complète du site ( FSE ) fait partie du projet Gutenberg, qui étend la fonctionnalité d’édition de blocs au-delà des pages et des articles. Vous pouvez utiliser cet éditeur de site à base de blocs en fonction du thème que vous avez choisi et de la version de WordPress sur laquelle fonctionne votre site. Vous avez besoin d’au moins WordPress 5.9 (ou une version supérieure) et un thème compatible avec les blocs pour en profiter.

Pour les besoins de ce tutoriel, nous utiliserons le thème par défaut Twenty Twenty-Two car il est basé sur des blocs, complétant ainsi la sortie de la version beta de FSE.

Pour accéder à l’éditeur de site complet, connectez-vous à votre tableau de bord WordPress et accédez à Apparence> Éditeur .

Full site editor WordPress

Une fois chargé, l’écran FSE vous permet de personnaliser la mise en page de vos pages WordPress par blocs. En bref, toutes les parties de page sont séparées en éléments de bloc, et vous pouvez créer des blocs réutilisables pour la cohérence de la conception.

Plusieurs concepts clés sont traités dans l’éditeur de site complet , et nous les aborderons brièvement ci-dessous.

Full site editor blocks WordPress

  • Vous pouvez ajouter divers blocs à partir du signe « + » en haut à gauche de l’écran pour formater le contenu texte, le logo et le titre de votre site, ajouter du multimédia ou d’autres widgets. Vous pouvez glisser-déposer des blocs pour obtenir l’apparence souhaitée pour votre site web.
  • Depuis l’onglet Blocs , vous pouvez sélectionner des motifs de blocs uniques pour vos pages.

Block editing patterns

  • Pour charger le menu Styles , cliquez sur le cercle noir et blanc dans le coin supérieur droit pour personnaliser davantage les couleurs, la disposition et la typographie.
  • Créez, modifiez, prévisualisez et supprimez des modèles depuis l’éditeur de site en appuyant sur le bouton du logo WordPress dans le coin supérieur droit. Par défaut, il charge le modèle de page d’accueil de votre site web.

Site Editor Home page WordPress

Notez que vous pouvez créer une page avec un seul modèle ou combiner des parties de modèle et des motifs de blocs.

  • Vous pouvez accéder à l’interface d’édition Modèle depuis la barre latérale gauche, où vous pouvez créer et éditer des modèles de publication et de page. Par exemple, il existe un modèle standard pour les pages d’erreur 404 que vous pouvez modifier pour l’aligner sur votre conception. Vous pouvez également créer une page de contact personnalisée, configurer un formulaire de contact pour votre site en ligne, etc.

Templates editor interface

  • Pour créer des blocs structurels réutilisables qui soient utilisables dans des modèles, naviguez jusqu’à l’éditeur Parties de modèle . À partir de cette section, vous pouvez personnaliser les en-têtes et les pieds de page de votre site WordPress.

Editing WordPress Theme Template parts

Comme l’éditeur de site complet est basé sur des blocs, le personnalisateur de thème et les widgets sont masqués par défaut. Ils n’apparaissent sous Apparence que lorsque votre site dispose d’un greffon nécessitant ces fonctionnalités.

Dans l’ensemble, l’éditeur de blocs est une innovation dans la personnalisation des thèmes WordPress car il permet aux débutants de créer de beaux sites web sans coder. Bien que les thèmes basés sur des blocs ne soient pas encore très courants, les développeurs de thèmes finiront par rattraper leur retard.

Utilisez le personnalisateur de thème pour modifier votre thème WordPress (Facile)

Pour personnaliser des thèmes classiques comme Astra, qui ne prennent pas encore en charge l’éditeur de site complet, vous pouvez utiliser l’outil de personnalisation de thème WordPress . Cet outil hérité vous permet de modifier les thèmes WordPress en temps réel. Selon le thème que vous utilisez pour votre site WordPress, vous pouvez apporter différents ensembles de modifications à votre site depuis votre panneau d’administration.

Vous pouvez y accéder à partir de Apparence> Personnaliser ou à partir de Apparence> Thèmes> Personnaliser le bouton dans la vignette du thème actif.

Editing WordPress Themes with the Theme Customizer

Cela charge la page Personnaliser à partir de laquelle vous pouvez appliquer des modifications à votre thème WordPress et voir le résultat immédiatement. Vous pouvez choisir parmi diverses options de personnalisation disponibles dans la barre latérale gauche.

Editing WordPress Themes with the Theme Customizer

Depuis cette barre latérale, vous pouvez accéder à toutes les fonctionnalités incluses dans votre thème et les modifier. Les thèmes les plus courants parmi les thèmes WordPress classiques sont les paramètres de la page d’accueil, les jeux de couleurs et les arrière-plans.

Comment modifier le titre et le slogan de votre site WordPress

La page de personnalisation du thème vous permet de modifier le titre et le slogan de votre site et de voir à quoi il ressemblera immédiatement sur votre site. Développez le groupe de paramètres Identité du site et modifiez le texte en conséquence.

Edit Site title and Tag line WordPress

Vous verrez le nouveau texte apparaître dans l’aperçu sur le côté droit pendant que vous tapez. Une fois que vous êtes satisfait du résultat, cliquez sur Publish, et les changements seront implémentés.

Personnalisations supplémentaires du thème WordPress

En fonction de votre thème, cette page peut contenir des options supplémentaires. Par exemple, Astra inclut les constructeurs en-tête et pied de page . Avec ces générateurs, vous pouvez ajouter certains éléments à l’en-tête et au pied de page de votre site et créer des designs uniques.

Vous pouvez également programmer Personnalisations CSS supplémentaires ou vérifier l’apparence de vos modifications sur tailles d’écran différentes .

De plus, vous pouvez créer des menus de navigation et ajouter des éléments graphiques via le personnalisateur de thème. Il existe également d’autres fonctionnalités de personnalisation pour améliorer les performances globales de votre thème WordPress.

Par exemple, le thème Astra vous permet d’activer le chargement des polices Google locales . Les polices chargées localement peuvent réduire considérablement le nombre de requêtes externes générées par votre site pour afficher la mise en forme de votre contenu. Par conséquent, cela améliore les performances globales de votre site Web WordPress en l’accélérant.

Personnalisez votre thème WordPress avec un Page Builder/Framework (Facile)

WordPress est un CMS puissant qui vous permet de personnaliser votre thème à l’aide d’un plugin de création de page. plugin Elementor est un greffon de création de page populaire et facile à utiliser, qui est un éditeur visuel par glisser-déposer. Grâce à sa conception intuitive, tout le monde peut créer des sites web d’apparence professionnelle et au pixel près sans une seule ligne de code.

Elementor vous donne un contrôle total sur chaque élément de votre site web et inclut plus de 40 widgets et fonctionnalités. Vous pouvez accélérer encore plus le processus de création de votre site en tirant parti des kits et des modèles de sites web conçus par des créateurs.

La version Pro d’Elementor vous permet de modifier des éléments de vos thèmes WordPress comme les en-têtes, les pieds de page, les articles uniques et les pages d’archives.

Editing WordPress theme with Elementor Theme builder

Le plugin est prêt pour Gutenberg, entièrement réactif et offre des outils et des améliorations pour vous aider à créer un site web époustouflant.

Les thèmes Divi by Elegant sont un autre framework de création de sites web très apprécié. Il s’agit essentiellement d’un thème WordPress qui intègre un large éventail de fonctionnalités pour la création de sites web. Divi propose une option d’éditeur visuel, plus de 800 mises en page prédéfinies et une fonctionnalité de test fractionné.

Divi WordPress Theme

Ce thème Premium inclut un générateur Ce que vous voyez est (WYSIWYG) qui vous aide à créer des sites web au design unique. Vous pouvez aussi modifier chaque élément de votre site directement à l’écran, voyant les changements immédiatement.

Avec Divi, vous pouvez créer vos propres mises en page et les enregistrer ou les exporter/importer sur d’autres sites Divi. Une autre fonctionnalité de Divi est le gestionnaire de couleurs, qui propose des palettes en fonction de vos sélections précédentes. Cela vous aide à maintenir la cohérence de l’apparence de votre site web. La plateforme flexible et intuitive de Divi vous permet de créer de superbes designs interactifs pour contraindre votre public cible.

Modifier un thème WordPress depuis l’éditeur de fichiers de thèmes (avancé)

Les fichiers des thèmes de WordPress sont stockés dans votre espace compte d’hébergement web. Vous pouvez y accéder et les modifier en utilisant Gestionnaire de fichiers votre hébergeur ou directement depuis votre tableau de bord WordPress Apparence> Éditeur de fichiers de thème .

Editing WordPress Themes with the Theme file editor

Notez que pour modifier les fichiers de thème, vous devez avoir une certaine maîtrise de PHP ou de CSS. De plus, WordPress déconseille de modifier les fichiers directement sur votre site en ligne, car des modifications peuvent endommager votre site ou se perdre lors d’une mise à jour de thème.

WordPress Theme files editor

Même si l’édition de code vous passionne, nous vous déconseillons de le faire sur votre site live (appelé « cowboy coding »). À la place, nous suggérons de modifier le code du thème sur un site de staging ou de créer un thème enfant .

L’éditeur de fichiers de thème vous permet de modifier tous les fichiers liés à votre thème WordPress depuis l’interface respective. Tous les thèmes contiennent les fichiers suivants que vous pouvez modifier pour ajuster leur conception: style.css , functions.php et fichiers modèles . Les thèmes personnalisés peuvent inclure des fichiers supplémentaires en fonction de leurs fonctionnalités.

Feuille de style (style.css)

Le fichier style.css contient toutes les fonctionnalités liées à la conception d’un thème, comme les polices, les couleurs et la disposition. Vous pouvez modifier l’apparence de votre site web en ajoutant un CSS personnalisé et en modifiant ce fichier.

Fonctions.php

Le fichier functions.php définit les fonctionnalités et les caractéristiques d’un thème WordPress. Ce fichier contient tous les menus personnalisés, logos, widgets et images en vedette codés en PHP.

Fichiers modèles de thème

Les fichiers de modèle de thème combinent du code HTML, du code PHP et des balises de modèle pour définir vos mises en page WordPress. Les modifications apportées à ces fichiers affecteront l’affichage de votre page d’erreur 404 personnalisée, de vos pages de publication et de vos pages d’archivage.

Néanmoins, avant d’envisager de modifier les fichiers de votre thème WordPress à partir de votre tableau de bord, sachez que même les plugins de sécurité en empêchent l’accès. Étant donné que l’éditeur de fichiers de thème fournit un accès direct aux fichiers de votre thème, de nombreux modules externes de sécurité (comme Security Optimizer) le désactivent pour empêcher les pirates d’injecter des logiciels malveillants.

Personnalisez votre site en utilisant un thème enfant (Avancé)

L’utilisation d’un thème enfant pour personnaliser votre thème WordPress est considérée comme une bonne pratique lors de la modification du code de votre thème. En utilisant cette approche, vous pouvez implémenter les modifications en toute sécurité sans craindre de les perdre après la mise à jour de votre thème. Plus encore, vous éviterez de casser votre site puisque vos changements n’affecteront que le thème enfant et pas le thème parent.

Même si vous apprenez à coder et que vous souhaitez expérimenter avec le code PHP, CSS et/ou JavaScript de votre thème, il est préférable d’opter pour le thème enfant.

Qu’est-ce qu’un thème enfant

Un thème parent WordPress est chaque thème qui contient une pile complète de fichiers et d’éléments de thème. Dans le même temps, un thème enfant WordPress hérite de toutes les caractéristiques et fonctionnalités du thème parent.

Selon le WordPress Codex, un thème enfant dans WordPress a la définition suivante:


Un thème enfant hérite de l’apparence du thème parent et de toutes ses fonctions, mais peut être utilisé pour apporter des modifications à n’importe quelle partie du thème. De cette façon, les personnalisations sont séparées des fichiers du thème parent. L’utilisation d’un thème enfant vous permet de mettre à niveau le thème parent sans affecter les personnalisations que vous avez apportées à votre site.


Les thèmes enfants vous permettent d’apporter des modifications portables et reproductibles à votre thème tout en les gardant séparés du thème parent.

Pour créer un thème enfant, vous devez configurer les fichiers style.css et functions.php dans un dossier séparé au sein de votre structure de fichiers WordPress. Dans ce dossier nommé d’après votre thème enfant, vous pouvez créer des modèles et appliquer diverses modifications. Lorsque le thème parent est mis à jour, les modifications que vous avez effectuées dans le thème enfant restent intactes.

La méthode la plus simple pour créer un thème enfant est d’utiliser un greffon comme l’assistant de thème enfant. Une fois installé, il est activé automatiquement et vous pouvez le trouver dans la section Outils de votre tableau de bord.

Child Theme Wizard plugin WordPress

De là, choisissez un thème parent dans le menu déroulant, saisissez le nom que vous voulez donner à votre thème enfant, et cliquez sur le bouton Créer un thème enfant . Quelques secondes plus tard, vous verrez un message indiquant que votre thème enfant est créé.

Child Theme Created success message

Rendez-vous ensuite au Apparence> Thèmes et activez votre thème enfant. Ça y est ! Vous pouvez commencer à personnaliser votre WordPress en implémentant des changements sur le thème enfant.

7 Trucs et astuces pour l’édition de thèmes WordPress

  • Astuce 1.3

    Par mesure de sécurité, assurez-vous de sauvegarder votre site avant de personnaliser votre thème WordPress. De cette façon, si quelque chose ne va pas, vous pouvez restaurer votre site à partir de la sauvegarde et le faire fonctionner à nouveau en un rien de temps.

  • Astuce 2.3

    Essayez d’éviter de jouer avec le code de votre thème WordPress si vous n’êtes pas un développeur professionnel. Les fichiers de thème sont délicats, et une simple erreur de codage peut détériorer l’ensemble de votre site web, le rendant inaccessible. Ainsi, il est plus sûr d’utiliser des options conviviales comme le personnalisateur de thème ou un constructeur de page pour personnaliser votre thème WordPress.

  • Astuce 3.3

    Le moyen le plus sûr d’appliquer des personnalisations à un thème WordPress est de créer un environnement Staging pour votre site. Un site de pré-production est une copie de votre site web, sur laquelle vous pouvez effectuer des tâches comme mettre à jour et tester de nouveaux plugins ou de nouvelles conceptions sans affecter votre site en ligne.

    Si vous êtes un client SiteGround, vous pouvez profiter de l’ outil de transfert de données WordPress dans votre Site Tools . Avec lui, vous pouvez facilement créer un site de pré-production, le gérer et le pousser à remplacer votre site actif lorsque vous êtes prêt.

    Lorsque vous modifiez votre thème WordPress sur un site de pré-production, votre site en ligne restera intact même si quelque chose tourne mal.

  • Astuce 4.3

    Étant donné que les smartphones, les tablettes et les appareils de toutes tailles d’écran constituent une grande partie de la navigation sur le Web, la création d’un thème responsive est essentielle. Votre site doit conserver une apparence cohérente sur tous les appareils pour fidéliser votre public cible. Par conséquent, n’oubliez pas de vérifier si vos modifications dans la conception et les fonctionnalités de votre thème WordPress sont appropriées pour toutes les tailles d’écran.

  • Astuce 5.3

    Dans un autre registre, si vous souhaitez toucher un public plus large, vous devez également vous efforcer de personnaliser votre thème pour l’accessibilité. Des études montrent que 8,1 millions de personnes ont une déficience visuelle, ce qui nécessite des loupes/liseuses ou des pages à contraste plus élevé adaptées aux daltoniens. Plus de 62 % des adultes handicapés utilisent un ordinateur portable et 72 % un smartphone.

    Cependant, de nombreux sites web ne fournissent pas de modifications d’accessibilité pour rendre leurs pages accessibles aux personnes atteintes de certains handicaps. Apparemment, plus de 97% du million de sites web dans le monde n’offrent pas une bonne accessibilité. En conséquence, plus de 60 % des lecteurs d’écran signalent que l’accessibilité des contenus Web s’est dégradée.

    Les astuces clés pour garantir une meilleure accessibilité de votre site sont d’éviter le texte à faible contraste et d’ajouter du texte alternatif pour vos images. Faites la différence et n’oubliez pas de tester si vos personnalisations répondent aux besoins de ce large public.

  • Astuce 6.3

    Tous les thèmes WordPress approuvés respectent les normes de codage WordPress. Par conséquent, si vous modifiez le code de votre thème, assurez-vous que vous le faites aussi. Mettre un gâchis d’extraits de code dans vos fichiers de thème peut vous causer beaucoup de problèmes à long terme.

    Ainsi, essayez d’ajouter des commentaires pour vos modifications de code et de les structurer de manière appropriée, en conservant un aspect net et organisé. De cette façon, vous serez capable d’identifier rapidement les modifications précédentes.

  • Astuce 7..3

    Enfin, vous devriez établir un contrôle de version de votre site WordPress. Vous pouvez faire cela avec une extension comme WP Rollback, qui vous permet de restaurer une version précédente d’une extension ou d’un thème. Nous vous conseillons de maintenir votre site à jour; Cependant, parfois, une mise à jour de plugin peut endommager votre site web. Heureusement, avec WP Rollback, vous pouvez revenir à une version fonctionnelle de votre site web.

Conclusion

Maintenant, vous avez tout ce dont vous avez besoin pour concevoir un site web époustouflant et attirer l’attention de votre public. Gagnez en notoriété en personnalisant votre thème WordPress avec l’une des méthodes que nous avons décrites. Utilisez les astuces que nous avons partagées pour peaufiner l’apparence de votre site web et ainsi vous démarquer.

Nous espérons que notre tutoriel vous a intéressé et que vous êtes prêt à séduire votre public avec votre site web génial !

Menu du didacticiel

Partager cet article