Le CSS personnalisé vous permet de contrôler le style de votre site WordPress, en vous permettant de tout ajuster, des polices et des couleurs à la mise en page. Voici un guide sur la façon d'ajouter un CSS personnalisé à WordPress en utilisant différentes méthodes pour répondre à vos besoins.

Méthode 1 : Utilisation de la fonction CSS personnalisée intégrée à WordPress

WordPress dispose d'une option intégrée pour ajouter des feuilles de style CSS personnalisées directement dans le tableau de bord. C'est l'idéal pour des modifications mineures et pour les débutants.

1. Accéder au Customizer
   • Connectez-vous et allez sur Apparence > Personnaliser.

2. Sélectionnez "Additional CSS"
   • Dans la barre latérale gauche, cliquez sur CSS supplémentaire. Une zone de texte apparaît, dans laquelle vous pouvez saisir votre code CSS.

3. Ajoutez votre CSS personnalisé
   • Tapez votre code. Par exemple :

4. Prévisualisation et publication
   • Vous verrez un aperçu en direct des modifications. Lorsque vous êtes satisfait, cliquez sur Publier.

Meilleur pour: Ajustements simples, aucune modification du fichier du thème n'est nécessaire.

Méthode 2 : Utilisation du fichier Style.css du thème enfant

Il est préférable d'utiliser la fonction style.css pour les modifications plus importantes. De cette façon, vos modifications restent en sécurité même après les mises à jour du thème.

1. Activer un thème enfant
   • Si vous devez quand même commencer à en utiliser un, créez ou installez un thème enfant. Des plugins comme Configurateur de thème enfant faciliter les choses.

2. Accéder au fichier Style.css
   • En Apparence > Editeur de fichier de thèmesélectionnez la section style.css fichier.

3. Ajoutez votre CSS
   • Ajoutez votre feuille de style CSS personnalisée à l'emplacement fond du fichier. Exemple :

.custom-header { background-color : #2c3e50 ; color : #ffff ; }
.custom-button { background-color : #e74c3c ; color : #ffff ; padding : 10px 20px ; border-radius : 5px ; }

4. Enregistrer les modifications
   • Cliquez sur Fichier de mise à jour à épargner.

Meilleur pour: Changements de style plus importants qui devraient être maintenus après les mises à jour.

Méthode 3 : Ajout d'une feuille de style CSS personnalisée à l'aide d'un plugin

Si vous préférez éviter de modifier les fichiers ou les thèmes enfants, les plugins peuvent gérer les feuilles de style CSS personnalisées. C'est une solution idéale pour gérer les feuilles de style CSS sur plusieurs pages.

• CSS et JS personnalisés simples: Léger et facile à ajouter CSS et JavaScript.
• Code WPC: Ajoute des feuilles de style CSS pour l'ensemble du site ou pour chaque page.
• SiteOrigin CSS: Editeur visuel pour les débutants.

Exemple d'utilisation de WPCode :

1. Installer WPCode
   • Aller à Plugins > Ajouter un nouveau Plugin, recherchez Code WPCVous devez ensuite l'installer et l'activer.

2. Créez un Nouvel extrait CSS
   • Se rendre à l'adresse suivante Extraits de code > Ajouter un extrait. Choisissez Extrait CSS.

3. Choisir le placement
   • Pour que le CSS fonctionne sur l'ensemble du site, sélectionnez En-tête du site.

Meilleur pour: Gestion facile des CSS sans toucher aux fichiers du thème.

Méthode 4 : Ajouter un CSS personnalisé via les constructeurs de pages (Elementor, Divi)

Les constructeurs de pages comme Elementor et Divi intègrent généralement des options CSS, ce qui facilite la gestion des styles.

Dans Elementor :

1. Sélectionnez l'élément et l'accès Avancé Paramètres
   • Dans Elementor, sélectionnez un élément, allez à Avancé et trouvez CSS personnalisé (Elementor Pro).

2. Entrez le code CSS
   • Utilisez le mot-clé selector pour cibler l'élément. Exemple : le mot clé selector est utilisé pour cibler l'élément :

selector { background-color : #333 ; color : #fff ; }

Dans Divi :

1. Allez dans les options du thème
   • Naviguez jusqu'à Divi > Options du thème > CSS personnalisé.

2. Saisissez et enregistrez le code CSS
   • Ajoutez votre CSS personnalisé et enregistrez.

Meilleur pour Ceux qui utilisent déjà des constructeurs de pages avec un accès facile à des feuilles de style CSS personnalisées.

Méthode 5 : Ajouter directement des feuilles de style CSS via FTP ou l'éditeur de code

Si vous êtes familiarisé avec le protocole FTP et que vous souhaitez avoir un contrôle total, vous pouvez modifier les fichiers CSS directement sur le serveur.

Les étapes :

1. Connexion via FTP
   • Utilisez un client FTP (comme FileZilla) pour vous connecter à votre site.
2. Naviguez jusqu'au dossier Theme
   • Allez dans wp-content/themes/votre-thème-enfant/ et ouvrez style.css.

3. Modifier et télécharger
   • Ajoutez votre CSS personnalisé, enregistrez et téléchargez.

Meilleur pour: Utilisateurs avancés ayant besoin d'un contrôle complet.

Questions fréquemment posées

1. Pourquoi mon CSS personnalisé ne fonctionne-t-il pas ?

Effacez votre navigateur cache ou tout plugin de mise en cache du site, car la mise en cache peut bloquer les mises à jour.

2. Comment éviter la perte de CSS lors des mises à jour ?

Utilisez un thème enfant ou un plugin pour stocker les CSS plutôt que de modifier les fichiers du thème parent.