Modifications du CSS dans WordPress

Je suis bien consciente que les modifications apportées à WordPress ne sont pas nécessaires pour tout le monde. Il peut arriver que vous installiez WordPress, puis un thème et les plugins nécessaires et que tout vous convienne. Vous configurez ce dont vous avez besoin dans les paramètres de personnalisation du thème ou du plugin et c’est tout. Et il ressemble et fonctionne exactement comme vous l’aviez rêvé !

Mais je suis aussi souvent confronté à des situations où une personne qui crée son propre site web (ou celui d’un commanditaire) sur WordPress n’aime pas tout du thème ou des plugins. Les changements peuvent bien sûr être effectués de différentes manières (nous y reviendrons dans le podcast), mais nous allons aujourd’hui aborder ceux qui concernent l’aspect général.

Qu’est-ce que les changements CSS
Il est bon de savoir une chose fondamentale. Si vous souhaitez apporter une petite modification à un élément de conception d’une page, par ex :

modifier la taille de la police ou son apparence : dégradé, surbrillance, etc,
changer la couleur de certaines polices ou des ajouts,
modifier la couleur de l’arrière-plan ou l’ajouter/supprimer,
insérer une bordure ou modifier la largeur de la bordure,
modifier la distance entre différents éléments,
alors vous allez faire un changement dans le code CSS. Vous trouverez ci-dessous une description de la manière d’effectuer ces changements de manière intelligente.

Comment effectuer des modifications dans les CSS
Bien sûr, vous pouvez simplement commencer à apprendre et à vous former au code CSS. Certes, cela vous prendra « un certain temps », mais vous agirez sur votre site de manière beaucoup plus consciente. Toutefois, si vous n’en avez pas besoin, si vous n’avez pas le temps, si vous n’avez pas l’intention de devenir un développeur et si vous devez changer quelque chose dans l’apparence de votre site web, il existe un moyen facile de le faire.

Première étape : placez le curseur sur votre page, sur l’élément que vous souhaitez modifier.

Deuxième étape : clic droit et clic sur « Explorer ». (dans Chrome ou Firefox ou quelque chose de similaire dans tout autre navigateur). Cela ouvrira un « inspecteur de code » sur le côté ou en bas de la page.

Troisième étape : trouvez la ligne de code dans la colonne de gauche qui correspond à l’élément que vous voulez modifier (lorsque vous survolez les lignes de code suivantes sur la page, les éléments spécifiques seront mis en évidence).

Quatrième étape : cliquez sur cette ligne et ses styles vous seront affichés dans la colonne de droite.

Et cinquièmement, trouvez le style que vous voulez modifier, changez sa valeur (lorsque vous le modifiez dans l’inspecteur de code, il sera également « modifié » sur la page – bien sûr seulement jusqu’à l’actualisation de la page), puis sélectionnez et copiez (ctrl + c) le fragment de code donné.

Dans la dernière étape – allez dans votre tableau de bord WordPress -> apparence -> personnaliser -> CSS supplémentaire et collez (ctrl + v) l’extrait de code copié là. Enfin, cliquez sur « Publier » et….

C’est parti ! Après avoir rafraîchi la page, votre modification devrait être visible sur celle-ci.