Formation WordPress – Devenez un expert WordPress

Partager sur facebook
Partager sur twitter
Partager sur pinterest

Comment modifier le CSS de votre thème WordPress

CSS – qui signifie Cascading Style Sheet – n’est pas exclusif à WordPress, cependant, si vous recherchez des tutoriels de personnalisation WordPress, vous l’entendrez souvent mentionner. De plus, comme les récentes mises à jour de WordPress Customizer incluent maintenant une zone CSS dédiée, j’ai pensé que je pourrais au moins vous montrer quelques notions de base. Mais cette leçon n’est pas vraiment pour les débutants, et il n’est certainement pas nécessaire que WordPress fonctionne, vous pouvez donc passer à la leçon suivante (comment utiliser les widgets WordPress) à tout moment.

La leçon : Le document .css est le fichier qui dicte les couleurs, les polices (et plus encore) que votre thème utilise pour que les choses soient comme elles sont. Vous pouvez le trouver dans la section Apparence > Editeur de WordPress, mais comme mentionné dans une leçon précédente, il est préférable de ne pas y toucher et d’apporter des modifications à la zone CSS dans la section Apparence > Personnaliser le tableau de bord à la place. De plus, la section Personnaliser permet d’apporter de nombreux changements à l’apparence de votre thème sans avoir besoin de connaître le code, mais s’il y a quelque chose de spécifique que le Customiser ne permet pas, alors une certaine édition du CSS pourrait être nécessaire.

 

Comment faire du CSS de base
Il y a trop de choses à couvrir dans un seul billet – c’est un cours en soi ! – alors je vais vous montrer quelques trucs simples. Si vous voulez en savoir plus, je vous recommande le site Web de W3Schools pour une foule d’informations sur CSS, HTML et plus encore. Si vous voulez faire un cours CSS, celui de Treehouse est assez bon.

Commencez ici en allant dans Apparence > Personnaliser > CSS supplémentaire dans le tableau de bord WordPress.

Par exemple, je vais me concentrer sur le titre du billet du blog et comment vous pouvez le modifier en utilisant l’exemple ci-dessous.

Tout d’abord, vous devez utiliser Google Chrome. C’est gratuit, alors installez-le si vous ne l’avez pas déjà sur votre bureau ! Ensuite, vous trouvez ce que vous voulez éditer en cliquant avec le bouton droit de la souris dessus dans votre navigateur, et en sélectionnant Inspecter l’élément. Dans cet exemple, c’est le titre d’entrée (entrée). Vous souhaitez rechercher le texte en surbrillance et son nom de classe.

Dans cet exemple, le nom de la classe (entre guillemets) est le titre d’entrée. Maintenant, allez dans votre éditeur CSS et mettez ce qui suit sur la prochaine ligne disponible :

.entrée-titre {

}
Vous remarquerez qu’il y a un point devant, ainsi que des crochets gribouillés. Ils sont faits pour être là, alors ne les effacez pas ! Maintenant, nous devons décider ce que nous allons faire avec ce CSS ! Comme je l’ai dit, vous pourriez faire beaucoup, mais voici quelques options :

Changez sa taille en 16px en ajoutant la taille de la police : 16px ; ce qui lui donnerait cette apparence (ignorez le bit !important pour le moment) :

.entrée-titre {
font-size:16px!important ;
}

Vous pouvez tout mettre en majuscules en ajoutant text-transform:uppercase ; ce qui le rendrait comme ceci :

.entrée-titre {
text-transform:majuscules ;
}

Ou vous pouvez ajouter deux barres obliques avant comme ceci :

.entry-title:before {{ avant
contenu : “/// ‘ ;
}

 

Ou pour faire les trois, vous ajouteriez ci-dessous :

.entry-title:before {{ avant
contenu : ‘// ‘ ;
}

.entrée-titre {
text-transform : majuscule ;
font-size : 16px!important ;
}

La partie !important est nécessaire pour la taille de la police car la taille de la police a déjà été décidée dans la feuille de style de votre thème. Mais parce que le contenu apparaissant avant le titre, et la transformation du texte n’a pas été décidée (par défaut le texte est en casse titre, et il n’y a pas de contenu “avant”), il n’a pas besoin d’être inclus. Voici à quoi tout cela ressemble dans l’éditeur CSS :

Et voici à quoi ressemble l’avant de l’appareil une fois qu’il est sauvegardé :

 

webinaire agence webmarketing

Profitez maintenant du meilleur Webinaire composé des secrets et stratégies que personne ne vous dévoilera, rejoignez maintenant plus de 24.500 entreprises qui ont profité des secrets.

Partagez cet article avec vos amis

Partager sur facebook
Partager sur google
Partager sur twitter
Partager sur linkedin