17 conseils CSS pour gagner du temps pour les utilisateurs de WordPress
Publié: 2023-03-13WordPress offre des possibilités infinies pour concevoir et personnaliser votre site Web. Dans cet article, nous partagerons quelques conseils CSS pratiques spécifiquement destinés aux utilisateurs de WordPress, du style de votre en-tête à la modification de vos polices.
Bien que WordPress propose de nombreux thèmes et modèles prédéfinis, vous devez parfois prendre les choses en main et effectuer des personnalisations avec CSS.
Si vous avez déjà posé l’une de ces questions lorsque vous travaillez sur votre site WordPress :
- « Comment puis-je supprimer le bouton « Lire la suite » ? »
- « Comment puis-je changer la couleur de ce lien ? »
- « Comment rendre ce lien non cliquable tout en conservant le texte sur la page ? »
…puis lisez la suite pour découvrir quelques astuces CSS précieuses pour votre site Web.
Dans ce tutoriel, nous aborderons :
- Conseils CSS WordPress
- Centrer un élément horizontalement et verticalement
- Changer la couleur du lien
- Supprimer un lien
- Désactiver un lien (le lien reste visible mais les utilisateurs ne peuvent pas cliquer dessus)
- Changer la couleur des liens au survol
- Liens de style
- Styliser un bouton
- Changer la police d'une section
- Créer un en-tête collant
- Créer un en-tête collant avec un effet d'ombre
- Ajouter une couleur d'arrière-plan à une section
- Changer la couleur de fond du corps
- Changer la couleur d'un mot ou d'une phrase spécifique
- Créer une bordure autour d'une image
- Créer un effet de survol sur une image
- Styliser un formulaire
- Créer une mise en page réactive
- Faites passer vos compétences CSS au niveau supérieur
Conseils CSS WordPress
Les deux seules choses que vous devez savoir pour mettre en œuvre ces conseils sont :
- Comment fonctionne CSS
- Comment ajouter du CSS à WordPress
Remarque : CSS n'est pas risqué, donc si vous faites une erreur, vous pouvez simplement supprimer votre code ou le modifier… cela ne cassera rien :)
Cela étant dit, passons directement à quelques conseils CSS pratiques avec des exemples afin que vous puissiez l'essayer sur votre propre site WordPress :
Centrer un élément horizontalement et verticalement
Pour centrer un élément (comme une image, un texte ou un div) horizontalement et verticalement, utilisez le code CSS suivant :
.element {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Dans ce code, la propriété position: relative est utilisée pour positionner l'élément par rapport à son ancêtre positionné le plus proche. Les propriétés top: 50% et left: 50% déplacent l'élément au centre de son conteneur. Enfin, la transform: translate(-50%, -50%) centre l'élément à la fois horizontalement et verticalement en le déplaçant vers l'arrière de 50 % de sa propre largeur et hauteur.
Changer la couleur du lien
.item-class{
color : blue;
}
Vous pouvez utiliser des couleurs comme le blanc, le noir, le bleu, le rouge… mais vous souhaiterez peut-être utiliser des couleurs spécifiques.
Dans ce cas, vous pouvez procéder comme ceci :
.item-class{
color : #F7F7F7;
}
Si vous souhaitez créer une palette de couleurs pour la conception de votre site Web, essayez d'utiliser l'outil Paletton. C'est très utile !
Remarque : Si vous souhaitez combiner des éléments, c'est assez simple.
Par exemple, disons que vous souhaitez désactiver le clic et remettre le lien en noir.
Vous pouvez utiliser ce code :
.item-class{
pointer-events : none;
color : black;
}
Supprimer un lien
.item-class{
display : none;
}
Remarque : Parfois, vous devrez peut-être mettre un a après votre cours pour que cela fonctionne, comme ceci :
.item-class a{
display : none;
}
Essayez d'ajouter le a ou d'expérimenter sans lui pour voir si votre code fonctionne ou non. Ajoutez simplement votre CSS, enregistrez et vérifiez votre interface.
Désactiver un lien (le lien reste visible mais les utilisateurs ne peuvent pas cliquer dessus)
Remarque : Il est toujours préférable de modifier le HTML pour ce faire, mais si CSS peut être plus simple ou la seule solution possible, utilisez ce code :
.item-class{
pointer-events: none;
}
Changer la couleur des liens au survol
Vous pouvez faire en sorte que les liens changent de couleur lorsqu'un utilisateur les survole en utilisant le code CSS suivant :
a:hover {
color: red;
}
Dans ce code, le sélecteur a:hover cible tous les liens de la page sur laquelle l'utilisateur survole actuellement. La propriété color: red change la couleur du texte en rouge.
Liens de style
Pour styliser les liens sur votre site Web, utilisez le code CSS suivant :
a {
color: #0077cc;
text-decoration: none;
border-bottom: 1px solid #0077cc;
transition: all 0.2s ease-in-out;
}
a:hover {
color: #005299;
border-bottom: 1px solid #005299;
}
Dans ce code, le sélecteur a est utilisé pour styliser tous les liens de la page. La propriété color définit la couleur des liens et la propriété text-decoration supprime le soulignement par défaut. La propriété border-bottom ajoute un effet de soulignement subtil. La propriété transition crée un effet de transition fluide lorsque l'utilisateur survole le lien. Le sélecteur a:hover est utilisé pour styliser le lien lorsque l'utilisateur le survole.
Styliser un bouton
Utilisez le code suivant pour styliser un bouton :
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
Dans ce code, les différentes propriétés sont utilisées pour styliser un bouton, y compris les propriétés background-color et color pour l'apparence du bouton, la propriété padding pour la taille du bouton et la propriété cursor pour modifier le pointeur de la souris lors du survol du bouton.
Changer la police d'une section
Changez la police d'une section de votre site Web à l'aide du code CSS suivant :
.section {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}
Dans ce code, la propriété font-family définit la police sur Arial ou une police sans empattement similaire, la propriété font-size définit la taille de la police sur 16 pixels et la propriété line-height définit l'espacement entre les lignes de texte sur 1,5. fois la taille de la police.
Créer un en-tête collant
Si vous souhaitez créer un en-tête qui reste fixe en haut de la page lorsque l'utilisateur fait défiler, vous pouvez utiliser le code CSS suivant :
.header {
position: fixed;
top: 0;
left:0;
width: 100%;
background-color: #333;
color: #fff;
z-index: 9999;
}
Dans ce code, la propriété position: fixed fixe l'en-tête en haut de la fenêtre, et la propriété top: 0 le positionne tout en haut de la page. La propriété width: 100% garantit que l’en-tête s’étend sur toute la largeur de la fenêtre. Les background-color color sont utilisées pour styliser l'en-tête et la propriété z-index: 9999 garantit que l'en-tête apparaît au-dessus de tous les autres éléments de la page.
Créer un en-tête collant avec un effet d'ombre
Pour créer un en-tête collant avec un effet d'ombre qui reste fixe en haut de la page lorsque l'utilisateur fait défiler, utilisez ce code CSS :
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #fff;
z-index: 999;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.content {
padding-top: 100px;
}
Dans ce code, la propriété position: fixed est utilisée pour fixer l'en-tête en haut de la page. Les propriétés top: 0 et left: 0 positionnent l'en-tête dans le coin supérieur gauche de la page. La propriété width: 100% définit la largeur de l’en-tête sur toute la largeur de la page. La propriété background-color définit la couleur d'arrière-plan de l'en-tête et la propriété z-index garantit que l'en-tête apparaît au-dessus des autres éléments de la page. Enfin, la propriété box-shadow ajoute un effet d'ombre subtil à l'en-tête. Le sélecteur .content est utilisé pour ajouter un remplissage en haut de la page afin que le contenu ne soit pas couvert par l'en-tête fixe.
LIVRE GRATUIT
Votre feuille de route étape par étape vers une entreprise de développement Web rentable. De l’acquisition de plus de clients à la croissance fulgurante.
LIVRE GRATUIT
Planifiez, créez et lancez votre prochain site WP sans accroc. Notre liste de contrôle rend le processus facile et reproductible.
Ajouter une couleur d'arrière-plan à une section
Vous souhaitez ajouter une couleur de fond à une section de votre site internet ? Utilisez ensuite le code CSS suivant :
.section {
background-color: #f2f2f2;
padding: 20px;
}
Dans ce code, la propriété background-color: #f2f2f2 définit la couleur d'arrière-plan sur un gris clair et la propriété padding: 20px ajoute 20 pixels d'espace autour du contenu dans la section.
Changer la couleur de fond du corps
Ajoutez ce code pour changer la couleur de fond du corps de votre site web :
body {
background-color: #f5f5f5;
}
Dans ce code, la propriété background-color définit la couleur d'arrière-plan sur gris clair.
Changer la couleur d'un mot ou d'une phrase spécifique
Pour changer la couleur d'un mot ou d'une phrase spécifique dans un bloc de texte, vous pouvez utiliser le code CSS suivant :
p span {
color: red;
}
Dans ce code, le sélecteur p span cible tout élément span qui apparaît dans un élément p . Vous pouvez ensuite envelopper le mot ou la phrase que vous souhaitez cibler avec un élément span dans votre code HTML, comme ceci :
<p>Lorem ipsum dolor sit amet, <span>consectetur adipiscing elit</span>. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Cela ferait apparaître en rouge l’expression « consectetur adipiscing elit ».
Créer une bordure autour d'une image
Voici comment ajouter une bordure autour d'une image :
img {
border: 2px solid #ccc;
}
Dans ce code, la propriété border définit la largeur, le style et la couleur de la bordure. La valeur 2px définit la largeur de la bordure sur 2 pixels, solid définit le style sur une ligne continue et #ccc définit la couleur sur un gris clair.
Créer un effet de survol sur une image
Utilisez cet extrait de code pour créer un effet de survol sur une image :
img:hover {
opacity: 0.8;
}
Dans ce code, le sélecteur img:hover cible l'image lorsque l'utilisateur la survole. La propriété opacity définit la transparence de l'image. Dans ce cas, la valeur est fixée à 0,8, ce qui rend l'image légèrement transparente lorsque l'utilisateur la survole.
Styliser un formulaire
Stylisez un formulaire sur votre site Web avec le code CSS suivant :
form {
background-color: #f2f2f2;
padding: 20px;
border-radius: 5px;
}
form label {
display: block;
margin-bottom: 10px;
}
form input[type="text"], form input[type="email"], form textarea {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: none;
border-radius: 3px;
box-shadow: 0 0 5px #ccc;
}
form input[type="submit"] {
background-color: #4CAF50;
border: none;
color: #fff;
padding: 10px 20px;
border-radius: 3px;
cursor: pointer;
}
Dans ce code, les différentes propriétés sont utilisées pour styliser un formulaire, y compris les propriétés background-color , padding et border-radius pour l'apparence générale du formulaire. Le sélecteur form label est utilisé pour styliser les étiquettes associées à chaque champ de formulaire. Le form input[type="text"], form input[type="email"], form textarea est utilisé pour styliser les différents champs de saisie du formulaire. Le sélecteur form input[type="submit"] est utilisé pour styliser le bouton de soumission.
Créer une mise en page réactive
Si vous souhaitez créer une mise en page réactive qui s'adapte à différentes tailles d'écran, utilisez le code CSS suivant :
@media (max-width: 768px) {
/* Styles for screens smaller than 768px */
.container {
width: 100%;
}
.menu {
display: none;
}
.mobile-menu {
display: block;
}
}
@media (min-width: 769px) {
/* Styles for screens larger than 768px */
.container {
width: 768px;
margin: 0 auto;
}
.menu {
display: block;
}
.mobile-menu {
display: none;
}
}
Dans ce code, la règle @media est utilisée pour spécifier différents styles pour différentes tailles d'écran. La première règle @media cible les écrans d'une largeur maximale de 768 px, et la seconde règle @media cible les écrans d'une largeur minimale de 769 px. Les différents sélecteurs de chaque règle @media sont utilisés pour ajuster la mise en page et l'apparence de la page en fonction de la taille de l'écran.
Encore une astuce CSS…
Il se peut que votre code ne fonctionne pas même si vous avez tout fait correctement. Cela peut être dû au fait qu'il existe déjà un code CSS disant quelque chose de différent de votre code.
Pour remplacer cela, ajoutez simplement !important comme ceci :
.item-class{
pointer-events: none !important;
}
Ce ne sont là que quelques exemples de façons pratiques d’utiliser CSS pour améliorer votre site Web WordPress.
Avec CSS, les possibilités de personnalisation de l'apparence de votre site Web sont pratiquement infinies. En apprenant et en appliquant ces conseils, vous pouvez créer un site Web non seulement attrayant visuellement, mais également optimisé pour une meilleure expérience utilisateur.
Faites passer vos compétences CSS au niveau supérieur
Que vous soyez un développeur ou un concepteur Web professionnel débutant ou chevronné, si vous souhaitez approfondir l'utilisation du CSS avec WordPress, ces didacticiels CSS supplémentaires vous aideront à élargir vos connaissances et vos compétences :
- 10 conseils simples pour apprendre le CSS pour WordPress – Conseils pratiques pour les débutants qui souhaitent apprendre le CSS spécifiquement pour une utilisation avec WordPress. Il couvre tout, de la compréhension de la syntaxe CSS à l'utilisation des frameworks CSS.
- Apprentissage et référencement CSS pour WordPress – Un guide complet pour apprendre et référencer CSS spécifiquement pour une utilisation avec WordPress. Il couvre des sujets tels que l'utilisation de WordPress Customizer, la compréhension des sélecteurs CSS et l'utilisation de thèmes enfants.
- 7 meilleurs sites pour trouver des extraits CSS et de l'inspiration – Vous cherchez de l'inspiration pour votre code CSS ? Cet article répertorie sept sites Web proposant des extraits CSS et des exemples que vous pouvez utiliser dans votre propre site Web WordPress.
- Comment styliser les images sur votre site Web WordPress avec CSS – Les images sont une partie importante de tout site Web, et cet article propose des conseils sur la façon de les styliser à l'aide de CSS. Vous apprendrez comment ajouter des bordures, modifier la taille et l'alignement de l'image, et bien plus encore.
- Comment ajouter du CSS personnalisé à votre site WordPress – Cet article vous guide tout au long du processus d'ajout de CSS personnalisé à votre site Web WordPress, en utilisant à la fois le personnalisateur intégré et les plugins.
- Plugins CSS gratuits pour l'édition en direct de votre site WordPress – Cet article répertorie quelques plugins CSS gratuits qui vous permettent de modifier en direct votre site Web WordPress, ce qui facilite la visualisation des effets de vos modifications CSS en temps réel.
- 14 outils d'animation CSS sympas pour WordPress – Si vous souhaitez ajouter des animations à votre site Web WordPress à l'aide de CSS, cet article répertorie quelques outils intéressants que vous pouvez utiliser pour le faire.
- Ajoutez des dispositions en maçonnerie et en grille à votre site WordPress à l'aide de CSS – Cet article explique comment utiliser CSS pour ajouter des dispositions en maçonnerie et en grille à votre site Web WordPress, créant ainsi un design plus attrayant visuellement.
- 25 conseils d'experts pour un codage CSS plus propre pour WordPress – Si vous souhaitez améliorer la propreté et la lisibilité de votre code CSS, cet article propose 25 conseils d'experts pour y parvenir.
- 25 conseils de pro pour améliorer votre flux de travail CSS – Conseils pour améliorer votre flux de travail CSS, de l'utilisation de préprocesseurs CSS à l'utilisation d'outils de développement de navigateur pour déboguer votre code.
Cliquez sur les liens pour en savoir plus et commencer à améliorer votre site Web WordPress dès aujourd'hui.
Contributeurs
Merci à Antoine , membre de WPMU DEV d'Incensy, pour avoir contribué à l'idée de cet article et à plusieurs des exemples CSS utilisés ci-dessus. Consultez le profil partenaire de l'agence Incensy pour plus de détails.