![\"\"](\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/15-3-1024x548.jpg\")
<\/figure><\/div>M\u00e9thode 1 : Utilisation de la fonction CSS personnalis\u00e9e int\u00e9gr\u00e9e \u00e0 WordPress<\/h3>
WordPress dispose d'une option int\u00e9gr\u00e9e pour ajouter des feuilles de style CSS personnalis\u00e9es directement dans le tableau de bord. C'est l'id\u00e9al pour des modifications mineures et pour les d\u00e9butants.<\/p>
- Acc\u00e9der au Customizer<\/strong>
- Connectez-vous et allez sur Apparence > Personnaliser<\/strong>.<\/li><\/ul><\/li><\/ol>
![\"\"](\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/image-524.png\")
<\/figure><\/div>- S\u00e9lectionnez \"Additional CSS\"<\/strong>
- Dans la barre lat\u00e9rale gauche, cliquez sur CSS suppl\u00e9mentaire<\/strong>. Une zone de texte appara\u00eet, dans laquelle vous pouvez saisir votre code CSS.<\/li><\/ul><\/li><\/ol>
![\"\"](\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/image-526.png\")
<\/figure><\/div>- Ajoutez votre CSS personnalis\u00e9<\/strong>
- Tapez votre code. Par exemple :<\/li><\/ul><\/li><\/ol>
- Pr\u00e9visualisation et publication<\/strong>
- Vous verrez un aper\u00e7u en direct des modifications. Lorsque vous \u00eates satisfait, cliquez sur Publier<\/strong>.<\/li><\/ul><\/li><\/ol>
Meilleur pour<\/strong>: Ajustements simples, aucune modification du fichier du th\u00e8me n'est n\u00e9cessaire.<\/p>
M\u00e9thode 2 : Utilisation du fichier Style.css du th\u00e8me enfant<\/h3>
Il est pr\u00e9f\u00e9rable d'utiliser la fonction style.css<\/strong> pour les modifications plus importantes. De cette fa\u00e7on, vos modifications restent en s\u00e9curit\u00e9 m\u00eame apr\u00e8s les mises \u00e0 jour du th\u00e8me.<\/p>
- Activer un th\u00e8me enfant<\/strong>
- Si vous devez quand m\u00eame commencer \u00e0 en utiliser un, cr\u00e9ez ou installez un th\u00e8me enfant. Des plugins comme Configurateur de th\u00e8me enfant<\/strong> faciliter les choses.<\/li><\/ul><\/li><\/ol>
<\/figure>
- Acc\u00e9der au fichier Style.css<\/strong>
- En Apparence > Editeur de fichier de th\u00e8me<\/strong>s\u00e9lectionnez la section style.css<\/mark> fichier.<\/li><\/ul><\/li><\/ol>
![\"\"](\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/image-533.png\")
<\/figure><\/div>- Ajoutez votre CSS<\/strong>
- Ajoutez votre feuille de style CSS personnalis\u00e9e \u00e0 l'emplacement fond<\/strong> du fichier. Exemple :<\/li><\/ul><\/li><\/ol>
.custom-header { background-color : #2c3e50 ; color : #ffff ; }\n.custom-button { background-color : #e74c3c ; color : #ffff ; padding : 10px 20px ; border-radius : 5px ; }<\/code><\/pre>- Enregistrer les modifications<\/strong>
- Cliquez sur Fichier de mise \u00e0 jour<\/strong> \u00e0 \u00e9pargner.<\/li><\/ul><\/li><\/ol>
Meilleur pour<\/strong>: Changements de style plus importants qui devraient \u00eatre maintenus apr\u00e8s les mises \u00e0 jour.<\/p>
M\u00e9thode 3 : Ajout d'une feuille de style CSS personnalis\u00e9e \u00e0 l'aide d'un plugin<\/h3>
Si vous pr\u00e9f\u00e9rez \u00e9viter de modifier les fichiers ou les th\u00e8mes enfants, les plugins peuvent g\u00e9rer les feuilles de style CSS personnalis\u00e9es. C'est une solution id\u00e9ale pour g\u00e9rer les feuilles de style CSS sur plusieurs pages.<\/p>
- CSS et JS personnalis\u00e9s simples<\/a><\/strong>: L\u00e9ger et facile \u00e0 ajouter CSS et JavaScript.<\/li>\n\n
- Code WPC<\/a><\/strong>: Ajoute des feuilles de style CSS pour l'ensemble du site ou pour chaque page.<\/li>\n\n
- SiteOrigin CSS<\/a><\/strong>: Editeur visuel pour les d\u00e9butants.<\/li><\/ul>
Exemple d'utilisation de WPCode :<\/h4>
- Installer WPCode<\/strong>
- Aller \u00e0 Plugins > Ajouter un nouveau<\/strong> Plugin<\/strong>, recherchez Code WPC<\/mark>Vous devez ensuite l'installer et l'activer.<\/li><\/ul><\/li><\/ol>
![\"\"](\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/image-535.png\")
<\/figure><\/div>- Cr\u00e9ez un Nouvel extrait CSS<\/mark><\/strong>
- Se rendre \u00e0 l'adresse suivante Extraits de code > Ajouter un extrait<\/strong>. Choisissez Extrait CSS<\/strong>.<\/li><\/ul><\/li><\/ol>
![\"\"](\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/image-536.png\")
<\/figure><\/div>- Choisir le placement<\/strong>
- Pour que le CSS fonctionne sur l'ensemble du site, s\u00e9lectionnez En-t\u00eate du site<\/strong>.<\/li><\/ul><\/li><\/ol>
![\"\"](\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/image-537-1024x514.png\")
<\/figure><\/div>Meilleur pour<\/strong>: Gestion facile des CSS sans toucher aux fichiers du th\u00e8me.<\/p>
M\u00e9thode 4 : Ajouter un CSS personnalis\u00e9 via les constructeurs de pages (Elementor, Divi)<\/h3>
Les constructeurs de pages comme Elementor et Divi int\u00e8grent g\u00e9n\u00e9ralement des options CSS, ce qui facilite la gestion des styles.<\/p>
Dans Elementor :<\/h4>
- S\u00e9lectionnez l'\u00e9l\u00e9ment et l'acc\u00e8s Avanc\u00e9<\/mark> Param\u00e8tres<\/strong>
- Dans Elementor, s\u00e9lectionnez un \u00e9l\u00e9ment, allez \u00e0 Avanc\u00e9<\/strong> et trouvez CSS personnalis\u00e9<\/strong> (Elementor Pro<\/mark>).<\/li><\/ul><\/li><\/ol>
![\"\"](\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/image-539.png\")
<\/figure><\/div>- Entrez le code CSS<\/strong>
- Utilisez le mot-cl\u00e9 selector pour cibler l'\u00e9l\u00e9ment. Exemple : le mot cl\u00e9 selector est utilis\u00e9 pour cibler l'\u00e9l\u00e9ment :<\/li><\/ul><\/li><\/ol>
selector { background-color : #333 ; color : #fff ; }<\/code><\/pre>Dans Divi :<\/h4>
- Allez dans les options du th\u00e8me<\/strong>
- Naviguez jusqu'\u00e0 Divi > Options du th\u00e8me > CSS personnalis\u00e9<\/strong>.<\/li><\/ul><\/li><\/ol>
![\"\"](\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/1730364592936.png\")
<\/figure>- Saisissez et enregistrez le code CSS<\/strong>
- Ajoutez votre CSS personnalis\u00e9 et enregistrez.<\/li><\/ul><\/li><\/ol>
Meilleur pour<\/strong> Ceux qui utilisent d\u00e9j\u00e0 des constructeurs de pages avec un acc\u00e8s facile \u00e0 des feuilles de style CSS personnalis\u00e9es.<\/p>
M\u00e9thode 5 : Ajouter directement des feuilles de style CSS via FTP ou l'\u00e9diteur de code<\/h3>
Si vous \u00eates familiaris\u00e9 avec le protocole FTP et que vous souhaitez avoir un contr\u00f4le total, vous pouvez modifier les fichiers CSS directement sur le serveur.<\/p>
Les \u00e9tapes :<\/h4>
- Connexion via FTP<\/strong>
- Utilisez un client FTP (comme FileZilla) pour vous connecter \u00e0 votre site.<\/li><\/ul><\/li>\n\n
- Naviguez jusqu'au dossier Theme<\/strong>
- Allez dans wp-content\/themes\/votre-th\u00e8me-enfant\/ et ouvrez style.css.<\/li><\/ul><\/li><\/ol>
![\"\"](\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/image-542.png\")
<\/figure><\/div>- Modifier et t\u00e9l\u00e9charger<\/strong>
- Ajoutez votre CSS personnalis\u00e9, enregistrez et t\u00e9l\u00e9chargez.<\/li><\/ul><\/li><\/ol>
Meilleur pour<\/strong>: Utilisateurs avanc\u00e9s ayant besoin d'un contr\u00f4le complet.<\/p>
Questions fr\u00e9quemment pos\u00e9es<\/h3>
1. Pourquoi mon CSS personnalis\u00e9 ne fonctionne-t-il pas ?<\/strong><\/p>
Effacez votre navigateur cache<\/strong> ou tout plugin de mise en cache du site, car la mise en cache peut bloquer les mises \u00e0 jour.<\/p>
2. Comment \u00e9viter la perte de CSS lors des mises \u00e0 jour ?<\/strong><\/p>
Utilisez un th\u00e8me enfant<\/mark><\/strong> ou un plugin pour stocker les CSS plut\u00f4t que de modifier les fichiers du th\u00e8me parent.<\/p>","protected":false},"excerpt":{"rendered":"
Le CSS personnalis\u00e9 vous permet de contr\u00f4ler le style de votre site WordPress, vous permettant de tout ajuster, des polices et des couleurs \u00e0 la mise en page. Voici un guide sur la fa\u00e7on...<\/p>","protected":false},"author":10,"featured_media":5197,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35,85],"tags":[425,253],"class_list":["post-5165","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-extensions","category-customized-content-type-cpt","tag-css-for-beginners","tag-wordpress-customization",""],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.openbyt.com\/fr\/wp-json\/wp\/v2\/posts\/5165","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.openbyt.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.openbyt.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.openbyt.com\/fr\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/www.openbyt.com\/fr\/wp-json\/wp\/v2\/comments?post=5165"}],"version-history":[{"count":1,"href":"https:\/\/www.openbyt.com\/fr\/wp-json\/wp\/v2\/posts\/5165\/revisions"}],"predecessor-version":[{"id":5198,"href":"https:\/\/www.openbyt.com\/fr\/wp-json\/wp\/v2\/posts\/5165\/revisions\/5198"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.openbyt.com\/fr\/wp-json\/wp\/v2\/media\/5197"}],"wp:attachment":[{"href":"https:\/\/www.openbyt.com\/fr\/wp-json\/wp\/v2\/media?parent=5165"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.openbyt.com\/fr\/wp-json\/wp\/v2\/categories?post=5165"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.openbyt.com\/fr\/wp-json\/wp\/v2\/tags?post=5165"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- Ajoutez votre CSS personnalis\u00e9, enregistrez et t\u00e9l\u00e9chargez.<\/li><\/ul><\/li><\/ol>
- Modifier et t\u00e9l\u00e9charger<\/strong>
- Allez dans wp-content\/themes\/votre-th\u00e8me-enfant\/ et ouvrez style.css.<\/li><\/ul><\/li><\/ol>
- Connexion via FTP<\/strong>
- Ajoutez votre CSS personnalis\u00e9 et enregistrez.<\/li><\/ul><\/li><\/ol>
- Saisissez et enregistrez le code CSS<\/strong>
- Naviguez jusqu'\u00e0 Divi > Options du th\u00e8me > CSS personnalis\u00e9<\/strong>.<\/li><\/ul><\/li><\/ol>
- Allez dans les options du th\u00e8me<\/strong>
- Utilisez le mot-cl\u00e9 selector pour cibler l'\u00e9l\u00e9ment. Exemple : le mot cl\u00e9 selector est utilis\u00e9 pour cibler l'\u00e9l\u00e9ment :<\/li><\/ul><\/li><\/ol>
- Entrez le code CSS<\/strong>
- Dans Elementor, s\u00e9lectionnez un \u00e9l\u00e9ment, allez \u00e0 Avanc\u00e9<\/strong> et trouvez CSS personnalis\u00e9<\/strong> (Elementor Pro<\/mark>).<\/li><\/ul><\/li><\/ol>
- S\u00e9lectionnez l'\u00e9l\u00e9ment et l'acc\u00e8s Avanc\u00e9<\/mark> Param\u00e8tres<\/strong>
- Pour que le CSS fonctionne sur l'ensemble du site, s\u00e9lectionnez En-t\u00eate du site<\/strong>.<\/li><\/ul><\/li><\/ol>
- Choisir le placement<\/strong>
- Se rendre \u00e0 l'adresse suivante Extraits de code > Ajouter un extrait<\/strong>. Choisissez Extrait CSS<\/strong>.<\/li><\/ul><\/li><\/ol>
- Cr\u00e9ez un Nouvel extrait CSS<\/mark><\/strong>
- Aller \u00e0 Plugins > Ajouter un nouveau<\/strong> Plugin<\/strong>, recherchez Code WPC<\/mark>Vous devez ensuite l'installer et l'activer.<\/li><\/ul><\/li><\/ol>
- Code WPC<\/a><\/strong>: Ajoute des feuilles de style CSS pour l'ensemble du site ou pour chaque page.<\/li>\n\n
- CSS et JS personnalis\u00e9s simples<\/a><\/strong>: L\u00e9ger et facile \u00e0 ajouter CSS et JavaScript.<\/li>\n\n
- Cliquez sur Fichier de mise \u00e0 jour<\/strong> \u00e0 \u00e9pargner.<\/li><\/ul><\/li><\/ol>
- Enregistrer les modifications<\/strong>
- Ajoutez votre feuille de style CSS personnalis\u00e9e \u00e0 l'emplacement fond<\/strong> du fichier. Exemple :<\/li><\/ul><\/li><\/ol>
- Ajoutez votre CSS<\/strong>
- En Apparence > Editeur de fichier de th\u00e8me<\/strong>s\u00e9lectionnez la section style.css<\/mark> fichier.<\/li><\/ul><\/li><\/ol>
- Acc\u00e9der au fichier Style.css<\/strong>
- Si vous devez quand m\u00eame commencer \u00e0 en utiliser un, cr\u00e9ez ou installez un th\u00e8me enfant. Des plugins comme Configurateur de th\u00e8me enfant<\/strong> faciliter les choses.<\/li><\/ul><\/li><\/ol>
- Activer un th\u00e8me enfant<\/strong>
- Vous verrez un aper\u00e7u en direct des modifications. Lorsque vous \u00eates satisfait, cliquez sur Publier<\/strong>.<\/li><\/ul><\/li><\/ol>
- Pr\u00e9visualisation et publication<\/strong>
- Tapez votre code. Par exemple :<\/li><\/ul><\/li><\/ol>
- Ajoutez votre CSS personnalis\u00e9<\/strong>
- Dans la barre lat\u00e9rale gauche, cliquez sur CSS suppl\u00e9mentaire<\/strong>. Une zone de texte appara\u00eet, dans laquelle vous pouvez saisir votre code CSS.<\/li><\/ul><\/li><\/ol>
- S\u00e9lectionnez \"Additional CSS\"<\/strong>
- Connectez-vous et allez sur Apparence > Personnaliser<\/strong>.<\/li><\/ul><\/li><\/ol>