Une introduction rapide \u00e0 CSS<\/h2>\n
Si vous \u00eates d\u00e9j\u00e0 familier avec CSS, je ne veux pas vous d\u00e9ranger avec un long aper\u00e7u. Si vous n’avez jamais travaill\u00e9 avec CSS ou si vous n’\u00eates m\u00eame pas s\u00fbr de ce qu’est CSS, veuillez d’abord consulter notre article sur le sujet :<\/p>\n
Qu’est-ce que CSS et comment cela affecte-t-il WordPress ?<\/a><\/p>\n Cela couvrira les bases de la raison pour laquelle CSS est utilis\u00e9 pour styliser les sites et comment il est appliqu\u00e9.<\/p>\n Il y a une grosse erreur que font les utilisateurs de WordPress qui d\u00e9butent avec CSS :<\/p>\n Ils personnalisent les fichiers de th\u00e8me.<\/p>\n Par exemple, une personne utilisant le th\u00e8me Challenger peut placer ses modifications CSS directement dans le fichier style.css accessible depuis le menu Apparence > \u00c9diteur.<\/p>\n WordPress inclut d\u00e9sormais un avis vous avertissant de ne pas modifier ici<\/p>\n Le probl\u00e8me avec la modification du fichier style.css est que vous perdrez toutes vos modifications si vous mettez \u00e0 jour vers une nouvelle version de Challenger. Croyez-moi, perdre des modifications de code qui ont pris beaucoup de temps \u00e0 faire peut \u00eatre incroyablement d\u00e9courageant.<\/p>\n Il existe une meilleure fa\u00e7on d’ajouter du CSS \u00e0 votre site o\u00f9 il ne sera jamais \u00e9cras\u00e9. De plus, ce code est ajout\u00e9 \u00e0 votre site de mani\u00e8re \u00e0 faciliter le remplacement des styles du th\u00e8me.<\/p>\n Pour ajouter du CSS \u00e0 votre site, vous souhaitez ouvrir le Customizer (Apparence > Personnaliser) et cliquer sur la section CSS suppl\u00e9mentaire.<\/p>\n C’est g\u00e9n\u00e9ralement la derni\u00e8re section du Customizer<\/p>\n Si vous ouvrez cette section, vous verrez une zone de texte o\u00f9 vous pouvez ajouter votre code. WordPress inclura quelques conseils ici, mais vous pouvez cliquer sur le lien Fermer pour le supprimer et n’afficher que l’entr\u00e9e de code.<\/p>\n Vous pouvez entrer et enregistrer n’importe quel CSS que vous souhaitez ajouter ici.<\/p>\n Le code que vous ajoutez ici mettra imm\u00e9diatement \u00e0 jour l’apparence du site dans l’aper\u00e7u. Une fois que vous \u00eates satisfait de vos modifications, vous pouvez enregistrer vos modifications.<\/p>\n L’avantage suppl\u00e9mentaire de placer CSS ici est que vous pouvez regarder les mises \u00e0 jour en direct, vous pouvez donc tester rapidement diff\u00e9rents codes pour savoir ce que vous aimez.<\/p>\n Maintenant que vous avez vu comment ajouter du CSS en toute s\u00e9curit\u00e9 \u00e0 votre site, couvrons les bases de l’\u00e9criture CSS !<\/p>\n Conseil de pro\u00a0:<\/strong> ne vous inqui\u00e9tez pas de casser votre site. Si vous faites une mauvaise modification, vous pouvez simplement supprimer le CSS que vous avez ajout\u00e9. Il est impossible de casser enti\u00e8rement votre site ou de perdre l’acc\u00e8s au menu admin en ajoutant du CSS de cette mani\u00e8re.<\/p>\n Si vous avez d\u00e9j\u00e0 \u00e9crit du CSS, vous savez que la premi\u00e8re \u00e9tape consiste \u00e0 choisir un s\u00e9lecteur pour indiquer au navigateur quel \u00e9l\u00e9ment du site vous ciblez. Dans la capture d’\u00e9cran ci-dessus, je cible tous les \u00e9l\u00e9ments qui ont la classe "site-title".<\/p>\n Si vous ne savez pas comment utiliser les s\u00e9lecteurs CSS, consultez cette excellente introduction aux s\u00e9lecteurs CSS de SitePoint<\/a>.<\/p>\n Maintenant, voici la chose\u2026<\/p>\n M\u00eame de nombreux utilisateurs exp\u00e9riment\u00e9s de WordPress tentent de trouver des s\u00e9lecteurs tout faux. Ils v\u00e9rifient le fichier style.css pour trouver un s\u00e9lecteur d\u00e9j\u00e0 utilis\u00e9 par le th\u00e8me. C’est fastidieux et vous risquez m\u00eame de ne pas trouver de s\u00e9lecteur appropri\u00e9 pour faire votre personnalisation.<\/p>\n Permettez-moi de vous proposer un processus beaucoup plus productif.<\/p>\n Lors de l’\u00e9criture CSS, vous avez d’abord besoin d’un s\u00e9lecteur pour indiquer au navigateur quel \u00e9l\u00e9ment vous souhaitez modifier. Bien que vous puissiez v\u00e9rifier la feuille de style dans votre th\u00e8me, il est beaucoup plus facile d’utiliser simplement les outils de d\u00e9veloppement Web de votre navigateur pour les trouver.<\/p>\n Voici un exemple de ce que je veux dire :<\/p>\n Ceci est une capture d’\u00e9cran de Chrome avec ses outils de d\u00e9veloppement ouverts<\/p>\n Vous pouvez voir les classes et les ID de chaque \u00e9l\u00e9ment dans les outils de d\u00e9veloppement ouverts. Vous pouvez ensuite utiliser n’importe quelle combinaison de classes et d’ID disponibles pour \u00e9crire vos propres s\u00e9lecteurs personnalis\u00e9s.<\/p>\n J’entre dans les d\u00e9tails beaucoup plus profonds de ce processus dans ce tutoriel\u00a0:<\/p>\n Comment trouver des s\u00e9lecteurs CSS sur les sites WordPress<\/a><\/p>\n Vous apprendrez comment acc\u00e9der aux outils de d\u00e9veloppement de votre navigateur, comment naviguer dans le code HTML et comment trouver les s\u00e9lecteurs CSS dont vous avez besoin.<\/p>\n Maintenant que vous disposez d’un moyen beaucoup plus rapide d’obtenir le s\u00e9lecteur de votre choix et que vous savez comment ajouter du code dans la section CSS suppl\u00e9mentaire du personnalisateur, il ne vous reste plus qu’\u00e0 choisir les propri\u00e9t\u00e9s que vous souhaitez modifier.<\/p>\n Par exemple, si vous souhaitez cibler le titre du site dans Challenger<\/a> et agrandir la police, vous pouvez le faire avec la Si vous n’\u00eates pas tr\u00e8s familier avec CSS, vous trouverez cette liste de propri\u00e9t\u00e9s CSS<\/a> particuli\u00e8rement utile. Vous pouvez rechercher dans cette liste la qualit\u00e9 que vous souhaitez modifier (couleur d’arri\u00e8re-plan, taille de police, bordures, etc.).<\/p>\n D\u00e9butant ou ma\u00eetre CSS, j’ai quelque chose que je pense que vous aimerez\u2026<\/p>\n Si vous utilisez l’un de nos th\u00e8mes, vous adorerez les biblioth\u00e8ques d’extraits CSS pr\u00e9-\u00e9crites que nous avons cr\u00e9\u00e9es. Par exemple, la collection d’extraits CSS Tracks<\/a> contient des dizaines d’extraits que vous pouvez copier et coller dans la section CSS suppl\u00e9mentaire pour personnaliser votre site\u00a0:<\/p>\n Cela rend tr\u00e8s facile la personnalisation de votre site avec CSS, m\u00eame si vous n’avez jamais \u00e9crit CSS auparavant. Vous pouvez simplement copier et coller n’importe quel extrait de code que vous voulez, puis modifier la valeur comme vous le souhaitez.<\/p>\n Pour trouver les extraits CSS de votre th\u00e8me, visitez le Centre d’assistance<\/a> et s\u00e9lectionnez le th\u00e8me que vous utilisez. Cliquez ensuite sur le bouton Afficher les extraits CSS en bas de la barre lat\u00e9rale\u00a0:<\/p>\nComment ajouter du CSS \u00e0 votre site WordPress<\/h2>\n
![\"Comment](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30ef54275.png\")
<\/a><\/p>\nUne meilleure fa\u00e7on<\/h3>\n
![\"Comment](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30f1ef9b5.png\")
<\/a><\/p>\n![\"Comment](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30f51b5a7.png\")
<\/a><\/p>\n![\"Comment](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30f8085f9.png\")
<\/a><\/p>\nComment trouver des s\u00e9lecteurs CSS<\/h2>\n
Comment les pros de WP trouvent les s\u00e9lecteurs CSS<\/h3>\n
![\"Comment](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30fa8a74f.png\")
<\/a><\/p>\nPropri\u00e9t\u00e9s et valeurs CSS<\/h2>\n
font-size<\/code>propri\u00e9t\u00e9. Cette d\u00e9claration CSS pourrait ressembler \u00e0 ceci\u00a0:<\/p>\n.site-title {\n font-size: 32px;\n}<\/code><\/pre>\nCSS pr\u00e9-\u00e9crit GRATUIT pour nos utilisateurs<\/h2>\n
![\"Comment](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30fcb5c0b.png\")
<\/a><\/p>\n
![\"Comment](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30fec389d.png\")
<\/a><\/p>\n