Comment personnaliser un thème WordPress avec CSS

Savez-vous que vous pouvez expérimenter votre site WordPress et changer son apparence avec CSS? Vous pouvez ajouter de petits changements esthétiques, ajouter des couleurs, modifier la mise en page ou même modifier complètement votre thème WordPress.

Le contrôle de l’apparence de votre site Web vous donne la possibilité de le créer comme vous l’aimez.

Vous pouvez ajouter votre touche personnelle au site Web de votre marque, le rendant très différent des autres personnes ou entreprises utilisant le même thème WordPress !

Dans cet article, examinons de plus près comment vous pouvez personnaliser un thème WordPress avec CSS.

Qu’est-ce que CSS ?

CSS ou Cascading Style Sheets est un langage Web utilisé pour présenter des pages Web. Avec CSS, vous pouvez définir la mise en page, les couleurs, la police, l’arrière-plan et d’autres éléments qui peuvent rendre nos pages Web présentables pour les utilisateurs. C’est pourquoi nous appelons le langage côté client frontal CSS tel qu’il est exécuté côté utilisateur. CSS est utilisé en combinaison avec HTML et Javascript pour rendre les sites Web réactifs. Si vous pensez que vous devez être un programmeur chevronné pour apprendre et implémenter CSS, ce n’est pas vrai. Vous pouvez apprendre le CSS facilement et l’utiliser pour modifier la présentation de votre site, même si vous n’avez aucune connaissance en programmation auparavant.

Qu’est-ce que WordPress ?

WordPress est le moyen le plus populaire et le plus simple de démarrer votre site Web ou votre blog. Techniquement parlant, WordPress est un système de gestion de contenu open source. Il gère tous les aspects importants d’un site Web tels que le contenu, la mise en page, la sécurité, etc. Vous pouvez créer n’importe quel type de site Web à l’aide de WordPress. Par exemple, les sites Web d’entreprise, les sites Web de commerce électronique, les portefeuilles, les CV, les réseaux sociaux, etc. WordPress est gratuit et est livré avec divers thèmes et plugins. On peut changer l’apparence de leur site WordPress en utilisant CSS.

CSS et WordPress

Pour commencer à éditer votre thème WordPress, vous devez d’abord comprendre certaines choses – les fichiers de modèle, les balises de modèle et la feuille de style CSS. Les fichiers de modèle contrôlent votre thème WordPress. Vous pouvez voir différents fichiers comme header.php, archive.php. Ce sont des fichiers modèles qui contrôlent votre thème WordPress. Les balises de modèle sont utilisées pour contrôler ces fichiers et d’autres éléments de la base de données. La feuille de style CSS ou style.css est le fichier que vous devez rechercher pour modifier l’apparence de votre site Web. Vous modifierez le code dans style.css pour personnaliser votre thème WordPress.

Comment personnaliser un thème WordPress avec CSS

Tout d’abord, vous devez comprendre que si vous souhaitez personnaliser votre thème WordPress avec CSS, vous devez soit y ajouter un certain code, soit modifier le code qui est déjà écrit. Je vous recommande d’apprendre au moins quelques bases de CSS, HTML, JavaScript et PHP avant de commencer à modifier votre thème.

Une autre chose à noter est que si vous apportez des modifications à la feuille de style de votre thème WordPress, ces modifications seront supprimées une fois votre thème mis à jour. Vous devez donc en savoir plus sur les thèmes enfants et utiliser un thème enfant pour apporter des modifications à l’aide de style.css, functions.php ou d’autres fichiers de modèle de thème. J’ai parlé des thèmes enfants plus loin dans cet article.

Il existe deux façons de modifier ou d’ajouter du CSS à votre thème

1 Utilisation du tableau de bord

Cela vous permet de modifier votre thème WordPress directement à l’aide de la feuille de style CSS dans votre tableau de bord WordPress. Mais, vous devez noter que tout changement important apporté ici pourrait être difficile à annuler. Je vous recommande donc de faire une sauvegarde du CSS d’origine de votre thème WordPress, puis d’apporter des modifications. Je vous recommande également de créer un thème enfant pour votre site. Si vous ne savez pas ce que c’est, lisez simplement la section suivante et revenez.

Créez un thème enfant, puis, dans ce thème enfant, accédez à Apparence, puis à Éditeur de thème. Une fenêtre contextuelle apparaîtrait lorsque vous utilisez un thème enfant, mais il n’y a rien à craindre. Cliquez simplement sur "J’ai compris" et vous entrerez dans la feuille de style. Si vous souhaitez apporter des modifications aux fichiers de modèle tels que header.php, functions.php, etc., vous devez d’abord apprendre PHP, puis essayer vos compétences en codage. Sinon, contentez-vous de modifier la feuille de style.

Qu’est-ce qu’un thème enfant dans WordPress ?

Un thème enfant est une réplique d’un thème original (également appelé thème parent). Le thème enfant inclut les fonctionnalités et le style du thème parent. Il est recommandé d’utiliser un thème enfant lorsque vous souhaitez conserver le code d’origine intact tout en apportant des modifications à la conception de votre site. Ainsi, vous pouvez créer de nouveaux designs plus performants sur le thème enfant et conserver les fonctionnalités du thème parent. Voici quelques avantages de l’utilisation d’un thème enfant :

• Vous n’avez pas à vous soucier de jouer avec le code d’origine car le thème parent est sûr et non modifié.
• Vous pouvez utiliser le codage pour étendre les fonctionnalités d’un thème parent, l’expérimenter et créer quelque chose de nouveau.
• Vous n’avez pas besoin de créer un thème à partir de zéro. Si par hasard vous oubliez une certaine fonctionnalité ou fonctionnalité, le code du thème parent est là pour vous.

Cependant, vous devez être très prudent lorsque vous utilisez des thèmes enfants. L’une des raisons est que cela nécessiterait des compétences et de l’expérience en matière de codage. Si vous débutez avec CSS, HTML, JavaScript et PHP, donnez-vous d’abord le temps de devenir un expert. Sinon, la courbe d’apprentissage pourrait être assez élevée.

Une autre chose à prendre en compte lors de l’utilisation d’un thème enfant est que vous devez d’abord vérifier les mises à jour. Si votre thème parent est mis à jour avec une fonctionnalité que vous ne souhaitez pas, vous ne devez pas mettre à jour votre thème WordPress car cela se refléterait dans le thème de votre enfant. Parfois, si l’une des fonctionnalités est supprimée dans le thème principal et que vous le mettez à jour, votre thème enfant peut être affecté. Ainsi, augmentant votre travail de codage.

2 Utilisation du serveur FTP

Il se peut que vous ne puissiez pas accéder directement au tableau de bord de votre thème. Parfois, l’utilisation de plugins désactive cette fonctionnalité. Vous devez donc utiliser FTP ou File Transfer Protocol pour accéder à distance aux fichiers de votre site. Commencez par télécharger n’importe quelle application client FTP. Contactez votre hébergeur et demandez vos identifiants FTP.

Au fur et à mesure que vous entrerez les informations d’identification, vous serez autorisé à accéder à style.css. Apportez maintenant des modifications au fichier, enregistrez vos modifications et téléchargez-les sur le serveur. Cela pourrait être une méthode assez mouvementée pour ajouter du CSS à votre site, alors utilisez-le uniquement si vous n’avez pas accès à votre tableau de bord.

Des moyens simples d’ajouter du CSS à votre site WordPress

Il existe deux méthodes simples pour ajouter du CSS à votre site WordPress. Ils incluent l’utilisation d’un personnalisateur WordPress ou d’un plugin. Il sera beaucoup plus facile d’ajouter votre code CSS en utilisant ces méthodes. L’ajout de CSS à l’aide d’un personnalisateur WordPress ou d’un plugin ne ferait pas non plus disparaître votre code une fois le thème mis à jour. Cependant, je vous recommande toujours de conserver une sauvegarde du code original de votre site Web au cas où quelque chose se produirait par inadvertance. Voyons maintenant les deux façons simples d’ajouter du CSS à votre site WordPress.

1 Édition via WordPress Customizer

Connectez-vous simplement à votre backend WordPress. Cliquez sur Apparence puis cliquez sur Personnaliser. Cela ouvrira un écran de personnalisation. Cet écran vous montre un aperçu de votre site Web à ce moment et il y aura quelques options sur le côté gauche de l’écran pour personnaliser des éléments comme les couleurs, les menus ou d’autres widgets.

Sur le côté gauche de l’écran, vous verrez une option appelée CSS supplémentaire. C’est là que vous devez saupoudrer votre magie. Lorsque vous cliquerez sur le CSS supplémentaire, une nouvelle page s’ouvrira avec le code de votre site Web dessus. Maintenant, vous pouvez apporter des modifications au code et si vous l’avez écrit correctement (pas d’erreurs !), vous verrez les modifications se refléter dans l’aperçu.

Le code CSS que vous écrivez ici ne changera pas ou ne disparaîtra pas une fois votre thème mis à jour ! Mais, si vous passez à un nouveau thème, le code écrit ici sera effacé. Il est donc suggéré de sauvegarder votre CSS avant de changer de thème.

2 Utiliser un plug-in

Dans cette section, je discuterai de quatre plugins différents que vous pouvez utiliser pour modifier le CSS de votre thème WordPress – Advanced CSS Editor, Modular Custom CSS, SiteOrigin CSS et CSS Hero. Si vous ne le savez pas, les plugins WordPress sont de petits logiciels qui peuvent être attachés à WordPress pour étendre ses fonctionnalités. Certains plugins sont disponibles gratuitement tandis que pour certains, vous devez payer de l’argent pour les ajouter à votre site WordPress. Les plugins peuvent vous aider à modifier ou à ajouter du CSS à votre site WordPress en quelques clics seulement !

Utilisation du plugin Advanced CSS Editor

Le premier plugin que je recommanderais s’appelle Advanced CSS Editor. Ce plugin vous permet d’ajouter du CSS pour l’apparence de votre site Web sur un ordinateur de bureau, une tablette et un téléphone mobile. De cette façon, vous pouvez affiner votre site Web pour chaque appareil. Pour commencer l’édition, installez le plugin. Accédez à votre tableau de bord WordPress, cliquez sur Apparence, puis sur Personnalisateur. Vous verrez une nouvelle option appelée Advanced CSS Editor. Ajoutez le CSS personnalisé que vous souhaitez et enregistrez les modifications.

Un énorme avantage de l’utilisation de ce plugin est que vous pouvez contrôler l’apparence de votre site Web sur différents appareils. De plus, vous pouvez toujours utiliser la technique que j’ai expliquée au point #1 pour modifier votre thème WordPress. Cependant, pour certaines personnes qui ne sont pas habituées au codage, apporter des modifications à chaque type d’appareil peut représenter beaucoup de travail. Ils devraient d’abord apprendre à écrire du CSS pour chaque type d’appareil.

Utilisation du plugin CSS personnalisé modulaire

Le deuxième plugin que je recommanderais est Modular Custom CSS. Ce plugin vous aide à apporter des modifications au thème de votre site WordPress. Par exemple, si vous utilisez actuellement un thème et que vous apportez des modifications à ce thème à l’aide de CSS modulaire personnalisé. Ensuite, vous décidez de choisir un autre thème pour votre site. Ainsi, les modifications apportées au premier thème ne seraient pas supprimées. Ils resteront intacts dans ce plugin. Vous pouvez également ajouter du CSS global à l’aide de ce plugin. Ce CSS resterait le même malgré les changements de thème.

Pour utiliser ce plugin, commencez par télécharger le plugin et ajoutez-le à votre site WordPress. Cliquez ensuite sur Apparence -> Personnalisateur -> CSS supplémentaire. Le seul inconvénient que j’ai pu trouver à propos de cette méthode est que l’ajout de CSS global n’est peut-être pas toujours la meilleure idée. Parfois, le CSS global peut ne pas fonctionner avec un thème et cela peut être un gâchis.

Utilisation du plugin CSS SiteOrigin

Le troisième plugin que je recommande est connu sous le nom de SiteOrigin CSS. Ce plugin vous donne des contrôles visuels qui vous permettent de modifier l’apparence de votre site en temps réel. Ce plugin convient aux utilisateurs CSS débutants et avancés. L’aperçu en temps réel et les contrôles visuels aident les débutants tandis que les utilisateurs avancés peuvent coder rapidement en utilisant la fonction d’auto-complétion de code de ce plugin.

Ce plugin ouvre un éditeur CSS autonome pour WordPress. Pour accéder à ce plugin, téléchargez d’abord le plugin et ajoutez-le à votre site WordPress. Cliquez ensuite sur Apparence -> CSS personnalisé. Une grande fonctionnalité de ce plugin est que vous pouvez modifier n’importe quel élément de votre site Web en cliquant simplement dessus. Vous pouvez modifier certains éléments simples du thème sans utiliser CSS. Cependant, un inconvénient d’une telle fonctionnalité pourrait être que si vous apportez des modifications à de nombreux éléments différents d’un thème, il peut être difficile de les suivre.

Utilisation du plugin CSS Hero

Maintenant, c’est quelque chose d’intéressant. Ma troisième recommandation de plugin inclut un plugin qui vous aide à modifier le CSS sur votre site WordPress par glisser-déposer. Il est connu sous le nom de CSS Hero. Pour éditer le CSS à l’aide de ce plugin, il vous suffit de passer la souris sur l’élément que vous souhaitez modifier et de cliquer dessus. Ensuite, vous pouvez l’ajuster comme vous le souhaitez. Voici quelques fonctionnalités étonnantes de ce plugin :

• Ce plugin comprend une édition facile des styles de police et de la topographie. Le plugin prend en charge les polices Google Fonts et TypeKit.
• Vous pouvez également utiliser un sélecteur de couleurs et expérimenter un changement de couleur et d’arrière-plan en direct. Vous pouvez facilement trouver vos dernières couleurs utilisées.
• Vous pouvez simplement faire glisser un curseur et voir à quoi ressemblent les marges.
• Le plugin prend également en charge des éléments de site tels que le dégradé, les ombres de boîte, les ombres de texte et d’autres propriétés CSS modernes.
• Vous pouvez enregistrer des instantanés de vos modifications avec ce plugin. Vous n’êtes donc pas obligé de tout faire vivre. Continuez à travailler et publiez la version finale.
• Ce plugin n’affecte pas vos fichiers de thème. Vous n’avez donc pas à vous soucier des mises à jour qui ruinent vos modifications.

Comparaison des différentes manières de personnaliser le thème WordPress avec CSS

Ainsi, aujourd’hui, nous avons découvert 4 façons différentes de personnaliser un site WordPress à l’aide de CSS. Vous pouvez modifier ou ajouter du CSS à votre thème WordPress à l’aide du tableau de bord ou vous pouvez utiliser une application FTP. Vous pouvez utiliser WordPress Customiser pour ajouter ou modifier du CSS ou enfin, vous pouvez utiliser des plugins pour personnaliser votre thème WordPress avec CSS.

• Si vous débutez avec WordPress et CSS, je vous recommande d’utiliser WordPress Customiser pour modifier ou ajouter du CSS. De cette façon, vous pouvez vérifier les modifications dans l’aperçu et ne pas avoir à vous soucier de la suppression des modifications une fois le thème mis à jour.
• Si vous avez une certaine expérience avec CSS et WordPress et que vous avez déjà travaillé sur des plugins, je vous recommande de choisir l’un des quatre plugins que j’ai partagés avec vous aujourd’hui. Les plugins offrent de meilleures options et possibilités pour améliorer votre site.
• Si vous êtes un vétéran du CSS. Vous avez créé des sites Web et savez comment CSS fonctionne à fond. Ensuite, je vous recommanderais d’utiliser le tableau de bord ou le FTP pour apporter des modifications directement dans la feuille de style WordPress.

Il est important de savoir à quoi ressemble votre site Web

La conception, la mise en page, les couleurs, les polices ou le thème de votre site Web sont très importants. Cela aide à transmettre le sentiment que vous souhaitez que l’utilisateur ait à propos de votre entreprise. Il peut mettre en place une image de marque unique et définir votre identité.

La conception et la mise en page de votre site Web jouent également un rôle majeur dans l’amélioration de l’expérience utilisateur. Si votre design n’est pas très bon, vous avez placé des publicités aux mauvais endroits, les couleurs de votre site Web sont assez gênantes, tout cela pourrait affecter l’expérience utilisateur.

Une conception et une mise en page de qualité peuvent vous aider à contrôler la manière dont le message est transmis aux utilisateurs. Vous pouvez attirer leur attention au bon moment et les conduire sur une voie qui répond à vos objectifs. Ainsi, changer, ajouter ou modifier le CSS de votre site WordPress est une question de responsabilité. La responsabilité d’améliorer votre site Web pour les utilisateurs.

J’espère que ces trucs et astuces pour personnaliser votre thème WordPress avec CSS vous aideront à donner une touche personnalisée à votre site Web. Si vous utilisez l’un d’entre eux ou si vous l’avez déjà utilisé, partagez vos expériences dans la section des commentaires et faites passer le mot !