Vous voulez essayer de modifier le CSS de WordPress, mais vous ne savez pas par où commencer ? Avec la stylisation du CSS, vous pouvez modifier l’apparence de votre site globalement ou sur certaines pages. Vous pouvez ajouter des couleurs, espacer certains éléments, concevoir une mise en page et modifier l’apparence de votre thème WordPress.
Si vous souhaitez vous familiariser avec l’environnement de développement de WordPress, ou simplement avoir un contrôle plus fin sur l’apparence de votre site web, vous devrez savoir comment ajouter du CSS dans WordPress (et comment modifier ce qui s’y trouve déjà).
En modifiant votre thème et en ajoutant vos propres CSS, vous pourrez optimiser chaque élément visuel de votre site. Aujourd’hui, nous allons y regarder de plus près.
Prêt à commencer ? Allons-y !
Qu’est-ce que la modification de CSS ?
CSS signifie Cascading Style Sheets (feuilles de style en cascade) et c’est le langage web le plus populaire, outre le HTML. Les deux vont de pair, car le CSS est utilisé pour styliser les éléments HTML. Le HTML pose les bases de l’aspect d’un site web et le CSS est utilisé pour en améliorer le style.
Le CSS vous permet de rendre un site web responsive, d’ajouter des couleurs, de changer les polices, de modifier la mise en page et, en général, d’affiner la présentation visuelle d’un site web. Comme le HTML et le JavaScript, le CSS est un langage d’interface publique côté client, ce qui signifie qu’il s’exécute du côté de l’utilisateur, plutôt que sur la zone d’administration.
Lorsque vous vous plongez dans le développement de WordPress, HTML, CSS, JavaScript et PHP sont les langages que vous devez connaître. C’est dans ces langages qu’est intégré le noyau du CMS, ainsi que ses nombreux thèmes et extensions.
Mais même si vous n’êtes pas un concepteur ou un développeur web, il est bon de prendre un peu de CSS, car vous pouvez l’utiliser pour déplacer ou styliser des éléments de votre site web, ou apporter de petites modifications esthétiques à votre thème pour qu’il vous convienne mieux.
WordPress et le CSS
Dans WordPress, le CSS est un peu différent. Il est contrôlé par des thèmes, qui sont composés de fichiers de modèles, de balises de modèles et, bien sûr, de la feuille de style CSS. Bien qu’ils soient générés par votre thème, tous ces éléments sont modifiables par vous.
Les fichiers de modèles divisent des parties de votre site web en sections (telles que header.php ou archive.php), et les balises de modèles sont utilisées pour faire appel à eux et à d’autres contenus de votre base de données. Ces fichiers sont en fait constitués principalement de PHP et de HTML, bien que vous puissiez ajouter du CSS si nécessaire.
Ce que vous cherchez vraiment, c’est la feuille de style, ou style.css. Pour modifier l’apparence de votre site web, vous devez apprendre à ajouter et à modifier du code dans ce fichier.
Comment personnaliser votre thème WordPress avec le CSS
Si vous souhaitez personnaliser votre thème et changer l’apparence de votre site avec le CSS, vous devrez soit ajouter votre propre code, soit modifier ce qui est déjà là. Il existe des moyens d’ajouter du CSS sans jamais avoir à toucher à un fichier de thème, mais pour modifier le code d’un thème existant, vous devrez accéder à la feuille de style de votre site.
Lorsque vous effectuez ces changements, il y a une chose que vous devez savoir : lorsque votre thème se met à jour, toutes les modifications que vous avez apportées aux fichiers style.css, functions.php ou autres modèles de thèmes seront effacées. En général, vous ne devez pas apporter de modifications directes à votre site web dans l’éditeur sans utiliser un thème enfant.
La feuille de style est comme une « liste d’instructions » pour votre site web, qui définit exactement son style et la manière dont le code CSS est traité. C’est là que vous ferez l’essentiel de vos modifications, mais nous vous montrerons également comment accéder aux autres fichiers de modèles de thèmes, tels que header.php et footer.php.
Il y a deux façons d’accéder à la feuille de style de votre site WordPress : via le tableau de bord de WordPress ou via un client FTP. Nous couvrirons les deux possibilités.
Vous n’êtes pas à l’aise pour le faire vous-même ? Envisagez de faire appel à un développeur WordPress qui s’occupera de cette étape pour vous.
Modifier le CSS de WordPress dans le tableau de bord
Le moyen le plus simple et le plus pratique d’accéder à votre feuille de style CSS se trouve directement dans le tableau de bord de WordPress. Il n’est pas nécessaire d’installer des programmes FTP ou des éditeurs de code. Vous pouvez modifier directement n’importe quel fichier avec la coloration syntaxique et la documentation des fonctions intégrées.
Avant d’effectuer des modifications importantes sur les fichiers du cœur, vous devez toujours sauvegarder votre site WordPress. Il est très facile de faire accidentellement une erreur qui pourrait casser l’apparence de votre site si vous êtes novice en matière de CSS, et il pourrait être difficile de savoir comment annuler vos modifications.
Une fois que vous avez fait une sauvegarde et un thème enfant, connectez-vous à votre administration. Vous pouvez trouver l’éditeur en allant dans le menu et en cliquant sur Apparence > Éditeur de thème.
Vous devriez voir un popup vous mettant en garde contre les modifications directes de ces fichiers. Ne vous inquiétez pas, cliquez simplement sur « Je comprends ». Il s’agit seulement d’un avertissement pour vous rappeler d’utiliser un thème enfant et de sauvegarder votre site web avant d’y apporter des modifications importantes. Suivez ces étapes, et vous pourrez modifier votre site en toute sécurité.
Et maintenant, vous y êtes ! Vous devriez être sur la feuille de style par défaut mais regardez dans le menu de droite pour voir vos fichiers de thème si ce n’est pas le cas.
Outre style.css, vous aurez également accès à des fichiers de modèles comme functions.php, header.php et single.php. Tous ces éléments ont une incidence sur le comportement de certaines pages de votre site.
Mais vous devriez vous familiariser avec le PHP avant de vous plonger dans ces dossiers particuliers.
N’oubliez pas : la plupart des modifications CSS que vous apporterez ici seront globales. Par exemple, si vous changez vos en-têtes H1 pour une certaine police, cela prendra effet pour chaque page de votre site. Vous devrez utiliser une syntaxe spéciale pour personnaliser le style de certaines pages.
Modifier directement les fichiers du thème
Que faire si vous ne pouvez pas accéder à l’éditeur de thèmes ou si vous préférez travailler par FTP ? Il est plus facile d’utiliser l’éditeur de thèmes, mais certains thèmes ou extensions peuvent le désactiver. Si c’est le cas, vous devrez vous connecter à votre site web par FTP.
Le FTP, ou File Transfer Protocol, permet d’accéder à distance aux fichiers d’un site web et de les modifier. La première chose que vous devez faire est de télécharger FileZilla ou tout autre client FTP.
Ensuite, vous devez contacter votre hébergeur et lui demander vos identifiants FTP (hôte, port et nom d’utilisateur/mot de passe, le cas échéant). Si votre hébergeur dispose d’un tableau de bord, vous pourrez peut-être les trouver en vous connectant.
Les identifiants des utilisateurs de Kinsta se trouvent dans le tableau de bord MyKinsta sous Sites > SFTP/SSH.
Une fois que vous les avez, lancez votre client FTP et saisissez ces informations. Si cela ne fonctionne pas, essayez de mettre « sftp:// » avant l’URL dans la section « Hôte ».
Une fois à l’intérieur, vous pouvez trouver votre fichier style.css en cliquant sur le dossier wp-content pour l’ouvrir, puis sur le dossier de votre thème (comme le thème Twenty Twenty), puis en faisant défiler jusqu’à ce que vous voyiez style.css.
Double-cliquez pour l’ouvrir (ou faites un clic droit et sélectionnez Afficher/Modifier) et apportez vos modifications. N’oubliez pas de sauvegarder et de téléverer à nouveau sur le serveur.
Si vous avez besoin de modifier d’autres fichiers de modèles comme home.php, single.php, archive.php, vous pouvez les trouver dans le même dossier que style.css.
Il n’est pas toujours nécessaire de modifier les fichiers de votre thème, que ce soit par FTP ou par le tableau de bord. En fait, il vaut mieux éviter de le faire si vous ne faites qu’ajouter du code supplémentaire.
Pour les petits ajouts, voici la meilleure façon d’ajouter du CSS à votre site WordPress.
Comment ajouter un CSS personnalisé dans WordPress
Si vous ne cherchez pas à modifier le code CSS existant, et que vous souhaitez simplement ajouter votre propre style à la place, il est fortement suggéré d’utiliser l’une des méthodes suivantes : Personnalisation de WordPress ou utilisation d’une extension dédiée.
D’une part, le code CSS ajouté par l’une de ces méthodes est beaucoup plus facile à accéder et à utiliser. Vous n’avez pas à vous soucier de mettre votre nouveau code CSS au mauvais endroit ou d’oublier où vous l’avez ajouté si vous souhaitez y apporter des modifications par la suite.
De plus, le CSS ajouté par l’une de ces méthodes ne sera pas perdu lors de la mise à jour de votre thème (bien qu’il puisse toujours disparaître si vous changez de thème).
Cela signifie que vous n’avez pas besoin d’utiliser un thème enfant, et si quelque chose se casse, tout ce que vous avez à faire est de supprimer le CSS que vous venez d’ajouter.
Notez que vous devriez toujours conserver une sauvegarde de votre site web, car certaines personnes ont signalé avoir perdu leur CSS à l’occasion de mises à jour importantes. Néanmoins, cette méthode est beaucoup plus fiable que la modification directe des fichiers de thème.
Bien que vous puissiez simplement ajouter du code à style.css et vous en contenter, si vous ne souhaitez pas créer un thème enfant, faire des modifications majeures au CSS existant dans votre thème et risquer de voir tout votre travail effacé, il est préférable d’utiliser l’option CSS supplémentaire dans l’outil de personnalisation de WordPress ou d’installer une extension.
1. Modification du CSS par la personnalisation de WordPress
Au lieu d’utiliser l’éditeur de thème, essayez ceci. Connectez-vous à votre administration WordPress et cliquez sur Apparence > Personnaliser pour ouvrir l’écran de personnalisation du thème. Vous verrez un aperçu en direct de votre site web, avec des options sur la gauche pour personnaliser des éléments comme les couleurs, les menus ou d’autres widgets.
Tout en bas de ce menu, vous devriez trouver la boîte CSS additionnel.
Cliquez pour l’ouvrir. Vous serez dirigé vers un nouvel écran avec une zone de saisie de code et quelques instructions. L’écran CSS supplémentaire comprend une mise en évidence syntaxique, tout comme l’éditeur de thème, ainsi qu’une validation qui vous permet de savoir si votre code est erroné.
Tout code que vous écrivez apparaît automatiquement dans la zone de prévisualisation à droite, sauf s’il comporte une erreur (mais vous pouvez quand même choisir de le publier).
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ême obtenir un lien de prévisualisation pour le partager avec d’autres.
Comme vous pouvez le voir, la page de CSS additionnel est à bien des égards plus puissante que l’éditeur de thème et beaucoup plus adaptée à l’ajout de code qu’à la modification des fichiers.
Le code CSS que vous écrivez ici écrase le style par défaut de votre thème et ne disparaît pas lors de la mise à jour de votre thème. Si vous ne pouvez pas le voir « en direct » sur votre aperçu, vérifiez que vous utilisez les bons sélecteurs dans votre code CSS.
Tout comme l’éditeur de thème, le CSS est global par défaut, mais vous pouvez écrire du code qui cible des pages spécifiques.
Le seul inconvénient est que, si vous changez de thème, tout ce que vous avez saisi sera effacé. Veillez à sauvegarder votre CSS avant de passer à un nouveau thème, sinon vous risquez de perdre beaucoup de travail.
Si vous avez du mal à utiliser cette option, ou si vous voulez une solution qui fonctionne sur plusieurs thèmes et qui peut plus facilement cibler certaines pages, vous devriez plutôt essayer une extension.
2. Ajout de CSS personnalisé à WordPress à l’aide d’extensions
Il y a plusieurs raisons pour lesquelles vous pourriez vouloir utiliser une extension pour ajouter du CSS à WordPress. Bien que la fonction soit similaire à celle du CSS additionnel, les styles resteront généralement inchangés même si vous changez de thème ou si vous le mettez à jour.
Vous pouvez également profiter davantage de leur interface utilisateur (UI) ou apprécier les fonctions supplémentaires comme l’auto-complétion. Certaines extensions vous permettent même de créer des feuilles de style CSS par le biais de menus déroulants, plutôt que d’avoir à les écrire vous-même.
Simple Custom CSS
Simple Custom CSS est l’extension de modification de CSS la plus populaire, en raison de sa facilité d’utilisation, de son interface minimale et de son administration légère. En bref, c’est une très petite extension WordPress qui a beaucoup de succès.
Sa mise en place est un jeu d’enfant et vous ne verrez aucun impact négatif sur les performances. Elle fonctionne sur n’importe quel thème et comprend la mise en évidence de la syntaxe et la vérification des erreurs.
Simple Custom CSS and JS
Simple Custom CSS and JS constitue une bonne alternative. Il vous permet également de cibler l’en-tête, le pied de page, l’interface publique, ou même la zone d’administration.
SiteOrigin CSS
SiteOrigin CSS est une autre option qui comprend également un éditeur traditionnel de CSS. Vous pouvez à tout moment passer de l’éditeur visuel à l’éditeur CSS.
WP Add Custom CSS
Si vous avez du mal à ajouter du CSS pour des pages spécifiques, WP Add Custom CSS ajoute une boîte de CSS personnalisé à l’écran de modification, et est également fourni avec un style global.
CSS Hero
Vous pouvez également envisager d’essayer un éditeur CSS visuel. Ceux-ci prennent tout le codage compliqué et le transforment en une série de champs de saisie et de menus déroulants faciles à utiliser qui gèrent toute la programmation pour vous.
CSS Hero est une extension d’édition visuelle premium dotée de fonctions très puissantes (animation, modification spécifique à l’appareil et modification non destructive, pour n’en citer que quelques-unes).
Où apprendre le CSS
Prêt à plonger dans le CSS pour vous-même ? Ces tutoriels pour débutants établiront les bases et vous apprendront la syntaxe que vous devrez connaître pour écrire votre propre code CSS fonctionnel.
Cela peut être décourageant, mais à moins que vous n’essayiez de faire quelque chose de vraiment avancé, le CSS n’est pas trop difficile ! Des choses simples comme changer la couleur d’arrière-plan ou définir le style des polices sont assez faciles, et il existe de nombreux exemples en ligne.
La plupart des tutoriels de programmation que vous trouverez sur Internet sont également entièrement gratuits. Il existe de nombreuses informations gratuites ou peu coûteuses.
Voici quelques exemples couvrant les meilleurs tutoriels CSS pour les débutants.
- W3Schools CSS Tutorial : Vous trouverez ici une tonne d’informations : des tutoriels approfondis, des exemples et des références pour vous aider à travailler. Les tutoriels du W3Schools sont aussi simples et faciles à suivre que possible, donc même si vous êtes un débutant, c’est un excellent endroit pour commencer.
- Codeacademy Learn CSS : Grâce à six leçons pratiques gratuites, vous apprendrez les bases du CSS. Il ne s’agit pas d’un simple tutoriel vidéo, mais d’une leçon interactive qui vous permet de travailler avec du code réel. Avec la version pro, vous pouvez également travailler sur des questionnaires et des projets de forme libre.
- Learn CSS in One Hour : Beaucoup de gens veulent apprendre un nouveau langage de programmation, mais ils n’ont pas le temps de s’y consacrer. Mais si vous pouvez consacrer une heure seulement, vous pouvez apprendre le CSS grâce à ce cours gratuit en 20 parties. Même si vous n’êtes pas un maître à la fin, vous devriez avoir une bonne connaissance des bases.
- Introduction to Basic HTML & CSS for WordPress Users : Vous cherchez quelque chose de spécifique à WordPress ? Si vous avez toujours eu du mal à écrire du HTML et du CSS, ce cours est parfait pour vous. Il est payant, mais comprend 52 conférences et cinq heures de vidéo pour apprendre.
Résumé
En tant qu’utilisateur de WordPress, il peut être déroutant de se lancer dans le CSS au début. Mais une fois que vous savez comment modifier vos fichiers de thème et où ajouter du style, vous ne devriez plus avoir de problème.
Les fichiers du thème peuvent être modifiés soit à partir de votre administration, soit par FTP pour changer l’apparence de votre site, mais cela doit généralement être évité, à moins que vous ne deviez modifier le code existant.
Si vous souhaitez simplement ajouter votre propre CSS, utilisez la page de CSS additionnel sous Apparence > Personnaliser, ou essayez une extension si vous avez besoin de quelque chose de plus puissant.
Les modifications apportées à votre feuille de style seront perdues lors de la mise à jour du thème, sauf si vous utilisez un thème enfant. Il n’en va pas de même pour le CSS additionnel. Votre code est à l’abri des mises à jour, mais n’oubliez pas : seul une extension conservera le CSS lorsque vous changerez de thème.
Quelle que soit la méthode choisie, vous devez toujours conserver des sauvegardes régulières de votre site web, y compris la feuille de style et le code personnalisé que vous avez ajoutés. Il est maintenant temps de rafraîchir vos connaissances de base en matière de CSS grâce aux ressources que nous vous avons fournies.
Joyeuse stylisation !
Rédacteur en chef chez Kinsta et consultant en marketing de contenu pour les développeurs de plugins WordPress. Connectez-vous avec Matteo sur Twitter.
Laisser un commentaire