skip to Main Content

Comment personnaliser le CSS de votre site web WordPress

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

Peu importe le thème WordPress que vous choisissez pour votre site web, il y aura d’autres sites internet qui utiliseront ce dernier. Et même malgré les nombreuses options de personnalisation offertes par de nombreux thèmes WordPress de nos jours, vous pouvez rendre votre site web encore plus unique.

Pour vraiment toucher l’aspect visuel de votre thème WordPress, vous devez aller au-delà de la personnalisation standard offerte par les options ou paramètres d’un thème WordPress. La personnalisation CSS de votre blog WordPress vous permettra de modifier l’apparence de votre site web pour rendre ce dernier vraiment unique.

Ce tutoriel se penchera sur la diversité des méthodes qui vous sont offertes pour personnaliser votre site web avec le CSS, la création et la personnalisation des thèmes enfants, en utilisant des plugins intégrés du Customizer de WordPress et des plugins WordPress de CSS.

Mais avant, si vous n’avez jamais installé WordPress découvrez Comment installer un blog WordPress en 7 étapes et Comment rechercher, installer et activer un thème WordPress sur votre blog 

Ensuite revenons vers ce pourquoi nous sommes là

CSS : Les principes de base et comment WordPress les utilise

Tout d’ abord: CSS signifie Cascading Style Sheets, qui n’est d’avantage pas plus claire que le sigle. Donc, nous allons le décomposer.

Une feuille de style est un document décrivant les styles (tels que la police, les couleurs, etc.) à utiliser pour la présentation d’un autre document. Dans notre cas, nous sommes en présence d’un style des pages Web.

La partie «cascading» du nom fait partie de ce qui le rend vraiment puissant. Les pages Web peuvent être conçues avec de multiples feuilles de style, comme une chute d’eau en cascade, avec la feuille inférieure en ajoutant ou en remplaçant les styles d’un niveau supérieur. Ceci est important, car de la façon dont vous ajouterez vos styles, ceux-ci écraseront les modifications originales.

Selecteur CSS

Aussi simplement que cela puisse paraître, le CSS peut être utilisé pour modifier à peu près tout l’aspect d’une page Web (y compris la mise en page, les couleurs, les polices, et même des animations).

Apprenez à gérer vos notifications en découvrant Comment gérer les notifications email sur WordPress

La plupart des thèmes WordPress utilisent un code CSS disponible dans un fichier appelé style.css. Si vous ouvrez ce fichier, vous verrez une liste complète des règles de style pour votre thème WordPress. Quoi que vous fassiez, ne modifiez pas ce fichier ! Les mises à jour écraseront vos modifications.

Il existe plusieurs façons d’ajouter un code CSS personnalisé à votre thème WordPress afin que vos changements survivent à une mise à jour du thème WordPress.

Comment faire pour personnaliser votre site web WordPress avec le CSS

Maintenant que vous comprenez mieux ce qu’est le CSS et comment les thèmes WordPress les utilisent, nous allons jeter un coup d’œil aux options que vous pouvez utiliser pour personnaliser votre blog WordPress, et nous allons discuter sur les avantages et les inconvénients de chaque méthode.

A l’issue de notre travail, vous serrez en mesure de déterminer quelle méthode correspond à votre thème WordPress.

Option n ° 1 : Personnaliser le CSS en utilisant un thème enfant

Si vous utilisez un thème enfant afin de personnaliser votre code CSS, les mises à jour des thèmes dont nous avons parlé avant ne sera plus un problème. Une mise à jour d’un thème WordPress aura une incidence sur le thème «parent», laissant les changements sur votre thème enfant intactes. De nombreux développeurs de thèmes WordPress comprennent l’utilité d’un thème enfant.

Découvrez Quand et comment installer WordPress dans un sous-répertoire

La création d’un thème enfant est assez simple. Il consiste à créer un dossier sur votre hébergement web qui comprend un fichier style.css qui répertorie le thème parent comme modèle, et importe fichier style.css du thème parent (vous souvenez-vous de la signification de «cascading» des feuilles de style ?).

Le codex de WordPress dispose de plus d’informations sur la création des thèmes enfants.

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

Une fois que vous avez créé votre thème enfant et que vous l’avez correctement activé, vous pouvez commencer à personnaliser votre thème WordPress. La façon la plus rapide sera de modifier votre fichier style.css, qui peut être consulté de deux façons.

Consultez cet article pour découvrir Comment compresser vos fichiers CSS, HTML et Javascript

La première consiste à utiliser l’éditeur inclus dans le tableau de bord de WordPress, en cliquant sur Apparence> Editeur. L’ éditeur affiche une liste de fichiers sur la droite disponible dans le thème (Seuls les fichiers populaires sont affichés). Votre fichier style.css sera tout en bas de la liste, et en cliquant sur l’option Feuille de style votre fichier style.css se chargera.

Vous pouvez ajouter vos modifications sur cet emplacement et sauvegarder la modification.

Feuille de style WordPress

L’autre façon d’accéder à votre fichier style.css (celle que nous recommandons) consiste à parcourir les fichiers dans votre hébergement web via un client FTP ou un gestionnaire de fichiers. Le dossier du thème enfant que vous avez créé sera dans le dossier « wp-content>themes« . Vous pourrez utiliser un éditeur de texte pour modifier le fichier style.css.

Option n ° 2: Personnaliser le CSS  depuis le Customizer

Depuis WordPress 3.4, les développeurs de thèmes WordPress ont été en mesure de puiser dans le Customizer de WordPress pour créer des options pour ces derniers. Le Customizer permet d’ajuster les paramètres d’un thème et de les prévisualiser sans que cela n’affecte l’apparence du site web au moment où vous aurez enregistré les paramètres.

De nombreux thèmes WordPress utilisent le Customizer pour simplifier la gestion des paramètres.

Ce qui nous intéresse aujourd’hui c’est la possibilité d’ajouter un code CSS personnalisé, et heureusement, de nombreux thèmes WordPress permettent de faire cela avec une option disponible dans le customizer ou dans le tableau de bord de WordPress.

Vous pouvez consulter la documentation de votre thème WordPress pour vérifier que cette option est disponible.

Le thème WordPress Total propose par exemple une zone d’édition de code CSS depuis le tableau de bord.

CodeCSS Total WordPress

Cependant, certains thèmes WordPress proposeront cette option directement depuis l’interface du Customizer.

Option n ° 3 : Personnaliser le CSS en utilisant un plugin

L’avantage d’utiliser un plugin pour la personnalisation CSS est que vous gardez le plugin même si vous faites un changement de thème WordPress. Cela a ses compromis, car les styles ne peuvent pas bien s’afficher sur tous les thèmes WordPress.

Voici quelques plugins :

1. Custom CSS in Jetpack (Free)

Le plugin WordPress Jetpack  est installé sur plus d’un million de sites web WordPress, et probablement le vôtre également. Il apporte des fonctionnalités disponibles sur WordPress.com pour les sites web auto-hébergés, et propose également un module pour la personnalisation CSS. jetpack-forms-plugin

Une fois que le module est activé dans le tableau de bord Jetpack, un éditeur CSS personnalisé sera disponible, permettant de personnaliser votre thème WordPress sans créer un thème enfant. Vous accédez à l’éditeur en suivant ce chemin « Apparence > Modifier le CSS« .

2. Simple Custom CSS (Free)

Si au contraire vous voulez une option autonome, Simple Custom CSS est un bon choix. Ce plugin gratuit, utilisé sur plus de 200.000 sites Web avec une cote de 4,9 étoiles, va certainement vous aider à personnaliser votre blog WordPress CSS.simple-custom-css

Ce plugin ne nécessite aucune configuration, il suffit juste d’installer et d’activer le plugin. Pour modifier votre code CSS, accédez à « Apparence> Custom CSS«  dans le tableau de bord WordPress. Appliquez vos modifications CSS dans la zone de texte et une fois que c’est fait, sauvegardez vos réglages.

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

3. CSS Hero (à partir de $14 par an)

La dernière option du plugin WordPress que nous examinons aujourd’hui est un plugin WordPress premium appelé CSS Hero. À partir de 14 $ par année pour un seul site web, ce plugin vous permet de personnaliser votre thème WordPress en utilisant une interface intuitive.CSS Hero Plugin WordPress

Conçu pour fonctionner au mieux avec des dizaines de thèmes WordPress compatibles , CSS Hero vous donne un contrôle total sur tous les éléments de votre thème WordPress. Pour les thèmes qui ne sont pas sur leur liste, vous pouvez utiliser le mode Rocket pour activer la personnalisation de CSS Hero.

CSS Hero supprime la nécessité de comprendre la syntaxe de CSS en simplifiant l’interaction avec le code via une interface, et ceci vaut pour les animations et les transitions. Vous pouvez également prévisualiser vos modifications en temps réel, et revenir à une version précédente.

Découvrir Comment déplacer les commentaires d’un article vers un autre sur WordPress

Si vous voulez modifier complètement le CSS de votre blog WordPress, mais ne souhaitez pas apprendre le CSS, CSS Hero est une excellente option complète pour la personnalisation de votre site web, en particulier si vous utilisez un de leurs thèmes WordPress.

Alors que vous savez que le contenu est important, vous souhaiterez cependant que votre site web se démarque des autres, même si vous utilisez un thème WordPress populaire. Avec le CSS, vous pouvez personnaliser le design de votre site web afin qu’il soit complètement unique.

Allez plus loin en découvrant Comment autoriser des utilisateurs à modifier certaines pages

Il y a donc plusieurs façons de personnaliser le CSS de votre thème WordPress :

  1. un thème enfant.
  2. le Customizer.
  3. un plugin CSS.

Découvrez aussi quelques plugins WordPress premium  

Vous pouvez utiliser d’autres plugins WordPress pour donner une apparence moderne et pour optimiser la prise en main de votre blog ou site web.

Nous vous proposons donc ici quelques plugins WordPress premium qui vous aideront à le faire.

1. Adning Advertising

WP PRO Advertising System est un plugin WordPress de gestion de publicité, qui propose 18 emplacements stratégiques pour vous aider à afficher des publicités sur votre site Web. Il possède également une section de statistiques détaillées à partir de laquelle vous pourrez voir le rendement de chaque annonce.

Cette fonctionnalité est cruciale car elle vous aidera à améliorer votre campagne et à maximiser vos profits. Ce plugin WordPress Adsense est également livré avec une fonctionnalité unique appelée annonces en arrière-plan. Elle vous permet d’afficher des annonces en tant qu’arrière-plan de votre contenu.

De plus, comme il est compatible avec les plugins tels que WPBakery et Slider Revolution, vous pourrez afficher vos annonces sous forme de sliders ou les placer n’importe où  sur votre site internet.

Télécharger | Démo | Hébergement Web

2. WP Media File Manager

WP Media File Manager est un plugin WordPress qui permet d’organiser facilement la bibliothèque multimédia dans une forme de hiérarchie, à l’aide de la fonctionnalité Drag and Drop. C’est l’un des plugins WordPress les plus puissants du gestionnaire de fichiers sur CodeCanyon. Vous n’aurez même pas besoin de créer des dossiers manuellement.

Ce plugin WordPress  permet de mettre en ligne des milliers de fichiers du gestionnaire de fichiers de votre PC sur le site Web en copiant  automatiquement la hiérarchie du dossier source. Si vous vous souhaitez avoir le même fichier dans différents dossiers, sachez que vous disposez désormais d’une véritable bibliothèque multimédias qui fournit cette fonctionnalité.

Adieu les problèmes de téléchargement des types de fichiers spécifiques, désormais vous n’aurez qu’à installer ce plugin WordPress et de laisser ce dernier vous accompagner dans la gestion de vos fichiers .

Télécharger | Démo | Hébergement Web

3. Hero Menu

Hero Menu est un plugin WordPress de mega menu. Et bien qu’il ne fasse pas grand chose d’héroïque, il propose toutes les fonctionnalités nécessaires pour juste 19$. Un peu comme Mega Main Menu, c’est un plugin qui fait également partir des produits mis en avant sur CodeCanyon et il a à son actif près de 4500 ventes en ce moment.

Dans la section des fonctionnalités, vous vous rendrez rapidement compte qu’il est assez facile de créer un megamenu. Le processus ne prend que quelques étapes. Mais en plus, vous remarquerez que le plugin est compatible avec WooCommerce, propose un design responsive et une interface « drag and drop » pour créer les menus.

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [GRATUIT]

Le constructeur de menu  améliore l’utilisation du plugin, et simplifie considérablement le travail de l’acheteur. L’intégration de l’interface utilisateur est également un excellent travail et cette dernière se comporte parfaitement avec d’autres plugins.

Télécharger | Démo | Hébergement Web

Ressources recommandées

Découvrez d’autres ressources recommandées qui vous accompagneront dans la création et la gestion de votre site web.

Conclusion

Voilà ! C’est tout pour ce tutoriel. Nous espérons que ce tutoriel vous a montré comment personnaliser le CSS de votre site web WordPress. N’hésitez pas à le partager avec vos amis sur vos réseaux sociaux préférés

Cependant, vous pourrez aussi consulter nos ressources, si vous avez besoin de plus d’éléments pour mener à bien vos projets de création de sites internet, en consultant notre guide sur la création de blog WordPress.

Si vous avez des suggestions ou des remarques, laissez-les dans notre section commentaires.

… 

Cet article comporte 0 commentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top