Qu’est-ce que la modification de CSS ?<\/h2>\n
CSS signifie Cascading Style Sheets (feuilles de style en cascade) et c’est le langage web le plus populaire, outre le HTML<\/a>. Les deux vont de pair, car le CSS est utilis\u00e9 pour styliser les \u00e9l\u00e9ments HTML<\/a>. Le HTML pose les bases de l’aspect d’un site web et le CSS est utilis\u00e9 pour en am\u00e9liorer le style.<\/p>\n Le CSS vous permet de rendre un site web<\/a> responsive, d’ajouter des couleurs, de changer les polices<\/a>, de modifier la mise en page et, en g\u00e9n\u00e9ral, d’affiner la pr\u00e9sentation visuelle d’un site web. Comme le HTML et le JavaScript, le CSS est un langage d\u2019interface publique c\u00f4t\u00e9 client, ce qui signifie qu’il s’ex\u00e9cute du c\u00f4t\u00e9 de l’utilisateur, plut\u00f4t que sur la zone d\u2019administration.<\/p>\n Lorsque vous vous plongez dans le d\u00e9veloppement de WordPress, HTML, CSS, JavaScript et PHP<\/a> sont les langages que vous devez conna\u00eetre. C’est dans ces langages qu’est int\u00e9gr\u00e9 le noyau du CMS<\/a>, ainsi que ses nombreux<\/a> th\u00e8mes et extensions<\/a>.<\/p>\n Mais m\u00eame si vous n’\u00eates pas un concepteur<\/a> ou un d\u00e9veloppeur<\/a> web<\/a>, il est bon de prendre un peu de CSS, car vous pouvez l’utiliser pour d\u00e9placer ou styliser des \u00e9l\u00e9ments de votre site web, ou apporter de petites modifications esth\u00e9tiques \u00e0 votre th\u00e8me pour qu’il vous convienne mieux.<\/p>\n\n Dans WordPress, le CSS est un peu diff\u00e9rent. Il est contr\u00f4l\u00e9 par des th\u00e8mes<\/a>, qui sont compos\u00e9s de fichiers de mod\u00e8les, de balises de mod\u00e8les et, bien s\u00fbr, de la feuille de style CSS. Bien qu’ils soient g\u00e9n\u00e9r\u00e9s par votre th\u00e8me, tous ces \u00e9l\u00e9ments sont modifiables par vous.<\/p>\n Les fichiers de mod\u00e8les<\/a> divisent des parties de votre site web en sections (telles que header.php ou archive.php), et les balises de mod\u00e8les<\/a> sont utilis\u00e9es pour faire appel \u00e0 eux et \u00e0 d’autres contenus de votre base de donn\u00e9es. Ces fichiers sont en fait constitu\u00e9s principalement de PHP et de HTML, bien que vous puissiez ajouter du CSS si n\u00e9cessaire.<\/p>\n Ce que vous cherchez vraiment, c’est la feuille de style<\/a>, ou style.css. Pour modifier l’apparence de votre site web, vous devez apprendre \u00e0 ajouter et \u00e0 modifier du code<\/a> dans ce fichier.<\/p>\n Si vous souhaitez personnaliser votre th\u00e8me<\/a> et changer l’apparence de votre site avec le CSS, vous devrez soit ajouter votre propre code, soit modifier ce qui est d\u00e9j\u00e0 l\u00e0. Il existe des moyens d’ajouter du CSS sans jamais avoir \u00e0 toucher \u00e0 un fichier de th\u00e8me, mais pour modifier le code d’un th\u00e8me existant, vous devrez acc\u00e9der \u00e0 la feuille de style de votre site.<\/p>\n Lorsque vous effectuez ces changements, il y a une chose que vous devez savoir : lorsque votre th\u00e8me se met \u00e0 jour<\/a>, toutes les modifications que vous avez apport\u00e9es aux fichiers style.css<\/em>, functions.php<\/em> ou autres mod\u00e8les de th\u00e8mes seront effac\u00e9es. En g\u00e9n\u00e9ral, vous ne devez pas apporter de modifications directes \u00e0 votre site web dans l’\u00e9diteur sans utiliser un th\u00e8me enfant<\/a>.<\/p>\n La feuille de style est comme une \u00ab\u00a0liste d’instructions\u00a0\u00bb pour votre site web, qui d\u00e9finit exactement son style et la mani\u00e8re dont le code CSS est trait\u00e9. C’est l\u00e0 que vous ferez l’essentiel de vos modifications, mais nous vous montrerons \u00e9galement comment acc\u00e9der aux autres fichiers de mod\u00e8les de th\u00e8mes, tels que header.php et footer.php<\/a>.<\/p>\n Il y a deux fa\u00e7ons d’acc\u00e9der \u00e0 la feuille de style de votre site WordPress : via le tableau de bord de WordPress<\/a> ou via un client FTP<\/a>. Nous couvrirons les deux possibilit\u00e9s.<\/p>\n Vous n’\u00eates pas \u00e0 l’aise pour le faire vous-m\u00eame ? Envisagez de faire appel \u00e0 un d\u00e9veloppeur WordPress<\/a> qui s\u2019occupera de cette \u00e9tape pour vous.<\/p>\n Le moyen le plus simple et le plus pratique d’acc\u00e9der \u00e0 votre feuille de style CSS se trouve directement dans le tableau de bord de WordPress. Il n’est pas n\u00e9cessaire d’installer des programmes FTP ou des \u00e9diteurs de code<\/a>. Vous pouvez modifier directement n’importe quel fichier avec la coloration syntaxique et la documentation des fonctions int\u00e9gr\u00e9es.<\/p>\n Avant d’effectuer des modifications importantes sur les fichiers du c\u0153ur, vous devez toujours sauvegarder votre site WordPress<\/a>. Il est tr\u00e8s facile de faire accidentellement une erreur qui pourrait casser l’apparence de votre site si vous \u00eates novice en mati\u00e8re de CSS, et il pourrait \u00eatre difficile de savoir comment annuler vos modifications.<\/p>\n Une fois que vous avez fait une sauvegarde et un th\u00e8me enfant, connectez-vous \u00e0 votre administration. Vous pouvez trouver l’\u00e9diteur en allant dans le menu et en cliquant sur Apparence > \u00c9diteur de th\u00e8me.<\/em><\/p>\n Vous devriez voir un popup vous mettant en garde contre les modifications directes de ces fichiers. Ne vous inqui\u00e9tez pas, cliquez simplement sur \u00ab\u00a0Je comprends\u00a0\u00bb. Il s’agit seulement d’un avertissement pour vous rappeler d\u2019utiliser un th\u00e8me enfant et de sauvegarder votre site web avant d’y apporter des modifications importantes. Suivez ces \u00e9tapes, et vous pourrez modifier votre site en toute s\u00e9curit\u00e9.<\/p>\n Et maintenant, vous y \u00eates ! Vous devriez \u00eatre sur la feuille de style par d\u00e9faut mais regardez dans le menu de droite pour voir vos fichiers de th\u00e8me si ce n’est pas le cas.<\/p>\n Outre style.css, vous aurez \u00e9galement acc\u00e8s \u00e0 des fichiers de mod\u00e8les comme functions.php, header.php et single.php. Tous ces \u00e9l\u00e9ments ont une incidence sur le comportement de certaines pages de votre site.<\/p>\n Mais vous devriez vous familiariser avec le PHP<\/a> avant de vous plonger dans ces dossiers particuliers.<\/p>\n N’oubliez pas : la plupart des modifications CSS que vous apporterez ici seront globales. Par exemple, si vous changez vos en-t\u00eates H1 pour une certaine police, cela prendra effet pour chaque page de votre site. Vous devrez utiliser une syntaxe sp\u00e9ciale pour personnaliser le style de certaines pages.<\/p>\n Que faire si vous ne pouvez pas acc\u00e9der \u00e0 l’\u00e9diteur de th\u00e8mes ou si vous pr\u00e9f\u00e9rez travailler par FTP ? Il est plus facile d’utiliser l’\u00e9diteur de th\u00e8mes, mais certains th\u00e8mes ou extensions peuvent le d\u00e9sactiver. Si c’est le cas, vous devrez vous connecter \u00e0 votre site web par FTP<\/a>.<\/p>\n Le FTP, ou File Transfer Protocol, permet d’acc\u00e9der \u00e0 distance aux fichiers d’un site web et de les modifier. La premi\u00e8re chose que vous devez faire est de t\u00e9l\u00e9charger FileZilla<\/a> ou tout autre client FTP.<\/p>\n Ensuite, vous devez contacter votre h\u00e9bergeur et lui demander vos identifiants FTP (h\u00f4te, port et nom d’utilisateur\/mot de passe, le cas \u00e9ch\u00e9ant). Si votre h\u00e9bergeur dispose d’un tableau de bord, vous pourrez peut-\u00eatre les trouver en vous connectant.<\/p>\n Les identifiants des utilisateurs de Kinsta se trouvent dans le tableau de bord MyKinsta<\/a> sous Sites > SFTP\/SSH.<\/em><\/p>\n Une fois que vous les avez, lancez votre client FTP et saisissez ces informations. Si cela ne fonctionne pas, essayez de mettre \u00ab\u00a0sftp:\/\/\u00a0\u00bb avant l’URL dans la section \u00ab\u00a0H\u00f4te\u00a0\u00bb<\/em>.<\/p>\n Une fois \u00e0 l’int\u00e9rieur, vous pouvez trouver votre fichier style.css en cliquant sur le dossier wp-content<\/em> pour l’ouvrir, puis sur le dossier de votre th\u00e8me (comme le th\u00e8me Twenty Twenty<\/em><\/a>), puis en faisant d\u00e9filer jusqu’\u00e0 ce que vous voyiez style.css.<\/p>\n Double-cliquez pour l’ouvrir (ou faites un clic droit et s\u00e9lectionnez Afficher\/Modifier<\/em>) et apportez vos modifications. N’oubliez pas de sauvegarder et de t\u00e9l\u00e9verer \u00e0 nouveau sur le serveur.<\/p>\n Si vous avez besoin de modifier d’autres fichiers de mod\u00e8les<\/a> comme home.php, single.php, archive.php, vous pouvez les trouver dans le m\u00eame dossier que style.css.<\/p>\n Il n’est pas toujours n\u00e9cessaire de modifier les fichiers de votre th\u00e8me<\/a>, que ce soit par FTP ou par le tableau de bord. En fait, il vaut mieux \u00e9viter de le faire si vous ne faites qu’ajouter du code suppl\u00e9mentaire.<\/p>\n Pour les petits ajouts, voici la meilleure fa\u00e7on d’ajouter du CSS \u00e0 votre site WordPress.<\/p>\n Si vous ne cherchez pas \u00e0 modifier le code CSS existant, et que vous souhaitez simplement ajouter votre propre style \u00e0 la place, il est fortement sugg\u00e9r\u00e9 d’utiliser l’une des m\u00e9thodes suivantes : Personnalisation de WordPress ou utilisation d’une extension d\u00e9di\u00e9e.<\/p>\n D’une part, le code CSS ajout\u00e9 par l’une de ces m\u00e9thodes est beaucoup plus facile \u00e0 acc\u00e9der et \u00e0 utiliser. Vous n’avez pas \u00e0 vous soucier de mettre votre nouveau code CSS au mauvais endroit ou d’oublier o\u00f9 vous l’avez ajout\u00e9 si vous souhaitez y apporter des modifications par la suite.<\/p>\n De plus, le CSS ajout\u00e9 par l’une de ces m\u00e9thodes ne sera pas perdu lors de la mise \u00e0 jour de votre th\u00e8me (bien qu’il puisse toujours dispara\u00eetre si vous changez de th\u00e8me<\/a>).<\/p>\n Cela signifie que vous n’avez pas besoin d’utiliser un th\u00e8me enfant, et si quelque chose se casse, tout ce que vous avez \u00e0 faire est de supprimer le CSS que vous venez d’ajouter.<\/p>\n Notez que vous devriez toujours conserver une sauvegarde de votre site web<\/a>, car certaines personnes ont signal\u00e9 avoir perdu leur CSS \u00e0 l’occasion de mises \u00e0 jour importantes. N\u00e9anmoins, cette m\u00e9thode est beaucoup plus fiable que la modification directe des fichiers de th\u00e8me.<\/p>\n Bien que vous puissiez simplement ajouter du code \u00e0 style.css et vous en contenter, si vous ne souhaitez pas cr\u00e9er un th\u00e8me enfant<\/a>, faire des modifications majeures au CSS existant dans votre th\u00e8me et risquer de voir tout votre travail effac\u00e9, il est pr\u00e9f\u00e9rable d’utiliser l’option CSS suppl\u00e9mentaire dans l\u2019outil de personnalisation de WordPress ou d’installer une extension.<\/p>\n Au lieu d’utiliser l’\u00e9diteur de th\u00e8me, essayez ceci. Connectez-vous \u00e0 votre administration WordPress<\/a> et cliquez sur Apparence > Personnaliser pour<\/em> ouvrir l’\u00e9cran de personnalisation du th\u00e8me. Vous verrez un aper\u00e7u en direct de votre site web, avec des options sur la gauche pour personnaliser des \u00e9l\u00e9ments comme les couleurs, les menus ou d’autres widgets<\/a>.<\/p>\n Tout en bas de ce menu, vous devriez trouver la bo\u00eete CSS <\/em>additionnel<\/em><\/a>.<\/em><\/p>\n Cliquez pour l’ouvrir. Vous serez dirig\u00e9 vers un nouvel \u00e9cran avec une zone de saisie de code et quelques instructions. L’\u00e9cran CSS suppl\u00e9mentaire comprend une mise en \u00e9vidence syntaxique, tout comme l’\u00e9diteur de th\u00e8me, ainsi qu’une validation qui vous permet de savoir si votre code est erron\u00e9.<\/p>\n Tout code que vous \u00e9crivez appara\u00eet automatiquement dans la zone de pr\u00e9visualisation \u00e0 droite, sauf s’il comporte une erreur (mais vous pouvez quand m\u00eame choisir de le publier).<\/p>\n Lorsque vous avez fini de travailler, vous pouvez publier votre code, planifier sa prise d’effet ou l’enregistrer sous forme de projet pour y travailler plus tard. Vous pouvez m\u00eame obtenir un lien de pr\u00e9visualisation pour le partager avec d’autres.<\/p>\n Comme vous pouvez le voir, la page de CSS additionnel est \u00e0 bien des \u00e9gards plus puissante que l’\u00e9diteur de th\u00e8me et beaucoup plus adapt\u00e9e \u00e0 l’ajout de code qu’\u00e0 la modification des fichiers.<\/p>\n Le code CSS que vous \u00e9crivez ici \u00e9crase le style par d\u00e9faut de votre th\u00e8me et ne dispara\u00eet pas lors de la mise \u00e0 jour de votre th\u00e8me. Si vous ne pouvez pas le voir \u00ab\u00a0en direct\u00a0\u00bb sur votre aper\u00e7u, v\u00e9rifiez que vous utilisez les bons s\u00e9lecteurs dans votre code CSS.<\/p>\n Tout comme l’\u00e9diteur de th\u00e8me, le CSS est global par d\u00e9faut, mais vous pouvez \u00e9crire du code qui cible des pages sp\u00e9cifiques<\/a>.<\/p>\n Le seul inconv\u00e9nient est que, si vous changez de th\u00e8me<\/a>, tout ce que vous avez saisi sera effac\u00e9. Veillez \u00e0 sauvegarder votre CSS avant de passer \u00e0 un nouveau th\u00e8me, sinon vous risquez de perdre beaucoup de travail.<\/p>\n Si vous avez du mal \u00e0 utiliser cette option, ou si vous voulez une solution qui fonctionne sur plusieurs th\u00e8mes et qui peut plus facilement cibler certaines pages, vous devriez plut\u00f4t essayer une extension.<\/p>\n Il y a plusieurs raisons pour lesquelles vous pourriez vouloir utiliser une extension pour ajouter du CSS \u00e0 WordPress. Bien que la fonction soit similaire \u00e0 celle du CSS additionnel, les styles resteront g\u00e9n\u00e9ralement inchang\u00e9s m\u00eame si vous changez de th\u00e8me ou si vous le mettez \u00e0 jour.<\/p>\n Vous pouvez \u00e9galement profiter davantage de leur interface utilisateur (UI) ou appr\u00e9cier les fonctions suppl\u00e9mentaires comme l’auto-compl\u00e9tion. Certaines extensions vous permettent m\u00eame de cr\u00e9er des feuilles de style CSS par le biais de menus d\u00e9roulants<\/a>, plut\u00f4t que d’avoir \u00e0 les \u00e9crire vous-m\u00eame.<\/p>\n Simple Custom CSS<\/a> est l\u2019extension de modification de CSS la plus populaire, en raison de sa facilit\u00e9 d’utilisation, de son interface minimale et de son administration l\u00e9g\u00e8re. En bref, c’est une tr\u00e8s petite extension WordPress qui a beaucoup de succ\u00e8s.<\/p>\n Sa mise en place est un jeu d’enfant et vous ne verrez aucun impact n\u00e9gatif sur les performances<\/a>. Elle fonctionne sur n’importe quel th\u00e8me et comprend la mise en \u00e9vidence de la syntaxe et la v\u00e9rification des erreurs.<\/p>\n Simple Custom CSS and JS<\/a> constitue une bonne alternative. Il vous permet \u00e9galement de cibler l’en-t\u00eate, le pied de page, l\u2019interface publique, ou m\u00eame la zone d’administration.<\/p>\n SiteOrigin<\/a> CSS est une autre option qui comprend \u00e9galement un \u00e9diteur traditionnel de CSS. Vous pouvez \u00e0 tout moment passer de l’\u00e9diteur visuel \u00e0 l’\u00e9diteur CSS<\/a>.<\/p>\n Si vous avez du mal \u00e0 ajouter du CSS pour des pages sp\u00e9cifiques, WP Add Custom CSS<\/a> ajoute une bo\u00eete de CSS personnalis\u00e9 \u00e0 l’\u00e9cran de modification, et est \u00e9galement fourni avec un style global.<\/p>\n Vous pouvez \u00e9galement envisager d’essayer un \u00e9diteur CSS visuel. Ceux-ci prennent tout le codage compliqu\u00e9 et le transforment en une s\u00e9rie de champs de saisie et de menus d\u00e9roulants faciles \u00e0 utiliser qui g\u00e8rent toute la programmation pour vous.<\/p>\n CSS Hero<\/a> est une extension d’\u00e9dition visuelle premium dot\u00e9e de fonctions tr\u00e8s puissantes (animation, modification sp\u00e9cifique \u00e0 l’appareil et modification non destructive, pour n’en citer que quelques-unes).<\/p>\n Pr\u00eat \u00e0 plonger dans le CSS pour vous-m\u00eame ? Ces tutoriels pour d\u00e9butants \u00e9tabliront les bases et vous apprendront la syntaxe que vous devrez conna\u00eetre pour \u00e9crire votre propre code CSS fonctionnel.<\/p>\n Cela peut \u00eatre d\u00e9courageant, mais \u00e0 moins que vous n’essayiez de faire quelque chose de vraiment avanc\u00e9, le CSS n’est pas trop difficile ! Des choses simples comme changer la couleur d\u2019arri\u00e8re-plan ou d\u00e9finir le style des polices<\/a> sont assez faciles, et il existe de nombreux exemples en ligne.<\/p>\n La plupart des tutoriels de programmation<\/a> que vous trouverez sur Internet sont \u00e9galement enti\u00e8rement gratuits. Il existe de nombreuses informations gratuites ou<\/a> peu co\u00fbteuses.<\/p>\n Voici quelques exemples couvrant les meilleurs tutoriels CSS pour les d\u00e9butants.<\/p>\n En tant qu’utilisateur de WordPress, il peut \u00eatre d\u00e9routant de se lancer dans le CSS au d\u00e9but. Mais une fois que vous savez comment modifier vos fichiers de th\u00e8me et o\u00f9 ajouter du style, vous ne devriez plus avoir de probl\u00e8me.<\/p>\n Les fichiers du th\u00e8me peuvent \u00eatre modifi\u00e9s soit \u00e0 partir de votre administration, soit par FTP pour changer l’apparence de votre site, mais cela doit g\u00e9n\u00e9ralement \u00eatre \u00e9vit\u00e9, \u00e0 moins que vous ne deviez modifier le code existant.<\/p>\n Si vous souhaitez simplement ajouter votre propre CSS, utilisez la page de CSS additionnel sous Apparence > Personnaliser,<\/em> ou essayez une extension si vous avez besoin de quelque chose de plus puissant.<\/p>\n Les modifications apport\u00e9es \u00e0 votre feuille de style<\/a> seront perdues lors de la mise \u00e0 jour du th\u00e8me, sauf si vous utilisez un th\u00e8me enfant<\/a>. Il n’en va pas de m\u00eame pour le CSS additionnel. Votre code est \u00e0 l’abri des mises \u00e0 jour, mais n’oubliez pas : seul une extension conservera le CSS lorsque vous changerez de th\u00e8me<\/a>.<\/p>\n![\"w3school\"](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/03\/w3school-1.png\")
WordPress et le CSS<\/h2>\n
Comment personnaliser votre th\u00e8me WordPress avec le CSS<\/h2>\n
Modifier le CSS de WordPress dans le tableau de bord<\/h3>\n
![\"Modification](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/03\/modification-directe-fichiers.png\")
![\"Modification](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/07\/modification-theme-style-css.png\")
Modifier directement les fichiers du th\u00e8me<\/h3>\n
![\"FTP](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/07\/mykinsta-view-sftp-credentials-1.png\")
![\"FileZilla\"](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/03\/filezilla-1.png\")
Comment ajouter un CSS personnalis\u00e9 dans WordPress<\/h2>\n
1. Modification du CSS par la personnalisation de WordPress<\/h3>\n
![\"CSS](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/03\/css-additionnel.png\")
2. Ajout de CSS personnalis\u00e9 \u00e0 WordPress \u00e0 l’aide d\u2019extensions<\/h3>\n
Simple Custom CSS<\/h4>\n
![\"Extension](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/07\/extension-wordpress-simple-custom-css.jpg\")
Simple Custom CSS and JS<\/h4>\n
![\"Extension](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/07\/extension-simple-custom-css-and-js.jpg\")
SiteOrigin CSS<\/h4>\n
![\"Extension](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/07\/extension-siteorigin-css.jpg\")
WP Add Custom CSS<\/h4>\n
![\"Extension](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/07\/extension-wp-add-custom-css.jpg\")
CSS Hero<\/h4>\n
![\"CSS](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/03\/css-hero-1.png\")
O\u00f9 apprendre le CSS<\/h2>\n
![\"Learn](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/03\/learn-css-1.png\")
\n
R\u00e9sum\u00e9<\/h2>\n