Comment personnaliser votre site WordPress avec CSS: 3 méthodes simples

WordPress a évolué au fil des ans, et aujourd'hui, c'est une plate-forme assez flexible et facile à personnaliser grâce à son éditeur de blocs, Gutenberg. Pourtant, il y aura des moments où vous aurez besoin d'un peu plus de portée que l'éditeur Gutenberg ne fournit.

C'est là que le CSS personnalisé est utile. Le style CSS vous permet de modifier les couleurs, l'espacement, les polices, les mises en page et essentiellement tous les autres éléments visuels de votre site Web WordPress, ce qui vous permet de lui donner exactement l'apparence que vous souhaitez.

Dans cet article, nous vous expliquerons les éléments essentiels de la personnalisation de votre site Web WordPress avec CSS.

Pourquoi personnaliser votre site Web avec CSS ?

L'ajout de CSS personnalisé n'est qu'une des méthodes que vous pouvez utiliser pour affiner l'apparence de votre site. D'autres méthodes incluent l'utilisation d'un thème WordPress premium bien présenté, ou l'installation d'un générateur de page.

Bien que ces deux méthodes soient un peu plus faciles à utiliser pour les débutants et ne nécessitent aucune connaissance en codage, l'utilisation de CSS personnalisé est plus avantageuse de deux manières principales :

Coût zéro

Les thèmes premium et les constructeurs de pages WordPress peuvent être pratiques, mais ils ont un coût, en dollars et en cents. Armé de la connaissance de la façon d'écrire du CSS personnalisé, d'autre part, vous pouvez obtenir les mêmes effets sans encourir de dépenses supplémentaires.

Ballonnement minimal

Les constructeurs de pages et les thèmes bien présentés sont conçus pour offrir aux utilisateurs plus de flexibilité et un large éventail d'options pour personnaliser leurs sites Web. Pour cette raison, ils ont tendance à gonfler les sites Web, ce qui les ralentit potentiellement.

En revanche, lors de l'écriture de CSS personnalisés, vous n'ajouterez que les fonctionnalités nécessaires, ce qui se traduira généralement par des sites Web plus légers et des vitesses de chargement plus rapides.

3 méthodes simples pour personnaliser votre site WordPress avec CSS

J'espère que vous savez déjà comment écrire du CSS. Une fois que vous êtes familiarisé avec les bases, vous pouvez utiliser l'une des méthodes suivantes pour ajouter du CSS personnalisé à votre site Web WordPress :

Méthode 1: utiliser le personnalisateur WordPress

Avec WordPress 4.7 ou toute version ultérieure, vous pouvez ajouter du CSS personnalisé directement depuis la zone d'administration. C'est la méthode la plus simple, et comme un aperçu en direct est disponible, vous pouvez voir toutes les modifications que vous apportez en temps réel.

C'est aussi le plus recommandé, car toutes les modifications que vous apporterez sont enregistrées dans WordPress lui-même. Cela signifie que même si vous modifiez ou mettez à jour votre thème, vous ne perdrez pas votre CSS personnalisé.

Voici les étapes à suivre :

Étape 1: Aller vers Apparence > Personnaliser.

Cela ouvrira le personnalisateur de thème WordPress, qui vous montrera un aperçu en direct de votre site sur la droite, ainsi que quelques options de personnalisation sur la gauche. Faites défiler vers le bas du panneau de gauche et vous trouverez un CSS supplémentaire languette.

Étape 2: Clique sur le CSS supplémentaire Languette.

Cela ouvrira une petite boîte dans le volet de gauche où vous pourrez ajouter votre CSS personnalisé. Vous pouvez saisir autant de lignes de code CSS que vous le souhaitez. L'avantage de cet éditeur est qu'il valide votre code, vous alertant en cas d'erreur.

Étape 3: Publiez vos modifications.

Toute règle CSS valide que vous ajoutez s'affichera dans la zone d'aperçu en direct sur la droite. Pour appliquer les modifications à votre site, cliquez sur le bouton Publier en haut du volet gauche une fois que vous êtes satisfait. Si vous ne souhaitez pas que les modifications prennent effet immédiatement, vous pouvez également planifier la publication à une date ultérieure ou enregistrer votre travail en tant que brouillon.

Il est important de noter que toutes les modifications que vous apportez à l'aide du personnalisateur sont liées à votre thème actuel. Si jamais vous passez à un autre thème, les modifications seront perdues à moins que vous ne copiiez votre CSS personnalisé et que vous l'ajoutiez au nouveau thème. Il est recommandé d'enregistrer tous les CSS personnalisés que vous ajoutez à un thème sur un bloc-notes. De cette façon, vous pouvez simplement copier le code et le coller dans la section « CSS supplémentaire » pour un thème différent.

Si cela vous semble trop de travail et que vous préférez une solution qui vous permet d'appliquer votre CSS personnalisé à n'importe quel thème WordPress que vous utilisez, la méthode suivante est pour vous.

Méthode 2. Utiliser un plugin

Les plugins CSS personnalisés stockent votre CSS personnalisé séparément de votre thème, permettant à vos modifications d'être appliquées quel que soit le thème que vous utilisez. Ces plugins sont également livrés avec des fonctionnalités supplémentaires telles que l'auto-complétion qui peuvent faciliter l'ajout de CSS.

Le seul inconvénient est qu'il s'agit de logiciels tiers, ce qui signifie qu'ils peuvent potentiellement ralentir votre site. Cependant, la plupart de ces plugins sont légers, ils ont donc généralement peu d'impact sur les performances de votre site. Voici quelques-uns des meilleurs plugins CSS personnalisés que vous pouvez utiliser :

• CSS personnalisé simple

CSS personnalisé simple est l'un des plugins CSS personnalisés les plus populaires. Il est léger, facile à utiliser et offre d'excellentes fonctionnalités. La configuration est facile. Tout ce que vous avez à faire est d'installer et d'activer le plugin. Ensuite, naviguez jusqu'au Apparence dans le volet gauche de votre tableau de bord.

Vous verrez une nouvelle option appelée CSS personnalisé. En cliquant dessus, vous ouvrirez un éditeur dans lequel vous pourrez ajouter votre CSS personnalisé. Clique le Mettre à jour le CSS personnalisé bouton pour enregistrer vos modifications. Pour afficher les modifications, actualisez simplement votre site Web.

• CSS et JS personnalisés simples

Si vous voulez encore plus de fonctionnalités, le Plugin CSS et JS personnalisé simple est une excellente option. En plus d'ajouter du CSS, il vous permet d'ajouter des entrées JavaScript.

• Héros CSS

Si vous ne voulez pas écrire une seule ligne de code, le Plugin CSS Hero est parfait pour vous. Ce plugin propose un éditeur CSS visuel avec des menus déroulants et des champs de saisie qui vous permettent de modifier presque n'importe quel style CSS sur votre site sans avoir à écrire de code.

Méthode 3. Modifier le code brut

Les deux méthodes que nous avons décrites ci-dessus vous permettent d'ajouter du CSS personnalisé à votre site sans avoir besoin de toucher à aucun de vos fichiers de thème. Mais, dans certains cas, vous voudrez peut-être modifier le CSS de votre thème ou ajouter directement du CSS personnalisé au code de votre thème.

Pour ce faire, vous devrez accéder à la feuille de style de votre site Web. Un moyen simple d'accéder à cette feuille de style consiste à Éditeur de thème sur votre tableau de bord WordPress.

Avant d'aller plus loin, cependant, vous devez mettre en place quelques mesures de protection. D'abord, sauvegarder votre site web. Lors de l'édition de vos fichiers de thème, il est facile de faire des erreurs qui peuvent potentiellement faire planter votre site.

Une sauvegarde garantit que vous disposez d'un site Web fonctionnel auquel revenir. Prochain, créer un thème enfant. Si vous apportez des modifications directes à votre thème parent, les modifications seront perdues chaque fois que le thème est mis à jour.

Une fois ces protections en place, connectez-vous à votre backend WordPress. Aller à Apparence > Éditeur de thème. Lorsque vous cliquez sur l'option de l'éditeur de thème, vous verrez une fenêtre contextuelle vous avertissant de ne pas apporter de modifications directes à vos fichiers de thème. Si vous suivez les étapes ci-dessus, vous êtes prêt à partir.

Cliquez sur je comprends procéder.

Après avoir cliqué, vous devriez voir la feuille de style de votre site par défaut. Sinon, regardez simplement dans le volet de droite et cliquez sur style.css sous le Feuille de style option.

À partir de là, vous pouvez apporter des modifications directes à vos fichiers de thème. N'oubliez pas de cliquer Enregistrer et mettre à jour une fois que vous avez terminé.

Prenez le contrôle de l'apparence de votre site avec un CSS personnalisé

Apprendre à écrire du CSS personnalisé sur WordPress peut prendre un certain temps pour les débutants, mais cela vous donnera un véritable contrôle sur l'apparence de votre site Web. Et cela à un coût nul et avec un impact minimal sur les performances de votre site.

Si vous préférez ne pas faire de conception manuelle, cependant, il existe d'autres moyens de faire le travail, par exemple en utilisant l'un des meilleurs constructeurs de pages pour WordPress.

5 constructeurs de pages WordPress qui peuvent vous aider à créer des sites Web incroyables

Vous voulez donner à votre site WordPress un look incroyable mais vous ne pouvez pas vous permettre un développeur? Essayez plutôt ces constructeurs de pages WordPress.

Lire la suite

A propos de l'auteur