Comment personnaliser le CSS de votre site WordPress

Safinet1/ octobre 31, 2017/ Astuces web/ 0 comments

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

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

Ce tutoriel se penchera sur la diversité des méthodes qui vous sont offertes pour personnaliser votre site 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.

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.

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).

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. 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.

Comment faire pour personnaliser votre site WordPress avec le CSS

Maintenant que vous comprenez mieux ce que c’est que 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.

Option n ° 1: Personnaliser 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 aura une incidence sur le thème «parent», laissant les changements sur votre thème enfant intactes. De nombreux développeurs de thèmes comprennent l’utilité d’un thème enfant.

La création d’un thème enfant est assez simple. Il consiste à créer un dossier sur votre hébergeur 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.

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

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 l’édition.

L’autre façon d’accéder à votre fichier style.css (celle que nous recommandons) consiste à parcourir les fichiers de votre fournisseur d’hébergement 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 pouvez 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 ont été en mesure de puiser dans le Customizer de WordPress pour créer des options pour leurs thèmes. 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 au moment où vous aurez enregistré les paramètres. De nombreux thèmes 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 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 pour vérifier que cette option est disponible.

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

Cependant, certains thèmes 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. Cela a ses compromis, car les styles ne peuvent pas bien s’afficher sur tous les thèmes.

Voici quelques plugins :

1. Custom CSS in Jetpack (Free)

Le plugin  Jetpack  est installé sur plus d’un million de sites WordPress, et probablement le vôtre également. Il apporte des fonctionnalités disponibles sur WordPress.com pour les sites auto-hébergés, et propose également un module pour la personnalisation CSS. Une fois que le module est activé dans le tableau de bord Jetpack, un éditeur CSS personnalisé sera disponible, vous permettant de personnaliser votre thème 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.

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.

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

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

Conçu pour fonctionner au mieux avec des dizaines de thèmes compatibles , CSS Hero vous donne un contrôle total sur tous les éléments de votre thème. Pour les thèmes qui ne sont pas sur leur liste, vous pouvez utiliser le mode Rocket pour activer la personnalisation 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 transistions. Vous pouvez également prévisualiser vos modifications en direct, et revenir à une version précédente.

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, en particulier si vous utilisez un de leurs thèmes.

Conclusion

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

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

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

C’est tout pour ce tutoriel. N’hésitez pas à le partager avec vos amis sur vos réseaux sociaux préférés.

Par vec Blogpascher

 

Leave a Comment

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>
*
*