Comment modifier le CSS dans WordPress

WordPress (WP) est un excellent outil pour construire votre site web sans avoir besoin de connaissances en code. Cependant, pour tirer le meilleur parti de ce CMS (système de gestion de contenu) et pouvoir créer des sites de meilleure qualité, il est nécessaire de posséder des connaissances de base en matière de code, en particulier HTML, CSS et JavaScript.

Dans ce texte-ci, je vais vous montrer comment modifier des éléments d’une page WP en utilisant CSS pour avoir un contrôle total sur le design. 

Je vais commencer par une brève explication. CSS est le langage utilisé pour définir l’apparence des éléments HTML utilisés dans un site Web. Par exemple, si nous voulons que tous les titres affichent la même couleur et la même taille, nous appliquerons une propriété CSS pour modifier tous les titres en même temps. De la même manière, nous pouvons modifier des éléments spécifiques séparément sans affecter le reste du contenu. 

Pour identifier les éléments que nous souhaitons éditer, nous allons utiliser un sélecteur. Celui-ci est simplement un nom que nous allons attribuer à cet élément pour le différencier des autres. Il existe 3 types de sélecteurs: 

• Sélecteur de type – Pour affecter tous les éléments du même type. Exemple: h2 {color: red; } changerait tous les titres de niveau 2 en rouge. 

•  Sélecteur de classe – Utilisé pour nommer les éléments qui auront le même design. De cette manière, nous pouvons affecter plusieurs éléments avec une seule ligne de code. En CSS, un point (.) Indique que vous allez modifier une classe. Exemple: .class {color: red; } 

•  Sélecteur d’identifiant – Ce sélecteur est attribué à un élément qui aura des caractéristiques très spécifiques et n’apparaîtra qu’une seule fois dans le site Web. En CSS, un signe dièse (#) est utilisé pour indiquer que nous allons modifier une identification. Exemple: # identifiant {color: red; } 

Raisons d’utiliser CSS dans un thème WP

Le fait d’utiliser CSS dans WordPress vous permettra de:

•  Modifier chaque aspect de votre thème – De nombreux thèmes ne vous permettent pas de personnaliser entièrement chaque composant. Surtout, les thèmes simples et gratuits ont des aspects déjà définis. Toutefois, si vous savez identifier les éléments de votre page et modifier leur apparence à l’aide de CSS, les possibilités sont infinies. 

• Cacher des éléments – Dans certaines occasions, nous souhaitons masquer des éléments tels que les titres de page, les widgets, les images, etc. Avec la propriété display:none , vous pouvez cacher ce que vous voulez. 

• Appliquer des requêtes multimédia (medias queries) à des éléments spécifiques – Bien que la plupart des thèmes soient actuellement responsive, nous souhaitons souvent modifier la façon dont un élément donné sera affiché sur les appareils mobiles. En utilisant CSS, ceci est très facile et nous pouvons choisir la manière dont les éléments seront affichés dans chaque type d’appareil sans dépendre de la configuration par défaut du thème utilisé. 

Comment identifier le nom des éléments que vous souhaitez éditer

Dans cet article, je parlerai de 3 façons d’identifier les objets que vous souhaitez modifier sur votre site Web et d’identifier votre nom de sélecteur afin que vous puissiez le modifier à l’aide de CSS. 

La première méthode consiste simplement à cliquer avec le bouton droit de la souris sur la partie du site souhaité et à sélectionner l’option « inspecter ». Cela vous montrera le nom de l’objet en question. Ensuite, il vous suffit de copier ce nom de sélecteur pour pouvoir le modifier avec CSS. (Plus tard, je vous montrerai où écrire votre code CSS personnalisé dans votre thème WordPress) 

Une autre option consiste à utiliser l’extension « Firebug Lite » de Google Chrome, qui a essentiellement la même fonction que l’inspection à partir de votre navigateur, comme indiqué dans la première option. Cette extension ouvrira une section dans la partie inférieure de votre écran qui vous permettra de copier le nom de l’objet que vous inspectez. 

La troisième façon d’identifier le nom d’un élément que vous souhaitez modifier sur votre site Web consiste à utiliser l’extension « Visual Inspector » de Google Chrome. Cet outil vous permet non seulement d’identifier le nom de l’élément d’une partie spécifique de votre site Web, mais également de modifier son design en temps réel afin que vous puissiez avoir une idée de ce à quoi les styles que vous souhaitez appliquer devraient ressembler. Si, à la fin, vous êtes satisfait du résultat, vous pouvez simplement copier le code CSS, car chaque modification apportée générera automatiquement le code nécessaire en CSS pour effectuer ces modifications. 

Comment nommer des éléments à votre goût

Plusieurs fois, les thèmes et les « page builders » attribuent automatiquement un nom à chaque partie de votre site web, mais parfois vous souhaitez attribuer des noms beaucoup plus significatifs et faciles à identifier. 

Si vous utilisez WP, c’est probablement parce que vous voulez un moyen facile d’ajouter du contenu à votre site sans avoir besoin de code. Pour ce faire, je suis sûr que vous utilisez un page builder. Maintenant, je vais vous montrer comment nommer vos éléments à l’aide des constructeurs de sites Web  (page builders) les plus populaires. 

Elementor 

Ce constructeur de site Web très populaire a la possibilité de personnaliser vos sélecteurs. Pour cela, il vous suffit de cliquer sur le bloc de contenu auquel vous souhaitez ajouter une classe ou un ID, puis de sélectionner l’option « avancé » dans le menu d’Elementor. Ici, vous verrez les options pour nommer votre élément avec une classe ou un ID.

Visual Composer 

Dans le cas de Visual Composer, vous avez 2 façons de nommer vos éléments. La première option vous permet d’appliquer les propriétés CSS souhaitées directement sur la page d’édition. Pour ce faire, il suffit de cliquer sur l’engrenage situé dans le coin supérieur droit de l’écran. 

L’autre option consiste à nommer chaque bloc en même temps, comme nous l’avons fait avec Elementor. Cliquez simplement sur le bouton « éditer » comme indiqué dans l’image suivante. 

Ensuite, une boîte s’ouvrira avec l’option de donner une classe à l’élément sélectionné. 

 

Si vous utilisez Beaver Builder, visitez leur site Web officiel pour savoir comment ajouter votre propre code CSS personnalisé à vos pages: https://kb.wpbeaverbuilder.com/article/94-where-to-put-custom-css-code 

Comment ajouter votre CSS additionnel dans WordPress

Une fois que nous avons nommé les éléments à modifier avec nos propres classes et identifiants, il est temps d’appliquer les propriétés CSS que nous souhaitons ajouter. Pour cela, il suffit de cliquer sur « appereance » dans le menu principal de WP (le menu de gauche du tableau de bord). Ensuite, cliquez sur « personnaliser » et choisissez l’option « CSS supplémentaire ». Dans la zone qui s’affiche, vous pouvez ajouter les propriétés CSS dont vous avez besoin comme s’il s’agissait d’un éditeur de texte commun. 

Si vous ne savez pas quels attributs CSS sont nécessaires pour apporter les modifications souhaitées, vous pouvez utiliser l’extension “Visual Inspector” pour voir les modifications en temps réel sur votre page (les modifications que vous apportez ne sont pas enregistrées. Lorsque vous actualisez la page, tout redevient normal). Ensuite, dans l’onglet « CSS OUTPUT », vous pouvez copier le code correspondant aux modifications que vous avez apportées et les coller dans la section « css personnalisé » de l’option « personnaliser » du menu WP. 

En guise de conclusion, je voudrais mentionner qu’il est possible que certaines propriétés CSS ne soient pas appliquées. Cela est dû au fait que chaque thème WP a déjà ses propres feuilles de style et que souvent, les propriétés que vous écrivez sont remplacées par celles déjà existantes. 

Si vous souhaitez absolument appliquer une propriété, vous pouvez l’indiquer en ajoutant « Important! » À la fin de la propriété. Cependant, cela n’est pas considéré comme une bonne pratique par la communauté de développement Web. 

Si, comme moi, vous utilisez WP depuis quelques années, vous devrez tôt ou tard apprendre un peu de code pour personnaliser vos pages Web. Je suis sûr que vous allez devenir accro au monde du développement Web et que vous souhaiterez en apprendre davantage!

Mon article a-t-il été utile ?