Comment modifier le CSS de WordPress ?

Dans cet article nous allons voir comment modifier le CSS de WordPress simplement de manière native à WordPress. Selon le thème que vous avez installé sur WordPress, vous aurez plusieurs manières d’accéder aux panneaux qui vont vous permettre de modifier l’apparence de votre site. Je vais donc vous expliquer dans ce tuto la manière de changer le CSS si vous voulez choisir un thème classique, mais aussi sur un thème FSE full site editing.

Quand faut-il modifier le CSS pour personnaliser WordPress ?

Lorsque vous rédigez un article ou une page vous avez dans la partie de droite de l’éditeur Gutenberg la possibilité de régler le style de chaque bloc ce qui vous permet de modifier le CSS sans toucher au code. Si malgré tout avec toutes les options disponibles vous n’arrivez toujours pas à avoir la personnalisation que vous souhaitez, il est alors envisageable d’utiliser le CSS pour personnaliser davantage votre site internet.

Comment débuter le CSS dans WordPress ?

Avant de commencer à créer du CSS sur votre site internet vous devez créer un thème enfant si vous avez téléchargé un thème classique. Pour les thèmes FSE ce n’est plus vraiment utile, mais ça vous apporte une sécurité supplémentaire quant à la mise en page de votre site Internet. Le thème enfant va permettre de créer un nouveau fichier style.css qui sera modifiable sans être altéré lors des mises à jour futures de WordPress. Ce fichier se nomme généralement une feuille de style. L’extension que je vous recommande pour créer un thème enfant est ‘Child thème Configurator‘.

Comment cibler les éléments pour créer du CSS sur WordPress ?

La manière la plus simple de commencer la personnalisation de vos blocs grâce au CSS consiste à attribuer à ces blocs une classe ou un identifiant.

Lorsque vous rédigez un article ou une page dans la colonne de droite dans la partie ‘avancé’ vous pouvez ajouter un nom de classe dans le champ ‘classe additionnelle’ . Si vous ajoutez plusieurs classes, séparer les par une espace. Le nom que vous allez attribuer sera le nom à utiliser dans votre CSS pour pouvoir modifier l’élément.

Pour ajouter un identifiant sur un élément, indiquez un nom dans la partie ‘ancre HTML’.

Où personnaliser le CSS de WordPress ?

Pour accéder à l’éditeur de style de WordPress vous avez plusieurs solutions cela va dépendre surtout du type de thème installé sur WordPress.

1 – dans le panneau ‘personnaliser’ du menu ‘apparence’

La solution la plus courante consiste à se rendre dans le menu d’administration et de sélectionner ‘apparence’ puis ‘personnaliser’ comme indiqué sur l’image ci-dessous.

Si cette option n’est pas disponible, il est possible que vous ayez téléchargé un thème FSE qui ne prend pas en charge la personnalisation du thème à cet endroit.

Nous verrons un peu plus loin dans l’article comment personnaliser le CSS dans un thème full site editing ou édition complète du site en français.

En cliquant sur l’onglet ‘personnaliser’, vous accédez aux différents réglages du thème. Ainsi une nouvelle colonne apparaît sur la gauche où on retrouve des options qui permettent de régler les paramètres de votre site WordPress.

À cet endroit, cliquez sur l’onglet ‘CSS additionnel’ comme le montre l’image ci-dessous.

2 – dans le panneau ‘éditeur’ pour les thèmes WordPress FSE.

Si vous avez téléchargé un thème WordPress FSE la deuxième solution pour personnaliser le code CSS de WordPress et de vous rendre dans le menu ‘apparence’ puis ‘éditeur’.

Cliquez sur la page et rendez-vous dans le menu droit tout en haut. Il y a un cercle noir et blanc. Cliquez dessus puis sur les trois petits points qui se situent juste en dessous. Vous pouvez maintenant sélectionner ‘CSS additionnel’ ou ‘guide de bienvenue’. Plus simplement vous pouvez vous rendre directement en bas de la colonne de droite pour cliquer sur ‘css additionnel’.

Ajouter du CSS dans WordPress en utilisant une connexion FTP

Vous pouvez utiliser une extension tel que Filezilla pour vous connecter en FTP à votre hébergeur afin de pouvoir accéder à votre site internet.

Ouvrez le dossier contenant l’installation de votre site WordPress puis cliquez sur le dossier ‘wp-content’ puis sur le dossier ‘themes’. Sélectionnez ensuite le dossier du thème que vous utilisez actuellement sur WordPress. Vous pouvez maintenant faire un clic droit sur le fichier ‘style.css’ afin de le modifier avec le Bloc-Notes de Windows.

Bien qu’il soit possible de modifier le CSS de WordPress en utilisant cette méthode, je vous le déconseille fortement. Préférez l’utilisation d’un thème enfant ou utilisez les emplacements prévus pour le CSS dans l’interface de WordPress.

Pour terminer

Ajouter ou modifier du code CSS dans WordPress peut être délicat pour les personnes qui ne maîtrisent pas ce langage. Pensez à vérifier l’apparence de votre site sur plusieurs navigateurs et dans plusieurs formats d’écran.