Comment ajouter des feuilles de style CSS personnalisées à votre site Web WordPress : un guide détaillé

Le CSS personnalisé est un outil puissant pour la construction et la gestion de votre site web WordPress. Il vous donne la liberté d'aller au-delà des options standard et d'ajuster la mise en page et l'apparence de votre site web. En utilisant le CSS personnalisé, vous pouvez prendre le contrôle total de la conception de votre site web, en personnalisant tout, des polices et des couleurs à l'espacement et aux animations.

Dans cet article, nous allons détailler comment ajouter facilement des feuilles de style CSS personnalisées à votre site WordPress tout enPas besoin de modifier les fichiers du thème.

Pourquoi ajouter des feuilles de style CSS personnalisées à WordPress ?

CSS (Cascading Style Sheets) est un langage de conception qui fonctionne en conjonction avec HTML pour vous aider à définir l'apparence des éléments du site web. CSS vous permet de contrôler la couleur, la taille, la disposition et l'affichage des éléments afin d'obtenir un effet de conception hautement personnalisé.

L'ajout de feuilles de style CSS personnalisées vous permet de personnaliser la conception et l'apparence de votre site web, des fonctionnalités qui ne sont pas disponibles avec les options par défaut. Il est facile de modifier l'apparence de votre thème WordPress avec quelques lignes de code simples, par exemple en changeant la couleur d'arrière-plan d'une page spécifique au lieu d'utiliser la même couleur sur l'ensemble de votre site.

Trois façons d'ajouter des feuilles de style CSS personnalisées à votre site Web WordPress

Voici trois façons d'ajouter des feuilles de style CSS personnalisées à votre site WordPress, chacune adaptée aux différents besoins et niveaux de compétence des utilisateurs.

Méthode 1 : ajouter des feuilles de style CSS personnalisées à l'aide du personnalisateur de thème

Depuis WordPress 4.7, vous pouvez ajouter des feuilles de style CSS personnalisées directement à partir de la zone d'administration de WordPress, ce qui est très facile à faire et vous pouvez voir l'effet des modifications immédiatement grâce à un aperçu en direct.

1. Aller dans le personnalisateur de thème: :
   • Accédez à la page Apparence " " Personnalisation dans le tableau de bord de WordPress.
   • L'interface du personnalisateur de thème WordPress sera lancée, ce qui vous permettra de prévisualiser le site web en temps réel, tout en trouvant diverses options de personnalisation dans le panneau de gauche.

2. Ajout d'une feuille de style CSS personnalisée: :
   • Dans le panneau de gauche, recherchez et cliquez sur l'onglet Autres CSS.
   • Cet onglet affiche une boîte simple dans laquelle vous pouvez saisir un code CSS personnalisé.

3. Prévisualisation et publication des modifications en temps réel: :
   • La saisie d'une règle CSS valide permet d'en voir immédiatement l'effet dans l'aperçu en direct du site.
   • Lorsque vous êtes satisfait des modifications, cliquez sur le bouton "poste"pour enregistrer les modifications.

prenez noteSi vous passez à un autre thème, vous devez copier et coller ce code CSS dans le nouveau thème. Si vous passez à un autre thème, vous devez copier et coller ce code CSS dans le nouveau thème.

Méthode 2 : Utiliser WPCode Plugin pour ajouter des CSS personnalisés

L'une des limites du personnalisateur de thème est que son code CSS ne fonctionne que pour le thème actuel. Si vous changez de thème, vous devrez peut-être copier et coller à nouveau le code personnalisé. Pour éviter ce problème, vous pouvez utiliser le plugin WPCode.

1. Installation et activation du plug-in WPCode: :
   • Installez et activez le plugin WPCode à partir du dépôt de plugins WordPress. Ce plugin vous permet d'ajouter un code personnalisé à votre site web WordPress et de passer d'un thème à l'autre en toute transparence.
2. Ajouter des extraits CSS personnalisés: :
   • Une fois le plugin activé, rendez-vous sur la page Code Snippets ""+ Add New Code" dans le tableau de bord de WordPress.
   • Ajoutez un titre identifiant à votre extrait, puis tapez ou collez le code CSS personnalisé dans la boîte de prévisualisation du code.
   • Sélectionnez "CSS Code Snippet" dans le menu déroulant "Code Type".

3. Sélectionner la méthode d'insertion: :
   • Si vous souhaitez que le code soit appliqué à l'ensemble du site, sélectionnez "Insertion automatique"Options.
   • Pour utiliser ce code uniquement sur des pages ou des messages spécifiques, vous pouvez sélectionner "code court"Méthodes.

4. Activer et enregistrer l'extrait de code: :
   • Activez l'interrupteur "Activate" et cliquez sur le bouton "Save Code Snippet". Votre CSS personnalisé sera désormais disponible dans toutes les parties de votre site web sans avoir à vous soucier des changements de thème.

Méthode 3 : Ajout d'une feuille de style CSS personnalisée avec l'éditeur de site complet (FSE)

L'éditeur de site complet (FSE) est une nouvelle fonctionnalité de WordPress qui permet aux utilisateurs de modifier la mise en page et la conception d'un site web entier à l'aide d'un éditeur de blocs. Bien que cette fonctionnalité ne soit actuellement disponible que pour certains thèmes, elle offre aux utilisateurs des options de personnalisation plus souples.

1. Visiter le personnalisateur de thèmes: :
   • Tout d'abord, vous devez vous assurer que votre thème prend en charge l'éditeur de site complet. Après vous être connecté à votre administrateur WordPress, copiez et collez l'URL suivante dans votre navigateur, en remplaçant "exemple.com" par le nom de domaine de votre site web :https://example.com/wp-admin/customize.php
   • Vous accéderez ainsi à la version restreinte du personnalisateur de thème, qui se trouve dans le menu de gauche, à l'adresse "CSS supplémentaire"Options.
2. Ajout d'une feuille de style CSS personnalisée: :
   • Cliquez sur l'onglet "Extra CSS" et saisissez votre code CSS.
   • Après avoir saisi le code, cliquez sur le bouton "Publier" pour enregistrer les modifications.

Utilisation de plugins CSS personnalisés et ajout de CSS aux thèmes

Les méthodes décrites ci-dessus sont recommandées pour les débutants. Certains utilisateurs avancés peuvent souhaiter ajouter des feuilles de style CSS personnalisées directement dans les fichiers de leur thème ; cependant, l'ajout de feuilles de style CSS personnalisées directement dans le fichierthème parentn'est pas une bonne pratique, car ces modifications peuvent être écrasées lors de la mise à jour du thème.

Utilisation recommandéesous-thèmepour enregistrer les feuilles de style CSS personnalisées. Bien que la création de thèmes enfants puisse être un peu compliquée pour les débutants, il s'agit d'un moyen sûr de gérer le code personnalisé.

Autres options de plug-in

Si vous ne souhaitez pas écrire le code CSS manuellement, envisagez d'utiliser certains plugins pour simplifier le processus :

1. CSS HeroCSS Hero : Il s'agit d'un plugin puissant qui vous permet d'éditer presque tous les styles CSS sur votre site WordPress sans écrire une seule ligne de code. Avec CSS Hero, il est facile d'ajuster les marges, les polices, les couleurs, etc. des éléments de la page.
2. SeedProd: Il s'agit d'un plugin de construction de site web par glisser-déposer qui aide à créer des thèmes WordPress personnalisés et des pages de connexion. Il vous permet également d'éditer les paramètres CSS globaux, adaptés à la création d'un site web.Les utilisateurs qui ne souhaitent pas avoir un accès direct au code.

résumés

Prenez le contrôle total de la conception de votre site en ajoutant des feuilles de style CSS personnalisées à votre site WordPress, en personnalisant tout, des polices et des couleurs à la mise en page et aux animations. Que vous utilisiez le personnalisateur de thème, le plugin WPCode ou l'éditeur de site complet (FSE), il existe une solution adaptée à votre niveau de compétence et à vos besoins lorsqu'il s'agit de créer un site web autodidacte avec WP.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.