skip to Main Content

Comment ajouter un code CSS personnalisé à votre blog WordPress en 2 méthodes

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

Il y a plus d’une façon d’ajouter un code CSS personnalisé à un blog  WordPress.

Aujourd’hui, je vais vous expliquer les points forts et faibles des deux différentes méthodes que je compte vous proposer, de sorte que vous soyez en mesure de choisir celle qui vous convient le mieux.

Comment trouver les éléments que vous souhaitez personnaliser

Une fois que vous avez isolé une partie de votre thème que vous souhaitez modifier (par exemple, le titre d’un article), vous aurez besoin pour déterminer les propriétés CSS qui lui sont appliquées de sorte que vous pourrez effectuer les modifications appropriées. Heureusement, ce processus n’est pas compliqué.

Le CSS utilise des sélecteurs pour déterminer quels éléments subiront les différentes modifications spécifiques. Habituellement, cela se fait en spécifiant une « classe » d’un l’élément (ou élément du DOM). Cependant, le CSS peut également être utilisé pour définir la mise en page d’un élément entier (par exemple, la balise « <body> ») ou en utilisant l’identifiant de la balise.

Heureusement, les navigateurs populaires nous permettent de voir les différents sélecteurs et déclarations qui sont appliqués aux éléments de la page en quelques clics. Sur Google Chrome, par exemple, il vous suffit de mettre en évidence une partie spécifique du document, puis faites un clic droit, comme dans l’exemple qui suit.

blogpascher-inspection

En cliquant sur « Inspecter l’élément » dans le menu déroulant qui apparaît, vous verrez le code HTML de la page dans une nouvelle fenêtre avec l’élément inspecté mis en surbrillance dans la fenêtre de droite (ou au-dessous). Vous pouvez voir un exemple ci-dessous.

blogpascher-logo

Les textes de ces éléments (ou attributs) mis en surbrillance en rouge vous montrent les différents styles spécifiques applicables à l’élément que vous aviez mis en évidence en inspectant le code.

Par exemple, l’élément « font-size » vous dit que la police affichée dans l’élément mis en évidence est dimensionné à 13 pixels. Les descripteurs sont entourés par des accolades et précédés de sélecteurs. Le nom du fichier de feuille de style correspondant est affiché juste à droite des sélecteurs.

Une fois que vous avez en tête ces informations, la modification du style devient facile. Par exemple, si vous voulez changer la police de 13px à 14px, vous recherchez tout simplement votre fichier de feuille de style, le sélecteur qui correspond à celui de l’élément mis en surbrillance. Il se présente généralement sous cette forme : (« # plugin-infos .block-contenu« ). Vous pourrez ensuite modifier les différentes valeurs des attributs.

Vous pouvez faire la même chose sur Firefox, il suffit de mettre en évidence une partie spécifique de la page, faites un clic droit sur l’élément, puis sélectionnez « Inspecter l’élément » dans le menu qui apparaît.

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

Comment WordPress et le CSS fonctionnent ensemble

Il est un fait que les thèmes WordPress sont créés différemment. Alors, gardez à l’esprit que votre thème WordPress pourrait ne pas se conformer à 100% avec ce que vous lisez dans les sections suivantes.

Cela dit, il est plus que probable que le CSS utilisé sur votre blog WordPress soit situé dans un fichier appelé « style.css ». Ceci est le nom commun pour une feuille de style pour tout type de site, pas seulement sur WordPress.

Maintenant il est temps de parcourir les différents procédés d’édition.

Méthode n ° 1: Modification du fichier de style de votre thème WordPress

Il existe deux façons d’accéder au fichier style.css de votre thème.

La première consiste à le faire à partir de votre tableau de bord de WordPress. Sur le menu latéral gauche, sélectionnez le menu « Apparence », puis sur « Editeur ».

menu-editeur-tableau-de-bord

Une fois que vous êtes sur la page de l’éditeur, vous verrez une liste de fichiers sur une barre verticale sur le côté droit de la page. Faites défiler la liste de fichiers. Vous verrez un fichier qui se nomme « Feuille de style style.css » au bas de la page.

Si vous cliquez sur le nom de ce fichier, il sera chargé et affiché dans l’éditeur situé au milieu. Vous pouvez utiliser cet écran pour modifier le fichier.

menu-wordpress-editeur-de-code

L’autre façon de trouver la feuille de style est de naviguer à travers le système d’exploitation de votre fournisseur d’hébergement et de localiser le fichier dans le dossier du thème (à l’aide d’un client FTP). L’emplacement exact variera en fonction de votre fournisseur d’hébergement. Dans l’exemple illustré ci-dessous, le nom du site (dans notre cas thecare) est un dossier sous le dossier public_html.

Etant donné que WordPress est installé, vous pouvez voir le dossier wp-content dans « thecare ». Le sous-dossier wp-content est un autre dossier appelé « wp-themes« , qui est l’endroit où tous les thèmes WordPress sont installés.

Depuis ce site utilise un thème appelé « Newsletter », le fichier de style « style.css » est situé dans le dossier « Newsletter-parent ».

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

Newsletter-parent-folder-800x401

Méthode n ° 2: L’utilisation d’un plugin pour modifier CSS

Le moyen le plus commode d’éditer le CSS de votre blog WordPress est sans doute l’utilisation d’un plugin.

L’un des principaux avantages à utiliser un plugin est similaire à celui des thèmes enfants. Si vous mettez à jour le thème, vos modifications ne seront pas remplacées, car elles seront stockées séparément et non parmi les fichiers du thème. L’autre avantage, bien sûr, est que vous n’avez pas à créer un thème enfant.

Voici quelques plugins que vous pouvez utiliser pour modifier le code CSS de votre thème :

1. Simple Custom CSS

simple-custom-css

Télécharger

Simple Custom CSS est l’un des plugins les plus populaires. Il a été installé plus de 100 000 fois et a reçu une note de cinq étoiles.

2. WP Add Custom CSS

wp-add-custom

Télécharger

WP Add Custom CSS est un plugin qui vous permet de modifier la présentation d’un blog WordPress en entier ou juste les articles individuels. C’est une excellente option si vous êtes à la recherche de la flexibilité dans la personnalisation des articles.

Le plugin a été téléchargé plus de 10.000 fois et bénéficie actuellement d’une cote de 4,3 étoiles.

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [GRATUIT]

3. Theme Junkie Custom CSS

theme-junkie-css

Télécharger

Si vous êtes à la recherche d’une solution qui offre un aperçu en direct de vos modifications, vous pouvez envisager d’utiliser Theme Junkie Custom CSS. Cette solution ajoute un gestionnaire de CSS personnalisé à votre tableau de bord, où vous pouvez ajouter vos propres styles. Il offre également une alternative à l’utilisation d’un thème enfant.

C’est tout pour ce tutoriel sur la personnalisation du style de votre blog WordPress. N’hésitez pas à partager cet article avec vos amis sur vos réseaux sociaux préférés.

Cet article comporte 1 commentaire
  1. Merci beaucoup pour tous les différents articles de votre site !! C’est toujours très explicite et compréhensible pour une débutante comme moi… Je pense revenir trés souvent !!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
4 Partages
Partagez2
Tweetez
Enregistrer2