Comment ajouter un code CSS en toute sécurité sur WordPress ?

Le CSS (Cascading Style Sheets ou feuilles de style en cascade) est l’un des langages web les plus connus, avec le HTML. Pour les utilisateurs WordPress, le code CSS peut s’avérer bien pratique puisqu’il permet de changer le style d’éléments codés en HTML. Il vous offre donc une plus grande liberté par rapport à ce que WordPress vous permet de faire et de personnaliser votre site web.

12 septembre, 2021

Si le code CSS n’est pas ajouté correctement, cela peut occasionner des dysfonctionnements dans votre site web et, plus grave, des problèmes de sécurité. Découvrez comment ajouter du code CSS en toute sécurité pour personnaliser votre site WordPress.

Pourquoi ajouter du code CSS sur WordPress ?

Ajouter du code CSS sur WordPress permet de modifier le code WordPress afin de changer l’apparence de son site, que ce soit sur certaines pages seulement ou sur toutes les pages. Le CSS vous permet ainsi de modifier la mise en page, les couleurs, les polices, la disposition des éléments etc. Il vous permet également de rendre votre site web responsive.

Code CSS et sécurité

Il est très important d’ajouter du code CSS correctement pour éviter de créer des failles de sécurité. En effet, si le code CSS est bien ajouté (c’est-à-dire, notamment, ajouté au bon endroit de votre site) cela ne posera pas de problème lors de la mise à jour du thème WordPress. En revanche, si le code CSS a été mal ajouté, il risque de ne pas être effectif et de poser des problèmes lors des mises à jour et changements de thèmes.

demandez la réparation de votre site à un expert

Votre site web redirige vers des pages malveillantes, comme des sites de rencontre ou des publicités pour de faux produits ?

La page d’accueil a été modifiée ou a été remplacée par une autre page, comme une page à caractère islamique avec message de rançon ?

Un code erreur apparait à la place de votre page d’accueil ?

Les pages de votre site internet sont anormalement lentes ?

Votre site web mine des crypto monnaies à votre insu ?

Pour confirmer que votre site a bien été piraté et trouver une solution, faites appel à nos experts.

WordPress Piraté vous propose ses services de protection et de réparation de votre site web piraté. Faites-nous confiance et confiez-nous la protection de votre site pour éviter les attaques malveillantes !

Comment modifier le code CSS de son thème WordPress ?

Sur WordPress, chaque thème vient avec une feuille de style CSS (style.css) que l’utilisateur peut modifier. Il est aussi possible d’ajouter du code CSS sur les fichiers de modèles comme header.php, qui sont codés en PHP et HTML.

Avant toute modification, assurez-vous de sauvegarder le contenu de votre site WordPress. En cas d’erreur, vous pourrez ainsi toujours revenir à la version précédente. Cela vous évite ainsi de casser votre site, surtout si vous débutez.

Ensuite, pour accéder à la feuille de style CSS de son site WordPress, on peut :

Se connecter à l’administration de son site WordPress puis cliquer sur Apparence > Editeur de thème ;
Accéder à l’administration via un client FTP (par exemple FileZilla), cliquer sur le dossier wp-content puis sur le dossier du thème.

Vous trouverez ainsi la feuille de style CSS (style.css), que vous pourrez modifier à votre guise.

Comment ajouter du code CSS avec Divi Builder ?

Divi Builder est l’un des éditeurs visuels les plus utilisés par les administrateurs de sites WordPress, au même titre qu’Elementor ou Visual Composer. Modifier du code CSS est très simple avec cet éditeur visuel : il suffit de se rendre dans le menu de gauche, de dérouler les options du menu Divi et de cliquer sur « Theme Options ». Cliquez ensuite sur l’onglet « General » et faites défiler la page qui s’affiche jusqu’à la section « Custom CSS ». Cette section comporte un champ libre dans lequel vous pouvez taper votre code CSS personnalisé. Une fois cela fait, enregistrez les modifications.

Comment ajouter du code CSS sur un thème enfant ?

Si vous ne possédez pas d’éditeur visuel, la plupart du temps, il faudra ajouter le code CSS personnalisé au thème enfant de votre site WordPress. Le thème enfant permet de personnaliser son thème WordPress (le thème parent dont il dépend). En effet, si vous faisiez les modifications sur votre thème WordPress directement, ces modifications seraient écrasées à chaque mise à jour du thème. Effectuer les modifications sur un thème enfant permet donc de ne pas les perdre même avec une mise à jour du thème.

Pour ajouter un thème enfant, vous devez vous rendre dans le menu de votre thème, dans la section « Apparence > Thèmes ». Cliquez sur « Ajouter » pour ajouter un thème enfant.

Une fois que votre site web WordPress dispose d’un thème enfant, vous pouvez modifier ce thème dans le menu « Apparence > Editeur ». Sélectionnez le thème enfant à modifier et ajoutez votre CSS personnalisé dans la feuille style.css.

Comment ajouter du code CSS via un client FTP ?

Si vous avez l’habitude de travailler par l’intermédiaire de votre client FTP (par exemple Filezilla) plutôt que via l’éditeur de thèmes, sachez que vous pouvez aussi ajouter du code CSS de cette manière. Pour rappel, le client FTP permet d’accéder aux fichiers de son site web (pour les modifier par exemple) à distance.

Pour cela, commencez par vous connecter à votre client FTP. Si vous ne l’avez jamais fait, vous devriez télécharger le client FTP puis demander vos identifiants FTP à votre hébergeur. Une fois que vous aurez l’hôte, le port, le nom d’utilisateur et le mot de passe, vous pourrez vous connecter à votre client FTP. Il vous suffit ensuite de cliquer sur le dossier wp-content, puis d’ouvrir le dossier de votre thème. Faites ensuite défiler les fichiers : vous trouverez la feuille de style de votre thème style.css. Il ne reste plus qu’à l’ouvrir pour effectuer vos modifications, sans oublier de sauvegarder et de téléverser sur votre serveur pour que les modifications soient bien effectives sur votre site WordPress !

Comment ajouter correctement du code CSS sur WordPress ?

Ajouter du code CSS est simple si vous modifiez simplement un extrait de code déjà existant (par exemple dans la feuille de style de votre thème) ou si vous ajoutez seulement quelques lignes de code. Là où cela se complique, c’est lorsque vous ajoutez beaucoup de lignes de code CSS : vous pourrez alors avoir du mal à retrouver quel extrait de code correspond à quelle fonctionnalité de votre site web.

Il existe une façon d’organiser son code CSS personnaliser pour mieux s’y retrouver et éviter de casser son site avec un code CSS mal rédigé. Vous pouvez préciser, au-dessus de chaque morceau de code CSS, la fonctionnalité à laquelle il correspond, en entourant votre phrase de « /* » et « */ ». Les expressions ainsi mises en forme n’apparaitront pas sur le site, elles seront juste des indications pour vous aider à y retrouver. Par exemple, vous pouvez écrire :

/* Page d’accueil */
Entrez le code CSS personnalisé de la page d’accueil

/* Page contact */
Entrez le code CSS personnalisé de la page contact

Si vous rencontrez des difficultés pour ajouter du code CSS sur votre site WordPress, n’hésitez pas à faire appel à un développeur web. Il vaut mieux faire appel à un professionnel lorsque l’on n’est pas sûr de soi pour préserver la sécurité de son site WordPress !

CATEGORY
Tutoriel WordPress

L’ajout de code CSS sur WordPress offre une flexibilité et une personnalisation accrues, vous permettant de modifier l’apparence de votre site, des pages individuelles aux polices et couleurs. Cependant, l’intégration incorrecte de code CSS peut entraîner des failles de sécurité. Il est essentiel d’ajouter du code CSS correctement pour préserver l’intégrité de votre site lors des mises à jour du thème WordPress. Si vous rencontrez des redirections malveillantes ou des changements inattendus sur votre page d’accueil, il est possible que votre site ait été piraté. Dans ce cas, nos experts en cybersécurité peuvent vous aider à réparer et protéger votre site. Pour modifier le CSS de votre thème WordPress, vous pouvez accéder à la feuille de style via l’administration de WordPress ou en utilisant un client FTP. Pour les utilisateurs de Divi Builder, l’ajout de code CSS est simplifié via le menu Divi dans les options du thème. Il est également recommandé d’utiliser un thème enfant pour éviter de perdre vos modifications lors des mises à jour. Pour ceux qui préfèrent le client FTP, la connexion à votre hébergeur est nécessaire pour accéder aux fichiers de votre site et modifier la feuille de style. Enfin, pour organiser efficacement votre code CSS et faciliter sa gestion, utilisez des commentaires pour indiquer à quelle fonctionnalité chaque extrait de code correspond. Si vous avez des difficultés, envisagez de faire appel à un développeur web pour assurer la sécurité de votre site. Pour plus d’informations sur les problèmes liés à la sécurité et à l’ajout de code CSS, consultez également nos articles sur la blacklist Google Ads suite à un piratage et sur d’autres sujets de sécurité.