Comment ajouter un CSS personnalisé à votre site Web WordPress 1

Comment ajouter un CSS personnalisé à votre site Web WordPress

Il existe certainement de nombreuses façons intéressantes de créer une apparence spécifique pour votre site Web, si c’est ce que vous voulez. Parfois, avoir un ensemble limité de choix parmi lesquels choisir est beaucoup plus facile et, probablement, plus productif. Si vous utilisez WordPress, le système de gestion de contenu qui contrôle les deux tiers du marché des CMS, vous pouvez décider dans quelle mesure vous souhaitez être impliqué dans l’élaboration de l’apparence de votre site Web.

Le premier niveau de personnalisation est généralement le thème. Pour certains, cela peut également être le dernier niveau, car un bon thème peut facilement créer une apparence appropriée au rôle du site Web. Donc, si vous êtes dans le secteur de la restauration, par exemple, vous pouvez choisir un thème de nourriture et de restaurant pour votre site Web et en finir avec cela. Ou, si vous avez une startup informatique, vous pouvez vous contenter d’un excellent thème WordPress technologique.

Chaque thème est livré avec des options de personnalisation. Vous pourrez peut-être choisir les mises en page, par exemple, ou l’apparence de certains éléments sur la page. Mais si vous cherchez à apporter des modifications au-delà de celles fournies avec le thème, l’utilisation de CSS personnalisé serait une bonne voie à suivre. Voici les trois façons dont vous pouvez le faire.

Comment ajouter un CSS personnalisé à l’aide du personnalisateur

Le moyen le plus pratique d’ajouter du CSS personnalisé à votre site Web est d’utiliser le Customizer. Recherchez l’option « Apparence » dans le menu du tableau de bord. Passez la souris dessus et vous verrez le bouton « Personnaliser ». Cliquez dessus pour accéder au personnalisateur.

Apparence Personnaliser

Une fois à l’intérieur, vous aurez accès à différentes options de personnalisation, selon le thème et les plugins que vous avez installés. Juste en bas se trouvera l’option « CSS supplémentaire ».

CSS supplémentaire

Cliquez dessus et vous entrerez dans la zone où vous pourrez ajouter tous les CSS personnalisés que vous souhaitez. Vous pourrez voir les effets de chaque modification que vous apportez en temps réel, mais ils ne seront pas mis en ligne tant que vous n’aurez pas appuyé sur le bouton « publier ».

Paramètres CSS supplémentaires

La nature WYSIWYG du Customizer est peut-être son avantage le plus important, mais ce n’est pas le seul. Il est livré avec WordPress en tant que fonctionnalité principale, vous pouvez donc l’utiliser dès la sortie de la boîte, sans aucun bricolage supplémentaire avec les plugins. Vous obtiendrez également une vérification assez basique pour vous assurer que votre syntaxe est correcte.

Le problème avec l’ajout de CSS personnalisé de cette façon est que tout est lié à votre thème. Si vous souhaitez passer à un autre, le CSS personnalisé ne suivra pas. Du moins pas tout seul, c’est-à-dire que vous pouvez toujours le copier dans votre nouveau thème.

Ajouter un CSS personnalisé en modifiant la feuille de style du thème (enfant)

Le champ CSS supplémentaire dans le Customizer n’est pas le seul endroit où vous pouvez ajouter du CSS personnalisé à votre site Web WordPress. Si vous souhaitez apporter de nombreuses modifications en utilisant des centaines de lignes de code, la feuille de style de votre thème peut être un bon endroit pour le faire.

Sélectionnez le thème à modifier

L’édition de la feuille de style est une opération avancée, et pas seulement parce qu’elle implique que vous compreniez suffisamment CSS pour pouvoir ajouter des centaines de lignes de code lors de la personnalisation du site. Le principal problème avec l’édition de la feuille de style est que chaque fois que vous mettez à jour votre thème, les modifications que vous avez apportées seront supprimées.

La façon de contourner ce problème consiste à créer un thème enfant. La meilleure façon de comprendre ce qu’est un thème enfant WordPress serait de le considérer comme une couche que vous créez sur le thème ordinaire – parent -. Les modifications que vous apportez à ce calque resteront les mêmes même lorsque vous mettez à jour le thème parent.

Donc, si vous souhaitez ajouter du CSS personnalisé à votre site Web, vous devez créer un thème enfant première. Ensuite, accédez à l’éditeur de thème, recherchez le fichier stylesheet.css et libérez votre code CSS personnalisé.

Comment ajouter un CSS personnalisé à l’aide d’un plugin CSS personnalisé

Si vous souhaitez ajouter un CSS personnalisé qui survivra à un changement complet du thème, par exemple, ni le Customizer ni l’édition de la feuille de style ne le couperont. Mais vous pouvez toujours apporter des modifications que vous pouvez transférer sur un thème différent à l’aide d’un plugin CSS personnalisé tel que le Plugin CSS personnalisé simple.

CSS personnalisé simple

Après avoir téléchargé et installé le plugin Simple Custom CSS, vous aurez deux façons d’y accéder. Pour accéder à l’écran d’administration du plugin, vous pouvez accéder à l’option d’apparence du menu principal, puis choisir CSS personnalisé dans le sous-menu. Vous pouvez ajouter le CSS personnalisé dans la fenêtre et cliquer sur le bouton « Mettre à jour le CSS personnalisé » pour enregistrer les modifications.

Bouton de mise à jour CSS personnalisé

Il est également possible d’utiliser Simple Custom CSS depuis le Customizer. Après avoir navigué jusqu’à Personnaliser – Apparence > Personnaliser – cliquez sur l’onglet « Simple Custom CSS » et vous accéderez à la section de personnalisation du plugin. Là, vous verrez l’aperçu de toutes les modifications que vous apportez avant de les enregistrer.

Finissons-en !

L’une des meilleures choses à propos de WordPress est la liberté qu’il vous offre en matière de personnalisation de votre site Web. Mais si vous n’êtes pas en mesure de trouver toutes les options de personnalisation dont vous avez besoin parmi les nombreux thèmes que vous pouvez télécharger et installer, vous n’avez pas à vous inquiéter. Vous pouvez apporter les modifications dont vous avez besoin en ajoutant du CSS personnalisé. Avec trois méthodes différentes que vous pouvez utiliser pour le faire, vous trouverez forcément celle qui vous convient le mieux.

Soutenez notre effort ❤️

Si vous avez apprécié cet article, pensez à laisser un pourboire pour nous aider à continuer à publier du contenu de qualité.

Paiement sécurisé sur PayPal
Moyens I/O Staff est une équipe de rédacteurs spécialisés, passionnés par la technologie, l’innovation et les usages numériques. Forts d’une expertise pointue en IA, applications mobiles, gaming et tendances digitales, nous produisons un contenu rigoureux, vérifié et utile. Notre mission : vous offrir une information fiable et claire pour mieux naviguer dans le monde numérique en constante évolution. Découvrez les avis de nos lecteurs sur Trustpilot.