Vous souhaitez modifier les couleurs ou les polices de votre site WordPress, mais vous craignez de tout casser ? De nombreux débutants pensent que cela nécessite de modifier les fichiers du thème, où même une petite erreur peut causer de gros problèmes.
Aux débuts de WordPress, la seule façon d'ajouter du CSS personnalisé était de modifier directement ces fichiers. Nous nous souvenons à quel point c'était stressant, et comment un seul caractère mal placé pouvait faire planter tout un site.
Heureusement, ce n'est plus le cas. WordPress offre désormais des moyens sûrs et adaptés aux débutants pour ajouter du CSS personnalisé en utilisant le personnaliseur de thème, l'éditeur complet du site (FSE) ou un plugin comme WPCode.
Dans ce guide, nous vous présenterons trois méthodes simples pour ajouter du CSS personnalisé à votre site WordPress, étape par étape. 🙌
Pourquoi ajouter du CSS personnalisé dans WordPress ?
Vous ajoutez du CSS personnalisé dans WordPress pour avoir plus de contrôle sur le design de votre site que ne le permettent les paramètres de votre thème. Par exemple, vous pouvez ajuster les tailles de police, modifier les couleurs des boutons ou ajouter un espacement supplémentaire à des sections spécifiques.
Le CSS (Cascading Style Sheets) est le langage qui met en forme votre site web, gérant des éléments tels que les couleurs, les polices, l'espacement et les mises en page. En écrivant votre propre CSS, vous pouvez affiner l'apparence de votre site sans changer de thème ni installer de plugins supplémentaires.
Cette flexibilité vous permet de personnaliser des articles individuels, de styliser les catégories de produits de votre boutique, ou même d'optimiser l'apparence de votre site sur mobile par rapport à celle sur ordinateur.
Dans ce guide, nous vous montrerons les différentes manières d'ajouter du CSS personnalisé à votre site WordPress.
Vous pouvez cliquer sur le lien ci-dessous pour accéder à la section qui vous intéresse :
- Méthode 1 : Ajouter du CSS personnalisé via le personnaliseur de thème (Thèmes classiques)
- Méthode 2 : Ajouter du CSS personnalisé via le plugin WPCode (Tous les thèmes)
- Méthode 3 : Ajouter du CSS supplémentaire avec l'éditeur de site complet (Thèmes blocs)
- Astuce bonus : Utiliser un plugin CSS personnalisé vs ajouter du CSS dans le personnaliseur de thème
- FAQ : Ajouter du CSS personnalisé à votre site WordPress
- Plus d'astuces et de conseils CSS pour votre site WordPress
Prêt ? Commençons.
Méthode 1 : Ajouter du CSS personnalisé via le personnaliseur de thème (Thèmes classiques)
Depuis WordPress 4.7, les utilisateurs peuvent ajouter du CSS personnalisé directement depuis l'espace d'administration de WordPress. C'est très simple, et vous pouvez voir vos modifications instantanément avec un aperçu en direct.
Remarque : Cette méthode est uniquement pour les thèmes classiques. Si vous utilisez un thème bloc, vous devrez choisir l'une des autres méthodes.
Tout d'abord, vous devrez vous rendre sur la page Apparence » Personnaliser depuis votre tableau de bord WordPress.
Cela lancera l'interface du personnaliseur de thème WordPress.
Sur cette page, vous pouvez voir un aperçu en direct de votre site avec un ensemble d'options de personnalisation dans le panneau de gauche. Selon votre thème WordPress, la disposition de ce menu peut varier légèrement. Dans notre exemple, nous utilisons le thème Sydney.
Trouvez simplement l’onglet « CSS additionnel » pour commencer à modifier.
L'onglet se déroulera pour vous montrer une simple boîte où vous pouvez ajouter votre CSS personnalisé.
Dès que vous ajoutez une règle CSS valide, vous pourrez la voir appliquée sur le panneau d’aperçu en direct de votre site web.
Vous pouvez continuer à ajouter du code CSS personnalisé jusqu’à ce que vous soyez satisfait de l’apparence des modifications sur votre site.
N’oubliez pas de cliquer sur le bouton « Publier » en haut lorsque vous avez terminé.
ℹ️ Remarque : Tout CSS personnalisé que vous ajoutez à l’aide du personnaliseur de thème n’est disponible qu’avec ce thème particulier. Si vous souhaitez l’utiliser avec d’autres thèmes, vous devrez le copier et le coller dans votre nouveau thème en utilisant la même méthode.
Méthode 2 : Ajouter du CSS personnalisé via le plugin WPCode (Tous les thèmes)
La première méthode vous permet uniquement d’enregistrer du CSS personnalisé pour le thème actuellement actif. Si vous changez de thème, vous devrez peut-être copier et coller votre CSS personnalisé dans le nouveau thème.
Si vous souhaitez que votre CSS personnalisé soit appliqué quel que soit le thème WordPress que vous utilisez, cette méthode est faite pour vous.
WPCode est le meilleur plugin d'extraits de code personnalisés du marché, avec plus de 2 millions d'utilisateurs. En plus de faciliter l'ajout de code personnalisé dans WordPress, il est doté de fonctionnalités telles qu'une bibliothèque d'extraits de code intégrée, une logique conditionnelle, des pixels de conversion, et plus encore.
Nous utilisons WPCode pour ajouter et gérer des extraits de code sur certaines marques partenaires. Pour un aperçu approfondi de ses fonctionnalités et avantages, consultez notre revue complète de WPCode.
Maintenant, la première chose que vous devez faire est d'installer et d'activer le plugin WPCode. Si vous avez besoin d'aide, veuillez consulter notre guide sur comment installer un plugin WordPress.
ℹ️ Remarque : Ce tutoriel fonctionne avec la version gratuite du plugin WPCode, vous pouvez donc commencer tout de suite. Si vous décidez de passer à WPCode Pro, vous débloquerez des fonctionnalités utiles comme les extraits programmés, l'historique complet des révisions et l'accès à la bibliothèque complète d'extraits prêts à l'emploi et approuvés par les développeurs.
Après activation, allez simplement dans Extraits de code » + Ajouter nouveau depuis l'espace d'administration de WordPress.
Ensuite, vous pouvez survoler l'option « Ajouter votre code personnalisé (Nouveau fragment) » dans la bibliothèque de fragments de code et cliquer sur « Utiliser le fragment ».
Sur l'écran suivant, vous sélectionnerez le type de code pour votre fragment CSS personnalisé.
Cliquez sur « Fragment CSS » comme type de code.
Ensuite, en haut de la page, vous pouvez ajouter un titre pour votre extrait CSS personnalisé. Cela peut être n'importe quoi qui vous aide à identifier le code.
Une fois que vous avez entré un titre, vous pouvez écrire ou coller votre CSS personnalisé dans la boîte « Aperçu du code ».
Faisons maintenant défiler jusqu'à la section « Insertion » et sélectionnons la méthode « Insertion automatique » si vous souhaitez exécuter le code sur l'ensemble de votre site WordPress.
Si vous souhaitez uniquement exécuter le code sur certaines pages ou publications, vous pouvez choisir la méthode « Shortcode ».
Maintenant, vous voudrez revenir en haut de la page.
Ensuite, basculez simplement le commutateur sur « Actif », puis cliquez sur le bouton « Enregistrer le fragment ».
C'est tout ! Vous pouvez visiter votre site Web WordPress pour voir le CSS personnalisé en action.
Méthode 3 : Ajouter du CSS supplémentaire avec l'éditeur de site complet (Thèmes blocs)
Si vous utilisez un thème de blocs moderne, le meilleur endroit pour ajouter votre CSS personnalisé est directement dans l'éditeur complet du site. Cette méthode conserve votre CSS avec les paramètres de style de votre thème et vous permet de voir un aperçu en direct.
Tout d'abord, vous devez naviguer vers Apparence » Éditeur depuis votre tableau de bord WordPress.
Cela ouvrira l'éditeur complet du site.
Dans le menu de gauche, cliquez sur l'onglet « Styles ».
Vous devriez maintenant voir le panneau « Styles » pour votre site ainsi que l'aperçu de votre page.
À partir d'ici, cliquons sur l'aperçu pour ouvrir l'éditeur de blocs.
Dans l'éditeur de contenu, cliquez sur l'icône « Styles ». Elle ressemble à un cercle moitié noir, moitié blanc.
Ensuite, sélectionnez « CSS additionnel ».
Dans le panneau latéral CSS, vous trouverez le champ « CSS additionnel ».
Vous pouvez y saisir votre CSS et vous verrez les changements instantanément dans l'aperçu en direct.
Une fois que tout vous convient, n'oubliez pas de cliquer sur « Enregistrer » en haut à droite pour publier vos modifications.
Astuce bonus : Utiliser un plugin CSS personnalisé vs ajouter du CSS dans le personnaliseur de thème
Toutes les méthodes décrites ci-dessus sont recommandées pour les débutants. Les utilisateurs avancés peuvent également ajouter du CSS personnalisé directement à leurs thèmes.
Cependant, il n'est pas recommandé d'ajouter des extraits de CSS personnalisés à votre thème parent. Vos modifications CSS seront perdues si vous mettez accidentellement à jour le thème sans sauvegarder vos modifications personnalisées.
La meilleure approche consiste à utiliser un thème enfant à la place. Cependant, de nombreux débutants évitent de créer un thème enfant car ils trouvent le processus intimidant. De plus, les débutants ne comprennent souvent pas comment ils utiliseront le thème enfant au-delà de l'ajout de CSS personnalisé.
L'utilisation d'un plugin CSS personnalisé vous permet de stocker votre CSS personnalisé indépendamment de votre thème. De cette façon, vous pouvez facilement changer de thème, et votre CSS personnalisé restera.
Une autre excellente façon d'ajouter du CSS personnalisé à votre site WordPress est d'utiliser le plugin CSS Hero. Ce merveilleux plugin vous permet de modifier presque tous les styles CSS de votre site WordPress sans écrire une seule ligne de code.
Vous pouvez également ajouter du CSS personnalisé avec le plugin SeedProd, le meilleur constructeur de pages WordPress par glisser-déposer.
Avec SeedProd, vous pouvez créer des thèmes WordPress personnalisés et des pages de destination pour votre site WordPress. Vous pouvez facilement modifier les paramètres CSS globaux ; aucun code n'est requis.
Certaines de nos marques partenaires ont conçu l'intégralité de leurs sites Web avec SeedProd. Assurez-vous de lire notre avis détaillé sur SeedProd pour comprendre pourquoi c'est un excellent choix pour créer des sites Web époustouflants.
FAQ : Ajouter du CSS personnalisé à votre site WordPress
Vous voulez vraiment personnaliser votre site WordPress avec des styles personnalisés ? Voici quelques questions courantes sur l'ajout sécurisé de CSS personnalisé et comment le faire sans casser votre site :
L'ajout de CSS personnalisé est-il risqué pour mon site ?
Pas si vous le faites de la bonne manière. Des outils comme le personnalisateur de thème WordPress, WPCode, ou SeedProd vous permettent de prévisualiser vos modifications avant de les publier. Cela vous aide à éviter les erreurs et à garder votre site en sécurité.
Mes modifications CSS disparaîtront-elles si je change de thème ?
Si vous avez ajouté le CSS via le personnalisateur de thème, vos modifications sont liées à ce thème spécifique. Dans ce cas, oui, votre CSS supplémentaire disparaîtra si vous changez de thème WordPress.
Pour que votre CSS reste cohérent sur tous les thèmes, vous pouvez utiliser un plugin de snippets de code comme WPCode. Il stocke votre code séparément, il reste donc actif même si vous changez de thème.
Puis-je annuler les modifications si quelque chose tourne mal ?
Oui, surtout si vous utilisez un plugin de snippets de code comme WPCode. Vous pouvez facilement désactiver ou supprimer n'importe quel snippet que vous avez ajouté. C'est toujours une bonne idée de prévisualiser vos modifications d'abord ou de les tester sur un site de staging si vous n'êtes pas sûr.
Et si je veux encore plus de contrôle sur mon CSS ?
Pour des modifications plus avancées, vous pouvez créer un thème enfant. Cela vous donne un contrôle total et garde vos modifications en sécurité lors des mises à jour du thème. Mais cela nécessite une compréhension de base du fonctionnement des thèmes WordPress.
Ai-je besoin de compétences en codage pour ajouter du CSS personnalisé ?
Vous n'avez pas besoin d'être un développeur, mais vous devrez connaître un peu de CSS, au moins suffisamment pour copier-coller le bon code ou suivre un tutoriel.
La bonne nouvelle est qu'il existe de nombreuses ressources adaptées aux débutants (comme WPBeginner !) pour vous aider à apprendre les modifications CSS simples étape par étape. Avec les bons outils, l'ajout de CSS peut toujours sembler gérable – plus comme réarranger des meubles que reconstruire la maison.
Plus d'astuces et de conseils CSS pour votre site WordPress
Nous espérons que cet article vous a aidé à apprendre comment ajouter du CSS personnalisé à votre site WordPress. Si vous avez trouvé cela utile, vous pourriez également vouloir consulter nos guides sur :
- Comment minifier les fichiers CSS / JavaScript dans WordPress
- Comment optimiser facilement la livraison CSS de WordPress
- Comment appliquer du CSS pour des rôles d'utilisateur spécifiques dans WordPress
- Comment ajouter du CSS de premier et dernier élément aux éléments de menu WordPress
- Comment supprimer le CSS inutilisé dans WordPress (la bonne méthode)
- Comment réparer le CSS cassé dans le tableau de bord d'administration de WordPress
- Feuille de triche CSS générée par défaut par WordPress pour les débutants
Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.
Mrteesurez
Basé sur la méthode que vous avez utilisée pour ajouter du CSS personnalisé dans un site à blocs, je remarque que le site utilise toujours certains éléments du personnaliseur classique via le lien que vous avez partagé ?
Je voudrais demander si l'on peut simplement installer un plugin de widgets classiques sur un thème à blocs pour avoir un accès facile au personnaliseur pour ajouter du CSS et autre sans utiliser de lien personnalisé ?
Support WPBeginner
Cela dépendra fortement de votre thème spécifique. Si votre thème n'a pas l'option dans le personnaliseur, nous vous recommandons d'utiliser l'une des alternatives de cet article.
Admin
Mrteesurez
Eh bien, la plupart des thèmes ont l'option dans le personnaliseur, je ne connais pas de thème à blocs. Merci.
Mais je recommanderais d'utiliser un constructeur de pages à la place pour des fonctionnalités de personnalisation complètes. Une fois que j'aurai appris à utiliser un constructeur de pages, j'utilise rarement du CSS personnalisé sur les pages.
Dennis Muthomi
Pour clarifier – lorsque vous mentionnez (dans la MÉTHODE 1) que le CSS ajouté via le personnaliseur n'est disponible que pour ce thème particulier, cela signifie-t-il que le code CSS personnalisé est réellement ajouté aux fichiers du thème actuel ?
Je ne suis pas très calé en technologie, donc je veux m'assurer de bien comprendre avant de me lancer.
Commentaires WPBeginner
Plutôt que d'être ajouté aux fichiers du thème, le personnaliseur stocke le CSS dans la base de données et l'associe au thème.
Mrteesurez
Je ne suis pas au courant de cela, merci. Cela signifie que le CSS personnalisé ajouté ne reste pas dans les fichiers du thème mais dans la base de données, alors pourquoi devons-nous copier et coller à nouveau le code CSS personnalisé lors du changement de thème alors qu'il réside en fait dans la base de données ?
Support WPBeginner
Lorsque vous ajoutez le code CSS, il est connecté au thème lui-même lorsque vous enregistrez. Lorsque vous chargez un nouveau thème, il chargera tout CSS connecté à ce thème.
Jiří Vaněk
Merci, mrteesurez, de poser la question car j'étais aussi confus que vous, et merci à WPBeginner pour l'explication qui m'a aidé à comprendre comment le CSS ajouté fonctionne avec le thème. Je pensais aussi que les codes CSS étaient stockés uniquement dans le thème, mais maintenant je comprends enfin comment cela fonctionne en arrière-plan.
Qasim Saeed
Bonjour, si je veux ajouter un CSS personnalisé sur une page spécifique sans aucun plugin, alors quoi ? Je pense qu'on ajoute cela via une fonction ? Pouvez-vous me dire comment ajouter du CSS via functions.php et quelle est la meilleure et la plus sûre façon d'ajouter du CSS pour une page spécifique ?
Support WPBeginner
Vous n'avez pas besoin d'utiliser des fonctions pour ajouter du CSS à des pages spécifiques, vous ciblerez la page spécifique dans votre sélecteur CSS pour qu'elle n'affecte qu'une seule page de votre site.
Admin
Jiří Vaněk
Est-il préférable d'insérer son propre CSS dans WordPress en utilisant un modèle ou en utilisant WPCode ?
Support WPBeginner
Les deux options sont des choix valables, cela dépend des préférences personnelles et si le thème a l'option dans l'éditeur.
Admin
Jiří Vaněk
Merci pour la clarification, je n'étais pas sûr si, par exemple, un extrait utilisant WPCode serait plus rapide pour la réponse du site que de l'intégrer dans le modèle lui-même. Donc, si cela n'a pas d'importance, je m'en tiendrai probablement à la meilleure pratique et je le garderai intégré dans le modèle.
Bavi
L'ajout de CSS n'est plus disponible pour le plan gratuit, y a-t-il des alternatives ??
Support WPBeginner
Nos tutoriels sont destinés aux sites WordPress.org, nous n'avons pas de spécificités pour WordPress.com pour le moment. Nous vous recommandons de consulter notre guide ci-dessous pour la comparaison entre les deux et si vous souhaitez transférer votre site de WordPress.com vers un site WordPress.org auto-hébergé.
https://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
Admin
Ben
Je ne savais pas pour l'astuce example.com/wp-admin/customize.php. Merci ! Ça a marché à merveille !
Support WPBeginner
Glad we could share this trick with you!
Admin
Dani
Bonjour,
Je veux ajouter du CSS personnalisé, mais comment puis-je le supprimer si quelque chose tourne mal ?
Bogdan
Salut, cet article est très bon. Une question cependant : ne dois-je pas voir la page HTML pour ajouter du CSS personnalisé ? Comment ajouter du CSS personnalisé si je ne connais pas les sélecteurs et tout ça ?
Support WPBeginner
Nous avons un guide sur l'utilisation de l'outil d'inspection que vous pouvez consulter ci-dessous pour savoir comment trouver les sélecteurs :
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin
cymon
Je suis un nouveau blogueur. Y a-t-il un moyen d'ajouter du code CSS spécifique à une page ?
Support WPBeginner
Vous devrez ajouter l'ID de la page dans le CSS, mais oui, vous pouvez.
Admin
Jitin Mishra
Excellent article pour ajouter du CSS personnalisé sur un site WordPress. Nous attendons avec impatience d'autres articles aussi informatifs
Support WPBeginner
Glad you found our guide helpful
Admin
Mohsin
Je veux changer mon menu WordPress en méga menu avec du code. Puis-je convertir le menu de mon site web en méga menu en utilisant HTML, CSS et JS ? Je ne veux pas utiliser de plugin pour ce travail. Si nous ajoutons de nouvelles fonctionnalités à un site WordPress avec du code personnalisé, quelles sont les meilleures pratiques pour que ce travail personnalisé ne soit pas annulé lors de la mise à jour du thème ou de WordPress. Merci !
Support WPBeginner
Vous voudrez peut-être créer un thème enfant pour garder vos modifications en sécurité, mais vous pourriez avoir besoin de quelques connaissances en PHP. Nous avons un guide sur la création d'un thème enfant que vous pouvez consulter ci-dessous :
https://www.wpbeginner.com/wp-themes/how-to-create-a-wordpress-child-theme-video/
Admin
vijay v
pouvons-nous ajouter un fichier CSS externe (en déplaçant le CSS personnalisé) pour augmenter la vitesse de la page (après avoir ajouté le CSS personnalisé, la vitesse de chargement a diminué), si oui, comment faire ?
merci d'avance
Support WPBeginner
Si nous avons bien compris ce que vous recherchez, vous voudrez jeter un œil à notre article ci-dessous :
https://www.wpbeginner.com/wp-tutorials/how-wordpress-plugins-affect-your-sites-load-time/
Admin
billy king
Le CSS « non orthodoxe » est-il autorisé dans un thème enfant ou dans le CSS personnalisé ?
Support WPBeginner
Tant que le CSS cible ce qui se trouve sur votre site, vous pouvez utiliser le CSS que vous souhaitez.
Admin
Latonya Moore
C'est super, mais y a-t-il un moyen d'ajouter du CSS à une seule page ? Par exemple, je veux seulement afficher ou masquer au survol ou au passage de la souris sur un seul texte.
Support WPBeginner
Vous devrez soit ajouter une classe CSS à l'objet spécifique, soit ajouter l'ID de la page à votre CSS pour la limiter à cette page spécifique. Pour savoir comment trouver ces informations, vous voudrez jeter un œil à notre article ci-dessous sur la façon d'utiliser l'outil d'inspection des éléments :
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin
shiva
J'ai apporté quelques modifications à mon site web en modifiant certains codes CSS dans l'éditeur de thème. Que se passera-t-il si je mets à jour mon WordPress vers la prochaine version ? Obtenir une erreur ou revenir au thème de base, ou mon code apparaîtra-t-il même après la mise à jour de mon WordPress, comme avant la mise à jour.
Support WPBeginner
Si vous avez ajouté votre CSS dans la zone Apparence>Personnaliseur>CSS additionnel, alors vos modifications CSS resteront lorsque vous mettrez à jour votre site.
Admin
Jo
Je n'ai pas tout à fait fini de construire mon site web, mais je suis passé de la version gratuite pour pouvoir utiliser le CSS pour apporter des modifications. Mon site n'est pas encore en ligne. Avec la mise à niveau vers la version premium, le bouton de mise à jour est maintenant devenu publier. Cela signifie-t-il que lorsque je cliquerai sur publier pour enregistrer des modifications, mon site sera en ligne ?
De plus, je ne me souviens plus quel thème j'ai utilisé, comment puis-je savoir quel thème j'utilise ?
Merci
Support WPBeginner
Il semble que vous soyez sur WordPress.com. Si vous publiez un article, il sera visible par ceux qui peuvent voir votre site. Avec WordPress.com, pour un site privé, vous êtes limité à : https://en.support.wordpress.com/settings/privacy-settings
Vous devriez pouvoir voir le thème actif sous Apparence>Thèmes
Admin
Bruce William Taylor
« L'onglet glissera pour vous montrer une simple boîte où vous pouvez ajouter votre CSS personnalisé. Dès que vous ajouterez une règle CSS valide, vous pourrez la voir appliquée dans le panneau d'aperçu en direct de votre site web. »
Je sais déjà OÙ ajouter le CSS. Comment savoir quel CSS ajouter ? Comment connaître les « règles CSS valides » ?
Support WPBeginner
Salut Bruce,
Pour cela, vous devrez apprendre les bases du CSS. Il existe plusieurs sites web qui proposent des tutoriels CSS étape par étape pour débutants. Nous recommandons w3schools car ils vous permettent de pratiquer le CSS avec une boîte d'essai en direct.
Admin
Ali
Où se trouve le stockage du code CSS personnalisé car je l'ai perdu lors d'un transfert vers un nouvel hébergeur ?
mahaveer
Je veux ajouter du CSS externe et ajouter des images dans le CSS...
Muhammad Adil
Quelle était la méthode Bonus ?
Est-ce un plugin que je n'ai pas compris. Pouvez-vous me demander s'il vous plaît ?
Merci
Aditya Khuteta
Bonjour ! Je souhaite changer la taille du texte du prix sur mon site web car le texte du prix est trop petit. Veuillez me guider.
Frank Lurz
2 Questions :
1. Pour être clair, les « plugins » remplacent l'écriture de CSS, une tâche difficile pour ceux d'entre nous qui ne connaissent rien au CSS — est-ce exact ?
2. Les plugins listés pour le téléchargement sur la page des plugins WP sont disponibles à l'installation uniquement pour les abonnés qui ont payé le plan « Business », est-ce exact ?
Support WPBeginner
Salut Frank,
1. Non, les plugins ne remplacent pas l'écriture de CSS personnalisé. Vous pouvez écrire du CSS personnalisé sans installer de plugins. Veuillez consulter notre guide sur ce que sont les plugins WordPress et comment ils fonctionnent pour plus de détails.
2. Si vous utilisez WordPress.com, alors oui, vous devrez passer au plan business. Veuillez consulter notre guide sur la différence entre WordPress.org auto-hébergé et un blog WordPress.com gratuit.
Admin
Annie Mitchell
Bonjour,
Je suis novice en matière de création et de conception de sites web et je n'ai aucune connaissance en CSS. J'utilise le thème Sydney sur mon site web – et j'ai réussi à rendre la police de mes paragraphes blanche. J'ai cherché sur Google et j'ai vu qu'un monsieur avait eu le même problème. Il l'a résolu en téléchargeant un plugin et en utilisant un CSS personnalisé, mais je n'ai pas eu de succès.
Le CSS qu'il a conseillé d'utiliser est –
.entry-page p, .entry-post p { color: black !important; margin: 0 !important; padding: 0 !important; }
mais je ne suis pas sûr de pourquoi cela ne fonctionne pas pour moi. Toute aide serait grandement appréciée.
Merci,
Annie
Support WPBeginner
Salut Annie,
Tout d'abord, nous vous recommandons de désactiver tous vos plugins WordPress en les désactivant. Ensuite, visitez votre site Web pour voir si cela a résolu votre problème. Si c'est le cas, cela signifie qu'un paramètre dans l'un de vos plugins causait le problème. Si cela ne résout pas le problème, essayez de passer à un thème par défaut comme Twenty Seventeen. Si cela résout votre problème, cela signifie que quelque part dans votre thème, vous avez modifié les paramètres de police.
Si rien ne fonctionne, vous pouvez essayer ce CSS personnalisé :
p { color:#000; }1-click Use in WordPress
Admin
Jose
L'un des plugins (Simple Custom CSS) n'a pas été mis à jour depuis 2 ans, ce qui est très long dans le monde des plugins WordPress. C'est un risque de sécurité, donc je chercherais personnellement une alternative.
Rebecca
Salut
Désolé, je ne connais rien au CSS et j'essaie de résoudre un problème de recherche de plugins, mais c'est une autre histoire ! Je poste ici maintenant car je reçois ce message lorsque je vais dans apparence / éditeur de CSS / CSS additionnel
” Il y a 1 erreur qui doit être corrigée avant de pouvoir enregistrer.
Mettre à jour quand même, même si cela risque de casser votre site ?
Est-ce quelque chose dont je devrais m'inquiéter ?
le texte dans la boîte ci-dessous indique…
et juste ici il y a un point rouge
J'espère que quelqu'un pourra m'aider.
Merci
Support WPBeginner
Salut Rebecca,
Vous pouvez copier le CSS et le coller dans un fichier texte et l'enregistrer comme sauvegarde. Supprimez maintenant tout le contenu de la boîte CSS supplémentaire et commencez à ajouter votre CSS personnalisé une règle à la fois jusqu'à ce que l'erreur réapparaisse. Cela vous aidera à localiser l'erreur et à la corriger.
Admin
James
Cela ne fonctionne plus pour les comptes gratuits. L'option CSS n'est plus là et vous avez besoin d'un compte professionnel pour installer un plugin pertinent.
Support WPBeginner
Salut James,
Vous utilisez probablement WordPress.com. Veuillez consulter notre guide sur la différence entre WordPress.org auto-hébergé et le blog WordPress.com gratuit.
Admin
scott
Avant la version 4.9 de WP, je pouvais couper et coller mon CSS personnalisé (depuis le personnalisateur WP) et le coller dans le Bloc-notes Windows (et il conservait le formatage. Je faisais cela souvent pour l'enregistrer comme sauvegarde lorsque j'ajoutais un nouveau CSS personnalisé, au cas où je ferais une erreur.
Maintenant, lorsque je le colle dans le Bloc-notes, tout le CSS s'exécute ensemble sans le formatage ligne par ligne dans le Bloc-notes.
Any idea why or how I can fix it? I already have “word wrap” mode set in Notepad.
Thanks.
Support WPBeginner
Salut Scott,
Vous pouvez essayer d'enregistrer le code dans d'autres éditeurs de texte comme Notepad++. Si le problème persiste, essayez les conseils de dépannage WordPress.
Admin
Joe MacMillan
This site is really good. My site didn’t have any link colors so I used this code /* unvisited link blue */
a:link {
Color: #196380;
}
/* visited link green */
a:visited {
color: #248f24;
}
/* mouse over link orange */
a:hover {
color: #ff3300;
}
/* selected link red*/
a:active {
color: #cc0000;
}
mais cela a appliqué des couleurs à tout ce qui est un lien, comme les menus, dans une couleur.
Je veux seulement les couleurs pour les liens.
J'apprécierais toute aide à ce sujet. Merci
Support WPBeginner
Salut Joe,
Dans votre CSS, vous n'avez pas défini quelles zones devaient avoir des liens dans ces couleurs, ce qui les fait s'appliquer à tout le corps. Pour déterminer quelles zones vous devez cibler, vous devrez utiliser l'outil d'inspection pour trouver la classe CSS utilisée par votre thème pour le bloc de contenu.
Supposons que le bloc de contenu de votre thème ait une classe CSS site-content, vous l'utiliserez dans votre CSS comme ceci :
.site-content a:link { color: #196380; } .site-content a:visited { color: #248f24; } .site-content a:active { color: #cc0000; } .site-content a:hover { color: #ff3300; }1-click Use in WordPress
Hope this helps
Admin
Rob
J'adore votre site !
Merci pour tous ces articles utiles.
J'ai une question concernant mon plan premium WordPress.
Je souhaite ajouter le script suivant à mon site.
var refTagger = { settings: { bibleVersion: “NKJV” }
Puis-je ajouter cela au CSS personnalisé ?
Je n'ai pas la possibilité d'accéder à l'en-tête ou au pied de page dans ce plan.
Merci,
Rob
Support WPBeginner
Salut Rob,
Non, vous ne pouvez pas. Veuillez consulter notre guide sur la différence entre les blogs WordPress.org auto-hébergés et les blogs WordPress.com gratuits.
Admin
sammy
c'est vraiment un excellent article, je vais devoir commencer à apprendre à faire mon propre CSS pour mon site
Thomas
Bonjour,
cette fonctionnalité n’est pas active pour l’administrateur du site sur un réseau WordPress multisite. Pensez-vous que son activation pour l’administrateur du site (avec ce plugin par exemple :) créerait un problème de sécurité ?
Merci !
Support WPBeginner
Salut Thomas,
Oui, vous pouvez utiliser un plugin pour ajouter du CSS personnalisé.
Admin
Thomas
Bonjour,
oui je sais (j’ai déjà utilisé le très bon plugin Simple Custom CSS), mais je préférerais utiliser la fonction native puisqu’elle est implémentée dans Wordpress. Cependant, cette fonction n’est disponible que pour l’administrateur du réseau et non pour l’administrateur du site sur une installation multisite. Les droits peuvent être facilement modifiés pour permettre à l’administrateur du site d’ajouter son propre CSS personnalisé dans le personnalisateur (avec la fonction WP native) (voir ce plugin : http://www.wordpress.org/plugins/multisite-custom-css/), et je me demande si cela créerait un problème de sécurité (en partant du principe que je ne peux pas faire confiance à l’administrateur du site) ?
Support WPBeginner
Salut Thomas,
Sorry, we totally misunderstood your question
Nous sommes d'accord que ce sera une préoccupation, c'est pourquoi la fonctionnalité est désactivée. Si vous l'activez, les utilisateurs pourront ajouter du CSS non filtré. Vous devriez la laisser désactivée.
Brice
Je ne connais pas grand-chose au code, alors je me demandais si je fais des modifications et que je clique sur « enregistrer et publier », y a-t-il un moyen de récupérer le code original si je n’aime pas les modifications ou dois-je copier et enregistrer le code original au cas où je voudrais le restaurer ?
Ruth Billheimer
This is probably really naive, I don’t know much about code, so bear with me.. In the customise additional css, can you put in different things? I mean I have already put something in there that will change some of the colours. Now I want to put in something that will change the width of the page. (I am getting these bits of code from very helpful people, I know nothing!)
So will both of these things work? Or can you only change one thing? It doesn’t look like the page width has changed
Jos Schuurmans
Bonjour,
Il était possible de modifier style.css depuis l’administration de WP, sous le menu Apparence.
Sur WP multisite, c’était via le sous-menu des thèmes du réseau. Cette fonctionnalité a-t-elle été supprimée ?
Santé, Jos
Judy
Excellent article, merci !
Quelqu'un peut-il m'aider avec ça ? J'ai fait une petite personnalisation sur mon logo en utilisant CSS Hero. Ensuite, j'ai copié ces 9 chaînes de code exactes dans mon plugin Simple Custom CSS, après avoir désactivé CSS Hero. Je pensais pouvoir reproduire la même personnalisation CSS Hero sur mon logo en utilisant Simple Custom CSS, mais au lieu de cela, cela ne fonctionne pas.
J'ai actualisé la page et vidé le cache, mais la personnalisation ne prend toujours pas effet. Pourquoi ?
Merci,
Judy
Robin
Ceci est tout ce qui se trouve sur ma feuille de style CSS.
/*
Bienvenue dans le CSS personnalisé
Pour apprendre comment cela fonctionne, voir
*/
Dois-je effacer son code et ajouter mon nouveau code de police ? Aidez-moi ????
Support WPBeginner
Oui. Ce ne sont que des commentaires pour aider les nouveaux utilisateurs à démarrer.
Admin
Paul H.
PLUGIN EXCEPTIONNEL !!!
J'ai passé beaucoup de temps à essayer de faire en sorte que l'éditeur WP intégré "style" ma page personnalisée, sans succès...
J'ai cherché un plugin pour voir s'il y en avait un et j'ai trouvé le vôtre... en quelques minutes, j'ai installé votre plugin et l'ai activé, puis j'ai entré mon CSS, cliqué sur mettre à jour, puis actualisé ma page personnalisée... c'est parfait !
A+++
Ian
Salut les gars,
J'ai installé le plugin Simple custom CSS & l'ai activé. J'ai un tableau créé sur l'une de mes pages web auquel je voulais ajouter une bordure.
Par conséquent, j'ai ajouté le code suivant à mon plugin simple custom CSS
table { border: 2px solid black; }
et j'ai mis à jour le CSS personnalisé mais rien ne s'est passé – je n'ai toujours pas de bordure sur le tableau de ma page web.
Des suggestions ?
Cordialement
Ian
Molly Setzer
Salut Ian,
Il est probable que vous n'utilisiez pas le bon sélecteur CSS. Utilisez le sélecteur le plus défini pour attraper l'élément. Par exemple, si votre tableau a une classe "info", alors l'appeler par le plus spécifique table.info vous aidera à atteindre l'élément. Vérifiez s'il a plus de sélecteurs dans le HTML.
ramneet
Merci de partager. C'est une merveilleuse façon d'apprendre WordPress, j'aime ça.
Estee Peter
Comment ajouter du CSS personnalisé via mon plugin spécifique de site web existant
voici le code suivant
.mobileonly { display: none; }
@media screen and (max-width: 480px) { .mobileonly { display: inline; } }
.hidemobileonly { display: inline; }
@media screen and (max-width: 480px) { .hidemobileonly { display: none; } }
Gary Zielke
Le plugin CSS personnalisé fonctionne-t-il sur des pages individuelles ?
C'est-à-dire, puis-je ajouter du style à une seule page et pas à tout le thème ?
Merci
Support WPBeginner
Non, cela ne fonctionne pas sur des pages individuelles.
Admin
Tori Tran
merci ^^
Russell Bruce
Ne serait-il pas utile d'expliquer ce que fait le CSS et pourquoi il est utile
Joey
Merci, j'aurais aimé le savoir plus tôt car j'ai fait toutes mes modifications CSS dans le fichier style.css puisque je fais les modifications localement, mais dites-vous que si pour une raison quelconque Genesis décide de mettre à jour le thème enfant particulier que j'ai utilisé, je perdrai ces modifications ? Je ne sais pas si j'ai déjà vu leurs thèmes enfants être mis à jour bien que je n'utilise Genesis que depuis quelques mois, donc je suppose qu'il est tout à fait possible qu'ils mettent à jour certains d'entre eux ici et là. Je pense qu'à l'avenir, je ferai mes modifications dans le plugin, surtout si le site est en ligne.
suzie
Utilisez le thème que vous aimez et créez un « thème enfant ».
Le thème enfant est alors unique à votre site web.
Apportez toutes les modifications uniquement sur votre thème enfant.
Le concepteur du thème peut mettre à jour son thème, mais vos modifications resteront.
(Selon la mise à jour du concepteur, vous pourriez avoir besoin d'ajuster vos modifications, mais c'est peu probable).
Rodney
Excellent article.
Je voulais juste ajouter ici. Il y a beaucoup d'options ici, surtout pour les sites fonctionnant sous WordPress, la création de CSS personnalisé est simple. La plupart des thèmes WordPress prennent généralement en charge l'ajout de CSS personnalisé sans avoir à créer ou ajouter de plugins supplémentaires.
Je suis également d'accord, et la meilleure option ici est d'utiliser un thème enfant à la place.
merci