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 pour les 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 vous êtes déjà posé l’une de ces questions pendant que vous travaillez sur votre site WordPress :
- "Comment puis-je supprimer le bouton 'en savoir plus' ?"
- « Comment puis-je changer la couleur de ce lien ? »
- « Comment puis-je rendre ce lien non cliquable tout en gardant le texte sur la page ? »
…puis lisez la suite pour apprendre quelques astuces CSS utiles pour votre site Web.
Dans ce didacticiel, 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 :)
Avec cela à l'écart, 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 (tel qu'une image, un texte ou un div) à la fois 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 reculant 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 voudrez peut-être utiliser des couleurs spécifiques.
Dans ce cas, vous pouvez le faire comme ceci :
.item-class{
color : #F7F7F7;
}
Si vous cherchez à créer une palette de couleurs pour la conception de votre site Web, essayez d'utiliser l'outil Palette. C'est très utile !
Remarque : si vous souhaitez combiner des éléments, c'est assez simple.
Par exemple, supposons que vous souhaitiez 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 classe pour que cela fonctionne, comme ceci :
.item-class a{
display : none;
}
Essayez d'ajouter le a ou expérimentez 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 changer le pointeur de la souris lors du survol du bouton.
Changer la police d'une section
Modifiez 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 défile, 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 d'affichage, 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 d'affichage. Les background-color , color sont utilisés 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 rembourrage en haut de la page afin que le contenu ne soit pas couvert par l'en-tête fixe.
Ajouter une couleur d'arrière-plan à une section
Vous souhaitez ajouter une couleur de fond à une section de votre site Web ? 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 de la section.
Changer la couleur de fond du corps
Ajoutez ce code pour modifier la couleur d'arrière-plan 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 un gris clair.
Changer la couleur d'un mot ou d'une phrase spécifique
Pour modifier la couleur d'un mot ou d'une expression 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 la phrase « 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 définie sur 0,8, ce qui rend l'image légèrement transparente lorsque l'utilisateur la survole.
Styliser un formulaire
Personnalisez 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 sélecteur 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"] du formulaire 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 deuxième 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.
Une autre astuce CSS…
Vous constaterez peut-être 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 qui dit 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 visuellement attrayant, 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 Web ou un concepteur Web professionnel débutant ou chevronné, si vous souhaitez approfondir l'utilisation de CSS avec WordPress, ces didacticiels CSS supplémentaires vous aideront à approfondir 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.
- Apprendre et référencer 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 qui proposent 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 à ajouter des bordures, à modifier la taille et l'alignement de l'image, etc.
- 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 certains 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 sympas que vous pouvez utiliser pour le faire.
- Ajouter des dispositions de maçonnerie et de grille à votre site WordPress à l'aide de CSS - Cet article explique comment utiliser CSS pour ajouter des dispositions de maçonnerie et de 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 professionnels 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 au membre WPMU DEV Antoine d'Incensy pour avoir contribué à l'idée de cet article et à plusieurs des exemples CSS utilisés ci-dessus. Consultez le profil du partenaire de l'agence Incensy pour plus de détails.
***
Remarque : Nous n'acceptons pas les articles provenant de sources externes. Les membres de WPMU DEV, cependant, peuvent apporter des idées et des suggestions de tutoriels et d'articles sur notre blog via le Blog XChange.