\n Comment personnaliser un th\u00e8me WordPress avec CSS\n<\/p>\n
\n Tout d’abord, vous devez comprendre que si vous souhaitez personnaliser votre th\u00e8me WordPress avec CSS, vous devez soit y ajouter un certain code, soit modifier le code qui est d\u00e9j\u00e0 \u00e9crit. Je vous recommande d’apprendre au moins quelques bases de CSS, HTML, JavaScript et PHP avant de commencer \u00e0 modifier votre th\u00e8me.\n<\/p>\n
\n Une autre chose \u00e0 noter est que si vous apportez des modifications \u00e0 la feuille de style de votre th\u00e8me WordPress, ces modifications seront supprim\u00e9es une fois votre th\u00e8me mis \u00e0 jour. Vous devez donc en savoir plus sur les th\u00e8mes enfants et utiliser un th\u00e8me enfant pour apporter des modifications \u00e0 l’aide de style.css, functions.php ou d’autres fichiers de mod\u00e8le de th\u00e8me. J’ai parl\u00e9 des th\u00e8mes enfants plus loin dans cet article.\n<\/p>\n
\n Il existe deux fa\u00e7ons de modifier ou d’ajouter du CSS \u00e0 votre th\u00e8me
\n<\/h4>\n\n 1 Utilisation du tableau de bord
\n<\/h5>\n
\n<\/h5>\n
\n Cela vous permet de modifier votre th\u00e8me WordPress directement \u00e0 l’aide de la feuille de style CSS dans votre tableau de bord WordPress. Mais, vous devez noter que tout changement important apport\u00e9 ici pourrait \u00eatre difficile \u00e0 annuler. Je vous recommande donc de faire une sauvegarde du CSS d’origine de votre th\u00e8me WordPress, puis d’apporter des modifications. Je vous recommande \u00e9galement de cr\u00e9er un th\u00e8me enfant pour votre site. Si vous ne savez pas ce que c’est, lisez simplement la section suivante et revenez.\n<\/p>\n
\n Cr\u00e9ez un th\u00e8me enfant, puis, dans ce th\u00e8me enfant, acc\u00e9dez \u00e0 Apparence, puis \u00e0 \u00c9diteur de th\u00e8me. Une fen\u00eatre contextuelle appara\u00eetrait lorsque vous utilisez un th\u00e8me enfant, mais il n’y a rien \u00e0 craindre. Cliquez simplement sur \u00ab\u00a0J’ai compris\u00a0\u00bb et vous entrerez dans la feuille de style. Si vous souhaitez apporter des modifications aux fichiers de mod\u00e8le tels que header.php, functions.php, etc., vous devez d’abord apprendre PHP, puis essayer vos comp\u00e9tences en codage. Sinon, contentez-vous de modifier la feuille de style.\n<\/p>\n
\n Qu’est-ce qu’un th\u00e8me enfant dans WordPress ?\n<\/p>\n
\n Un th\u00e8me enfant est une r\u00e9plique d’un th\u00e8me original (\u00e9galement appel\u00e9 th\u00e8me parent). Le th\u00e8me enfant inclut les fonctionnalit\u00e9s et le style du th\u00e8me parent. Il est recommand\u00e9 d’utiliser un th\u00e8me enfant lorsque vous souhaitez conserver le code d’origine intact tout en apportant des modifications \u00e0 la conception de votre site. Ainsi, vous pouvez cr\u00e9er de nouveaux designs plus performants sur le th\u00e8me enfant et conserver les fonctionnalit\u00e9s du th\u00e8me parent. Voici quelques avantages de l’utilisation d’un th\u00e8me enfant :\n<\/p>\n
- \n
- Vous n’avez pas \u00e0 vous soucier de jouer avec le code d’origine car le th\u00e8me parent est s\u00fbr et non modifi\u00e9.\n <\/li>\n
- Vous pouvez utiliser le codage pour \u00e9tendre les fonctionnalit\u00e9s d’un th\u00e8me parent, l’exp\u00e9rimenter et cr\u00e9er quelque chose de nouveau.\n <\/li>\n
- Vous n’avez pas besoin de cr\u00e9er un th\u00e8me \u00e0 partir de z\u00e9ro. Si par hasard vous oubliez une certaine fonctionnalit\u00e9 ou fonctionnalit\u00e9, le code du th\u00e8me parent est l\u00e0 pour vous.\n <\/li>\n<\/ul>\n
\n Cependant, vous devez \u00eatre tr\u00e8s prudent lorsque vous utilisez des th\u00e8mes enfants. L’une des raisons est que cela n\u00e9cessiterait des comp\u00e9tences et de l’exp\u00e9rience en mati\u00e8re de codage. Si vous d\u00e9butez avec CSS, HTML, JavaScript et PHP, donnez-vous d’abord le temps de devenir un expert. Sinon, la courbe d’apprentissage pourrait \u00eatre assez \u00e9lev\u00e9e.\n<\/p>\n
\n Une autre chose \u00e0 prendre en compte lors de l’utilisation d’un th\u00e8me enfant est que vous devez d’abord v\u00e9rifier les mises \u00e0 jour. Si votre th\u00e8me parent est mis \u00e0 jour avec une fonctionnalit\u00e9 que vous ne souhaitez pas, vous ne devez pas mettre \u00e0 jour votre th\u00e8me WordPress car cela se refl\u00e9terait dans le th\u00e8me de votre enfant. Parfois, si l’une des fonctionnalit\u00e9s est supprim\u00e9e dans le th\u00e8me principal et que vous le mettez \u00e0 jour, votre th\u00e8me enfant peut \u00eatre affect\u00e9. Ainsi, augmentant votre travail de codage.\n<\/p>\n
\n 2 Utilisation du serveur FTP
\n<\/h5>\n\n Il se peut que vous ne puissiez pas acc\u00e9der directement au tableau de bord de votre th\u00e8me. Parfois, l’utilisation de plugins d\u00e9sactive cette fonctionnalit\u00e9. Vous devez donc utiliser FTP ou File Transfer Protocol pour acc\u00e9der \u00e0 distance aux fichiers de votre site. Commencez par t\u00e9l\u00e9charger n’importe quelle application client FTP. Contactez votre h\u00e9bergeur et demandez vos identifiants FTP.\n<\/p>\n
\n Au fur et \u00e0 mesure que vous entrerez les informations d’identification, vous serez autoris\u00e9 \u00e0 acc\u00e9der \u00e0 style.css. Apportez maintenant des modifications au fichier, enregistrez vos modifications et t\u00e9l\u00e9chargez-les sur le serveur. Cela pourrait \u00eatre une m\u00e9thode assez mouvement\u00e9e pour ajouter du CSS \u00e0 votre site, alors utilisez-le uniquement si vous n’avez pas acc\u00e8s \u00e0 votre tableau de bord.\n<\/p>\n
\n Des moyens simples d’ajouter du CSS \u00e0 votre site WordPress
\n<\/h4>\n\n Il existe deux m\u00e9thodes simples pour ajouter du CSS \u00e0 votre site WordPress. Ils incluent l’utilisation d’un personnalisateur WordPress ou d’un plugin. Il sera beaucoup plus facile d’ajouter votre code CSS en utilisant ces m\u00e9thodes. L’ajout de CSS \u00e0 l’aide d’un personnalisateur WordPress ou d’un plugin ne ferait pas non plus dispara\u00eetre votre code une fois le th\u00e8me mis \u00e0 jour. Cependant, je vous recommande toujours de conserver une sauvegarde du code original de votre site Web au cas o\u00f9 quelque chose se produirait par inadvertance. Voyons maintenant les deux fa\u00e7ons simples d’ajouter du CSS \u00e0 votre site WordPress.\n<\/p>\n
\n 1 \u00c9dition via WordPress Customizer
\n<\/h5>\n\n Connectez-vous simplement \u00e0 votre backend WordPress. Cliquez sur Apparence puis cliquez sur Personnaliser. Cela ouvrira un \u00e9cran de personnalisation. Cet \u00e9cran vous montre un aper\u00e7u de votre site Web \u00e0 ce moment et il y aura quelques options sur le c\u00f4t\u00e9 gauche de l’\u00e9cran pour personnaliser des \u00e9l\u00e9ments comme les couleurs, les menus ou d’autres widgets.\n<\/p>\n
\n Sur le c\u00f4t\u00e9 gauche de l’\u00e9cran, vous verrez une option appel\u00e9e CSS suppl\u00e9mentaire. C’est l\u00e0 que vous devez saupoudrer votre magie. Lorsque vous cliquerez sur le CSS suppl\u00e9mentaire, une nouvelle page s’ouvrira avec le code de votre site Web dessus. Maintenant, vous pouvez apporter des modifications au code et si vous l’avez \u00e9crit correctement (pas d’erreurs !), vous verrez les modifications se refl\u00e9ter dans l’aper\u00e7u.\n<\/p>\n
\n Le code CSS que vous \u00e9crivez ici ne changera pas ou ne dispara\u00eetra pas une fois votre th\u00e8me mis \u00e0 jour ! Mais, si vous passez \u00e0 un nouveau th\u00e8me, le code \u00e9crit ici sera effac\u00e9. Il est donc sugg\u00e9r\u00e9 de sauvegarder votre CSS avant de changer de th\u00e8me.\n<\/p>\n
\n 2 Utiliser un plug-in
\n<\/h5>\n\n Dans cette section, je discuterai de quatre plugins diff\u00e9rents que vous pouvez utiliser pour modifier le CSS de votre th\u00e8me WordPress – Advanced CSS Editor<\/strong>, Modular Custom CSS<\/strong>, SiteOrigin CSS<\/strong> et CSS Hero<\/strong>. Si vous ne le savez pas, les plugins WordPress sont de petits logiciels qui peuvent \u00eatre attach\u00e9s \u00e0 WordPress pour \u00e9tendre ses fonctionnalit\u00e9s. Certains plugins sont disponibles gratuitement tandis que pour certains, vous devez payer de l’argent pour les ajouter \u00e0 votre site WordPress. Les plugins peuvent vous aider \u00e0 modifier ou \u00e0 ajouter du CSS \u00e0 votre site WordPress en quelques clics seulement !\n<\/p>\n
\n Utilisation du plugin Advanced CSS Editor\n<\/p>\n
\n Le premier plugin que je recommanderais s’appelle Advanced CSS Editor. Ce plugin vous permet d’ajouter du CSS pour l’apparence de votre site Web sur un ordinateur de bureau, une tablette et un t\u00e9l\u00e9phone mobile. De cette fa\u00e7on, vous pouvez affiner votre site Web pour chaque appareil. Pour commencer l’\u00e9dition, installez le plugin. Acc\u00e9dez \u00e0 votre tableau de bord WordPress, cliquez sur Apparence, puis sur Personnalisateur. Vous verrez une nouvelle option appel\u00e9e Advanced CSS Editor. Ajoutez le CSS personnalis\u00e9 que vous souhaitez et enregistrez les modifications.\n<\/p>\n
\n Un \u00e9norme avantage de l’utilisation de ce plugin est que vous pouvez contr\u00f4ler l’apparence de votre site Web sur diff\u00e9rents appareils. De plus, vous pouvez toujours utiliser la technique que j’ai expliqu\u00e9e au point #1 pour modifier votre th\u00e8me WordPress. Cependant, pour certaines personnes qui ne sont pas habitu\u00e9es au codage, apporter des modifications \u00e0 chaque type d’appareil peut repr\u00e9senter beaucoup de travail. Ils devraient d’abord apprendre \u00e0 \u00e9crire du CSS pour chaque type d’appareil.\n<\/p>\n
\n Utilisation du plugin CSS personnalis\u00e9 modulaire\n<\/p>\n
\n Le deuxi\u00e8me plugin que je recommanderais est Modular Custom CSS. Ce plugin vous aide \u00e0 apporter des modifications au th\u00e8me de votre site WordPress. Par exemple, si vous utilisez actuellement un th\u00e8me et que vous apportez des modifications \u00e0 ce th\u00e8me \u00e0 l’aide de CSS modulaire personnalis\u00e9. Ensuite, vous d\u00e9cidez de choisir un autre th\u00e8me pour votre site. Ainsi, les modifications apport\u00e9es au premier th\u00e8me ne seraient pas supprim\u00e9es. Ils resteront intacts dans ce plugin. Vous pouvez \u00e9galement ajouter du CSS global \u00e0 l’aide de ce plugin. Ce CSS resterait le m\u00eame malgr\u00e9 les changements de th\u00e8me.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-323301-6383cdec124a5.webp\")
<\/a><\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-323301-6383cdefbb9ad.webp\")
<\/a><\/p>\n