Besoin d’ajouter du CSS personnalisé à WordPress ? Au fur et à mesure que vous vous familiariserez avec WordPress, vous voudrez certainement ajouter au moins un peu de CSS personnalisé à votre site. Je sais que oui – chaque Site WordPress que je lance a au moins quelques ajustements pour obtenir des choses juste à droite.

Mais ajouter du CSS personnalisé à WordPress peut être un peu délicat car c’est ne pas une bonne idée de simplement modifier la feuille de style de votre thème parent et d’y coller votre code.

Pour vous aider à ajouter du CSS personnalisé à WordPress dans le La bonne façon, je vais partager quatre méthodes différentes que vous pouvez utiliser, chacune avec quelque chose qui la rend unique. Je couvrirai tout, du personnalisateur WordPress à la mise en file d’attente de votre propre feuille de style personnalisée afin que vous puissiez trouver la méthode qui vous convient.

pssst : Vous aimeriez changer le CSS facilement, en direct, tout en le regardant ? Essayez CSS Hero

Allons-y.

Méthode 1 : Utilisez le personnalisateur WordPress

je vais commencer par le personnalisateur WordPress parce que c’est la méthode la plus accessible, mais ce n’est pas nécessaire ma méthode préférée (c’est la méthode 2).

Avantages de l’utilisation du personnalisateur WordPress pour CSS :

  • Vous n’avez pas besoin de faire de configuration ou d’installer un plugin. Cela fait partie du noyau de WordPress.
  • Vous pouvez voir vos modifications CSS personnalisées sur un aperçu en temps réel de votre site.
  • Il comprend une validation de base pour vous assurer de ne rien gâcher.

Inconvénients de l’utilisation du personnalisateur WordPress pour CSS :

  • Tout CSS personnalisé que vous ajoutez est lié à votre thème. Donc, si vous changez de thème, vous devrez copier votre CSS personnalisé.

Comment utiliser le personnalisateur WordPress pour CSS :

Lancez l’interface WordPress Customizer en allant sur Apparence → Personnaliser dans votre tableau de bord WordPress :

accéder au personnalisateur wordpress

Ensuite, cliquez sur l’option pour CSS supplémentaire dans la barre latérale du personnalisateur WordPress (ça doit être en bas):

ajouter du css personnalisé à wordpress à l'aide du personnalisateur

Maintenant, ajoutez simplement votre CSS personnalisé à la boîte. Si vous vous trompez de syntaxe, l’éditeur vous avertira de vos erreurs :

plugin css simple dans le personnalisateur

Lorsque vous avez terminé d’ajouter du CSS personnalisé, cliquez sur Publier pour faire vivre vos changements.

Méthode 2 : Utilisez le plugin CSS simple gratuit

CSS simples est un plugin gratuit de Tom Usborne, qui est également le créateur du populaire Thème GeneratePress (qui est aussi le thème que nous utilisons ici chez WPLift).

Le plugin peut faire presque tout de la méthode précédente plus beaucoup plus.

Avantages de l’utilisation du plugin CSS simple :

  • Vous pouvez toujours ajouter du CSS via le WordPress Customizer pour des aperçus en temps réel
  • Le plugin comprend un éditeur CSS complet séparé en dehors du personnalisateur WordPress
  • Vous pouvez ajouter du CSS personnalisé à des publications ou des pages individuelles
  • Tous les CSS que vous ajoutez sont indépendants du thème. Ainsi, même si vous changez de thème, votre CSS sera toujours là

Inconvénients de l’utilisation du plugin CSS simple :

  • Il n’y a pas de validation de code comme la méthode WordPress Customizer

Comment utiliser le plugin CSS simple :

Une fois que vous avez installé et activé le plugin, il existe plusieurs façons d’ajouter du CSS personnalisé à WordPress.

Tout d’abord, vous pouvez aller à Apparence → Personnaliser et utiliser le CSS simples option. Cela vous donnera un aperçu en direct de vos modifications CSS, tout comme la méthode précédente :

Deuxièmement, vous pouvez aller à Apparence → CSS simple pour utiliser l’éditeur complet. Le code de cet éditeur sera identique au code du CSS simples zone du personnalisateur WordPress :

interface css simple

Enfin, vous pouvez également ajouter du CSS personnalisé à un article ou à une page via la nouvelle méta-boîte CSS simple sous l’éditeur WordPress :

méta-boîte css simple

Dans l’ensemble, le plugin Simple CSS est ma méthode préférée pour ajouter des modifications CSS de base.

Méthode 3 : Utilisez la feuille de style de votre thème enfant

Si vous devez ajouter beaucoup de CSS personnalisé, plutôt que quelques ajustements ici et là, vous ferez probablement mieux d’utiliser la feuille de style de votre thème.

Mais – vous ne pouvez pas mettre votre CSS personnalisé dans la feuille de style de votre thème parent car il sera écrasé à chaque fois que vous mettrez à jour votre thème.

Au lieu de cela, vous devez utiliser quelque chose appelé un thème enfant. De cette façon, votre CSS personnalisé restera intact même lorsque vous mettrez à jour le thème parent.

Avantages de l’utilisation de la feuille de style du thème enfant :

  • Bon pour ajouter beaucoup de CSS personnalisés (comme 1 000 lignes et plus)

Inconvénients de l’utilisation de la feuille de style du thème enfant :

  • Pas d’aperçus en direct dans WordPress Customizer comme les deux méthodes précédentes
  • Pas aussi pratique que les deux autres méthodes en général
  • Votre CSS personnalisé est lié à votre thème, vous devrez donc le déplacer si jamais vous changez de thème

Comment utiliser le thème enfant pour un CSS personnalisé

Si l’endroit où vous avez obtenu votre thème n’incluait pas déjà un thème enfant avec lequel vous pouvez travailler, vous pouvez utiliser le plugin gratuit One-Click Child Theme à créer une.

Une fois que vous avez installé et activé le plugin, allez sur Apparence → Thème enfant et:

  • Entrez les détails pour le nom, la description et l’auteur
  • Cliquez sur Créer un enfant

créer un thème enfant

Une fois que le plugin crée votre thème enfant, il l’activera automatiquement. Vous pouvez ensuite cliquer pour accéder directement à la feuille de style de votre thème enfant :

Ou, vous pouvez toujours y accéder en allant sur Apparence → Éditeur:

Comme la méthode WordPress Customizer, WordPress effectuera une validation de code de base sur n’importe quel CSS…

Lire la suite : cliquez ici

Dans la même catégorie :