Bien qu’\u00e9crire votre propre CSS \u00e0 partir de z\u00e9ro puisse \u00eatre un d\u00e9fi, l’ajout d’extraits pr\u00e9-\u00e9crits devrait \u00eatre simple.<\/p>\n
Dans ce didacticiel, vous apprendrez l’approche la plus simple et la meilleure pour ajouter du CSS personnalis\u00e9 \u00e0 votre site afin de pouvoir modifier les styles de votre th\u00e8me WordPress.<\/p>\n
Comment ajouter du CSS personnalis\u00e9<\/h2>\n
Dans le pass\u00e9, je recommandais le plugin CSS Simple Custom<\/a>, mais vous n’avez plus besoin d’un plugin pour ajouter du CSS \u00e0 votre site.<\/p>\n Au lieu de cela, vous pouvez utiliser la section CSS suppl\u00e9mentaire int\u00e9gr\u00e9e dans le personnalisateur. Pour acc\u00e9der \u00e0 cette fonctionnalit\u00e9, commencez par cliquer sur l’\u00e9l\u00e9ment de menu Personnaliser situ\u00e9 sous Apparence.<\/p>\n Ensuite, ouvrez la section CSS suppl\u00e9mentaire, qui doit \u00eatre situ\u00e9e pr\u00e8s du bas du panneau Customizer.<\/p>\n \u00c0 l’int\u00e9rieur, vous pouvez simplement coller le CSS que vous devez ajouter \u00e0 votre site.<\/p>\n Ce qui est g\u00e9nial avec la fonctionnalit\u00e9 CSS suppl\u00e9mentaire, c’est que vous obtenez un aper\u00e7u en direct de la fa\u00e7on dont cela affectera votre site. L’aper\u00e7u se met \u00e0 jour instantan\u00e9ment et les visiteurs ne verront pas vos modifications tant que vous n’aurez pas cliqu\u00e9 sur le bouton Publier en haut.<\/p>\n De nombreux utilisateurs de WordPress sont tent\u00e9s de modifier la feuille de style du th\u00e8me directement via le menu de l’\u00e9diteur de th\u00e8me.<\/p>\n Ne faites jamais \u00e7a.<\/strong><\/p>\n Le plus gros probl\u00e8me avec les modifications de cette mani\u00e8re est que tout votre travail sera perdu lorsque vous mettez \u00e0 jour le th\u00e8me. Par exemple, si vous utilisez Mission News<\/a> version 1.38 et que demain 1.39 sort, le processus de mise \u00e0 jour copie tous les nouveaux fichiers sur les anciens. Le th\u00e8me n’inclura certainement pas les m\u00eames personnalisations que vous avez apport\u00e9es, et elles seront donc d\u00e9finitivement perdues (\u00e0 moins que vous n’ayez une sauvegarde r\u00e9cente<\/a> ).<\/p>\n Cela peut \u00eatre \u00e9vit\u00e9 en utilisant la section CSS suppl\u00e9mentaire dans le Customizer, qui n’est pas affect\u00e9e par les mises \u00e0 jour du th\u00e8me.<\/p>\n Le seul d\u00e9fi de la fonctionnalit\u00e9 CSS suppl\u00e9mentaire est que parfois, faire en sorte que votre CSS prenne effet peut \u00eatre un peu plus difficile.<\/p>\n Sans entrer dans les mauvaises herbes, CSS utilise un syst\u00e8me de sp\u00e9cificit\u00e9<\/a> pour d\u00e9cider quelles r\u00e8gles de style se substituent les unes aux autres.<\/p>\n Une fa\u00e7on de garantir que vos styles remplacent les styles du th\u00e8me consiste \u00e0 utiliser une Prenez cet extrait CSS par exemple\u00a0:<\/p>\n Dans tous nos th\u00e8mes<\/a>, ce code rendrait le titre du site 28px. Si vous ne voyez aucun changement apr\u00e8s l’impl\u00e9mentation de ce code, essayez d’ajouter la Avec cette mise \u00e0 jour, le code est essentiellement garanti pour prendre effet tant qu’il cible le bon s\u00e9lecteur. Essayez simplement de le r\u00e9server pour des occasions sp\u00e9ciales, car l’utiliser des dizaines de fois dans votre code peut rendre plus difficile le remplacement des styles \u00e0 l’avenir.<\/p>\n Un probl\u00e8me courant auquel les utilisateurs sont confront\u00e9s lors de l’utilisation de cette fonctionnalit\u00e9 est que leur code fonctionnera lors de l’utilisation de Live Customizer, mais une fois qu’ils consultent le site normalement, les modifications ne s’affichent pas.<\/p>\n Cela est presque toujours d\u00fb \u00e0 la mise en cache, et je couvre la solution en d\u00e9tail ici\u00a0:<\/p>\n Comment r\u00e9parer les modifications WordPress qui ne s’affichent pas<\/a><\/p>\n Cela ne devrait prendre qu’une minute ou deux pour r\u00e9gler les choses.<\/p>\n M\u00eame si vous ne savez pas comment \u00e9crire votre propre CSS, la fonctionnalit\u00e9 CSS suppl\u00e9mentaire facilite le collage de code dans votre site.<\/p>\n Si vous souhaitez en savoir plus sur la personnalisation des th\u00e8mes WordPress avec CSS, je recommanderais ensuite mon guide sur la recherche de s\u00e9lecteurs CSS<\/a>.<\/p>\n Et si vous avez aim\u00e9 apprendre quelque chose de nouveau sur WordPress aujourd’hui, vous aimerez peut-\u00eatre mon cours gratuit par e-mail\u00a0:<\/p>\n![\"Comment](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-185827-61701e4c6d6cd.png\")
<\/a><\/p>\n![\"Comment](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-185827-61701e4f0f93d.png\")
<\/a><\/p>\n![\"Comment](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-185827-61701e510ba49.png\")
<\/a><\/p>\nPourquoi vous ne devriez jamais \u00e9diter style.css<\/h2>\n
![\"Comment](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-185827-61701e5335117.png\")
<\/a><\/p>\nConseils pour faire fonctionner votre CSS personnalis\u00e9<\/h3>\n
!important<\/code>balise.<\/p>\n.site-title {\n font-size: 28px;\n}<\/code><\/pre>\n!important<\/code>balise, comme ceci\u00a0:<\/p>\n.site-title {\n font-size: 28px !important;\n}<\/code><\/pre>\nEt s’il ne s’affiche que dans l’aper\u00e7u en direct\u00a0?<\/h2>\n
Personnalisez facilement avec CSS<\/h2>\n