Vous souhaitez appliquer du CSS et modifier le style de votre site ? Si oui, ce poste est pour vous. Dans ce guide, nous allons vous montrer différentes façons d’ajouter du CSS à WordPress afin que vous puissiez personnaliser votre site Web et impressionner vos visiteurs.

Même si WordPress propose de nombreux thèmes et modèles que vous pouvez utiliser, si vous souhaitez modifier l’apparence de votre site, vous finirez par ajouter du code CSS tôt ou tard. Ajouter du CSS à un site Web est assez simple. Nous avons déjà vu comment appliquer CSS à l’aide de l’outil de développement de navigateur, mais il existe d’autres moyens. Toutes ces différentes méthodes ont des avantages et des inconvénients, il peut donc être difficile pour les débutants de comprendre quelle est la meilleure façon d’ajouter du CSS pour leur situation spécifique. C’est pourquoi, dans ce guide, nous vous montrerons différentes façons de ajouter un style CSS à un WordPress site Internet.

Comment ajouter du CSS à WordPress

Il existe plusieurs façons d’appliquer le style CSS à un site WordPress :

  1. Via le personnalisateur de thème
  2. Modification des fichiers de thème enfant
  3. Téléchargement de votre propre fichier CSS
  4. Appliquer CSS à l’en-tête avec des crochets
  5. Ajouter du CSS au backend

Examinons chaque méthode afin que vous puissiez choisir celle qui vous convient le mieux. REMARQUE: Nous n’allons pas expliquer en détail la structure du CSS dans cet article, nous vous recommandons donc d’avoir une compréhension de base du CSS pour pouvoir suivre ce guide sans aucun problème. Avant d’appliquer CSS, nous vous recommandons d’utiliser l’outil de développement de navigateur pour rechercher des éléments spécifiques que vous souhaitez modifier. Si vous ne savez pas comment procéder, consultez notre guide sur la façon d’appliquer CSS à l’aide de l’outil de développement de navigateur.

1) Appliquer CSS avec le personnalisateur de thème

Le moyen le plus simple et le plus rapide d’ajouter du code CSS personnalisé à WordPress consiste à l’insérer dans le CSS supplémentaire éditeur du personnalisateur de thème. Il s’agit de l’éditeur CSS WordPress intégré et il est présent sur tous les sites Web par défaut. Cependant, gardez à l’esprit que certains thèmes et plugins peuvent désactiver cette fonctionnalité. Pour appliquer votre CSS à l’aide du personnalisateur de thème, accédez à votre tableau de bord et dirigez-vous vers Apparence > Personnaliser >CSS supplémentaire pour ouvrir le Éditeur CSS. Là, vous verrez le code CSS de votre site et vous pourrez ajouter votre code. appliquer votre CSS personnalisé consiste à l'insérer dans l'éditeur CSS supplémentaire du personnalisateur de thème. L’un des plus grands avantages de cette méthode est que vous pouvez prévisualiser le résultat de la personnalisation CSS en temps réel sur le côté droit de l’écran. Une fois que vous avez ajouté votre code, il sera enregistré dans la base de données dans le *_des postes table, sous le CSS personnalisé Type de poste. Même si vous pouvez appliquer toutes sortes de personnalisations ici, ce n’est pas une pratique recommandée pour une longue liste de règles CSS en raison des performances.

2) Modification des fichiers de thème enfant

Une autre façon d’ajouter un style CSS à WordPress consiste à modifier les fichiers CSS du thème enfant. Cette méthode offre de meilleures performances que l’application de code directement à partir du Customizer, car elle se charge sans qu’il soit nécessaire de le récupérer dans la base de données. La plupart des thèmes enfants ont un style.css fichier, vous pouvez donc simplement y ajouter votre CSS personnalisé. Pour trouver le style.css fichier de votre thème enfant, dans votre tableau de bord WordPress rendez-vous sur Apparence > Éditeur de thème. Appuyez ensuite sur le menu déroulant en haut à droite, sélectionnez votre thème enfant, et cliquez sur le style.css fichier comme indiqué ci-dessous. Inclure le code CSS directement sur les fichiers du thème enfant Si votre thème enfant n’a pas de style.css fichier ou tout autre fichier avec un .css extension, vous pouvez la créer et l’appliquer comme décrit dans la section suivante. Alternativement, certains thèmes enfants ont un dossier CSS contenant plusieurs fichiers. Si tel est votre cas, assurez-vous de modifier le bon style.css fichier.

3) Téléchargez votre propre fichier CSS

Si vous souhaitez ajouter un code CSS personnalisé volumineux à WordPress, il est recommandé de l’avoir dans un fichier séparé et de le télécharger dans les fichiers de votre site Web sur le serveur. Voyons comment procéder étape par étape.

3.1) Créer le fichier CSS à l’aide d’un éditeur de code

Pour ce faire, vous devez utiliser un éditeur de code tel que Visual Studio Code, Sublime text ou tout autre prenant en charge les fichiers CSS. Créez un nouveau fichier avec l’extension CSS et collez-y votre code. Dans cet exemple, nous avons nommé le fichier mes-styles.css. Créer le fichier CSS à l'aide d'un éditeur de code Après avoir collé votre code, enregistrez le fichier et passez à l’étape suivante.

3.2) Téléchargez le fichier dans le dossier Thème enfant

Si votre thème enfant a un répertoire CSS, copiez et collez simplement votre fichier à cet endroit. Alternativement, vous pouvez également le télécharger directement dans le répertoire principal du thème enfant. Ne vous inquiétez pas de l’emplacement dans le dossier du thème enfant, nous ciblerons le chemin du fichier à l’étape suivante. Utilisez maintenant cPanel ou un client FTP comme FileZilla pour télécharger le fichier. Si vous êtes sur un serveur localhost, vous pouvez simplement copier et coller le fichier dans le dossier du thème enfant situé dans le dossier public de votre serveur localhost. Suivant notre exemple, nous allons coller notre mes-styles.css fichier dans le thème enfant. Téléchargez le fichier dans le dossier Thème enfant.

3.3) Mettez en file d’attente votre fichier .CSS personnalisé

Vous devez maintenant mettre en file d’attente votre fichier CSS personnalisé sur le fonctions.php fichier de votre thème enfant pour le faire fonctionner. Collez le script PHP suivant après tout code présent dans le fonctions.phpfichier. 

function my_styles() { wp_register_style( 'my-styles', get_stylesheet_directory_uri() . '/my-styles.css') wp_enqueue_style( 'my-styles') } add_action( 'wp_enqueue_scripts', 'my_styles' )

Assurez-vous que le fichier nouvellement créé est appelé correctement par le chemin en fonction de l’emplacement du fichier dans le répertoire du thème. Pensez également à changer le nom du fichier (mes-styles.css dans cet exemple). Vous pouvez utiliser l’extrait de code suivant pour vérifier si le chemin est correct ou non. 

add_action('wp_head',function(){ echo get_stylesheet_directory_uri() . '/my-styles.css' }) Mettez en file d'attente votre fichier CSS PERSONNALISÉ

C’est ça! C’est ainsi que vous pouvez appliquer CSS à WordPress en téléchargeant votre propre fichier CSS.

4) Appliquer CSS à la section d’en-tête à l’aide d’un crochet

Si vous avez des compétences en codage, vous pouvez également ajouter du CSS à votre site à l’aide de crochets. le wp_head()hook est très utile lors du développement de sites Web. Bien qu’il ne soit pas recommandé de l’utiliser pour inclure un script dans le Balise , elle permet de faire des tests rapides et de déboguer. Si vous travaillez avec plusieurs feuilles de style CSS ou sur des sites Web complexes et que quelque chose ne fonctionne pas comme prévu, vous pouvez ajouter votre code CSS directement dans le section à l’aide de ce crochet. 

add_Action('wp_head','my_head_css') function my_head_css(){ echo"" }

Par exemple, avec ce script, nous modifions la taille de l’en-tête, la couleur d’arrière-plan, la bordure et le rembourrage. De cette façon, vous pouvez vous assurer que le script CSS est appliqué à l’interface sur tout autre fichier CSS, ou inclus dans le site Web de toute autre manière.

5) Ajouter CSS au backend

Enfin, il existe une autre façon d’ajouter un style CSS à WordPress. Vous pouvez appliquer un CSS personnalisé au backend à l’aide de la admin_head() crochet comme suit : 

add_Action('admin_head', 'my_custom_fonts') function my_custom_fonts() { echo '' }

Dans cet exemple, nous changeons la couleur de fond (#602e93). Les méthodes 4 et 5 peuvent être très utiles et peuvent vous aider à gagner du temps en insérant un script CSS directement dans le Rubrique . Cependant, ce n’est pas une pratique recommandée et vous ne devriez pas utiliser cette méthode pour appliquer des styles de façon permanente.

Conclusion

Dans l’ensemble, avec un peu de CSS, vous pouvez personnaliser l’apparence de votre site. L’ajout de CSS est facile mais il existe plusieurs façons de le faire, il peut donc être difficile de savoir quelle méthode utiliser. Dans ce tutoriel, nous vous avons montré cinq méthodes différentes pour ajouter du CSS à votre site WordPress :

  1. Via le personnalisateur de thème
  2. Modification des fichiers de thème enfant
  3. Téléchargement de votre propre fichier CSS
  4. Appliquer CSS à l’en-tête avec des crochets
  5. Ajouter du CSS au backend

Chaque méthode a ses avantages et ses inconvénients. Par exemple, l’ajout de CSS à partir du thème Customizer est facile et est livré avec un aperçu en temps réel. Cependant, ce n’est pas une pratique recommandée pour une longue liste de règles CSS. Alternativement, vous pouvez modifier les fichiers de votre thème enfant ou télécharger votre propre fichier CSS sur votre thème enfant. Même si ce n’est pas une pratique recommandée, vous pouvez utiliser des crochets pour inclure un script dans le Balise pour faire des tests rapides et déboguer votre site.