Comment faire du Custom Css avec WordPress ?

Bienvenue dans cet article dédié au custom CSS avec WordPress. Si vous êtes un utilisateur régulier de WordPress, vous avez probablement remarqué que la personnalisation de votre site peut parfois être limitée en utilisant uniquement les options disponibles dans votre thème. C’est là que le custom CSS entre en jeu. Dans cet article, nous allons vous montrer comment faire du custom CSS avec WordPress.

Qu’est-ce que le custom CSS ?

Le custom CSS est un moyen de personnaliser votre site Web en ajoutant du code CSS personnalisé. CSS signifie « Cascading Style Sheets », et il est utilisé pour définir la présentation d’une page Web, y compris la disposition, les couleurs et les polices de caractères.

Avec le custom CSS, vous pouvez modifier la présentation de votre site Web sans toucher au code source de votre thème. Cela peut être particulièrement utile si vous ne voulez pas perdre vos modifications lors de la mise à jour de votre thème.

Comment ajouter du custom CSS à WordPress ?

Il y a deux façons d’ajouter du custom CSS à WordPress : utiliser un plugin ou le faire manuellement en utilisant le code.

Utiliser un plugin

La première méthode consiste à utiliser un plugin de custom CSS. Il existe de nombreux plugins disponibles pour cela, tels que « Simple Custom CSS », « SiteOrigin CSS », ou « Jetpack ». Ces plugins vous permettent d’ajouter facilement du code CSS personnalisé à votre site Web sans avoir besoin de connaissances en développement.

Ajouter manuellement du code CSS

La deuxième méthode consiste à ajouter manuellement du code CSS à votre site Web. Pour cela, vous devez accéder à l’éditeur de code de WordPress.

1. Allez dans l’interface d’administration de WordPress et cliquez sur « Apparence » puis « Editeur ».
2. Cliquez sur le fichier « style.css » pour ouvrir l’éditeur de code.
3. Ajoutez votre code CSS personnalisé à la fin du fichier.

Il est important de noter que si vous modifiez directement le fichier « style.css » de votre thème, vous risquez de perdre vos modifications lors de la mise à jour de votre thème. Pour éviter cela, vous pouvez créer un enfant de votre thème et y ajouter votre code CSS personnalisé.

Conseils pour utiliser du custom CSS avec WordPress

Voici quelques conseils pour utiliser du custom CSS avec WordPress :

1. Utilisez des commentaires pour organiser votre code et faciliter la lecture.
2. Utilisez des sélecteurs spécifiques pour éviter de modifier involontairement d’autres éléments de votre site.
3. Sauvegardez votre code CSS personnalisé dans un document séparé pour éviter de le perdre en cas de problème avec votre site.
4. Testez votre code CSS personnalisé sur différents navigateurs pour vous assurer qu’il fonctionne correctement.

Voici quelques exemples de Custom Css facilement applicable :

Changer la couleur de fond de l’en-tête du site :

code.site-header {
   background-color: #000000;
}

Modifier la taille et la police des titres de vos articles :

code.entry-title {
   font-size: 24px;
   font-family: 'Open Sans', sans-serif;
}

Ajouter une bordure autour des images de vos articles :

code.entry-content img {
   border: 2px solid #FF0000;
}

Changer la couleur de fond de votre formulaire de contact :

code.wpcf7-form-control {
   background-color: #FFFFFF;
}

Ajouter une ombre à votre logo :

code.site-logo img {
   box-shadow: 2px 2px 4px #888888;
}

Ces exemples sont juste une petite sélection de ce que vous pouvez faire avec le custom CSS sur WordPress. Avec un peu de pratique, vous pouvez créer des styles personnalisés pour presque tous les éléments de votre site Web.

En conclusion, le custom CSS est un excellent moyen de personnaliser votre site Web WordPress. Vous pouvez l’utiliser pour ajouter des styles personnalisés à votre thème sans toucher au code source. En utilisant les conseils et les techniques présentés dans cet article, vous pouvez facilement ajouter du code CSS personnalisé à votre site Web WordPress.