Stylisez vos propres boutons sur Wordpress

Étiquettes :

Vous avez acheté un thème wordpress, mais les boutons fournis avec celui-ci ne vous conviennent pas? Apprenez à créer vos propres boutons grâce au css!

Parfois, vous voudriez pouvoir un peu plus personnaliser vos designs que ce que wordpress vous donne l’occasion de faire. Sachez que c’est une chose faisable, et ce, très facilement. Pour ce faire, il vous faudra un peu d’inspiration, quelques codes css – donné dans l’article évidemment – et les couleurs que vous voulez utiliser.

De la programmation ? Pas pour vous ?

C’est vrai que lorsque l’on parle de programmation, beaucoup de gens ont des boutons qui poussent d’un coup sur leur visage et un frison d’effroi qui parcours leur dos, mais pas d’inquiétude, nous n’allons pas faire une programmation de haute voltige. Nous allons juste appliquer un style, c’est comme si vous vous habilliez le matin avec des nouveaux vêtements…

Commençons notre aventure dans notre article

Laissez vos aprioris derrière vous et lançons nous à pieds joints dans la création de vos boutons. Afin de pouvoir personnaliser un bouton, vous allez devoir créer un lien renvoyant vers la page désirée. Ensuite, dans WordPress, vous avez en haut à droite de votre zone de texte, deux boutons : Visuel & Texte. Appuyez sur texte.

Vous voilà dans votre article mais en HTML. Pas d’inquiétude, nous n’allons pas y rester longtemps. Rechercher le lien que vous venez de faire – si vous cliquez sur pomme+f ou ctrl+f vous activez la recherche du navigateur internet pour aller plus vite ! – lorsque vous l’aurez trouvé, vous pourrez voir qu’il est entouré de choses étrange comme ceci : <a href= »//www.leliendemapage.com »>MonBouton</a>

La seule chose que vous devez faire c’est y écrire ceci : class= »monBouton » ce qui donne donc : <a href= »//www.leliendemapage.com »  class= »monBouton » >MonBouton</a>

Créons maintenant notre bouton en css

Vous allez maintenant devoir ouvrir deux pages, la première est celle de votre article où se trouve votre bouton et la seconde est l’éditeur de code css. Cette page se trouve normalement dans Apparence > éditeur. Si vous n’y avez pas accès, demandez à votre webmaster de venir vous donner un coup de pouce…

Vous allez maintenant pouvoir copier-coller le code ci-dessous touuuuut en bas du document modifiable :

.monBouton{
margin:0 auto;
display: block;
text-align: center;
font-weight: 700;
text-decoration: none;

width: 120px;
padding: 7px 10px;

color: #333;
background: #ffb709;
}
.monBouton:hover{
background: #1971a9;
color: #fff;
}

Vous pouvez voir dans .monBouton qu’il y a trois groupes différents. Le premier ne vous intéresse pas et vous ne devez même pas y toucher !

Le deuxième correspond à la taille de votre bouton, vous pouvez vous amusez à changer un peu les chiffres pour voir ce que cela donne et arriver à l’effet que vous recherchez. Sachez que pour le padding, le premier chiffre correspond à la distance ajoutée en haut et en bas du texte et le deuxième, la droite et la gauche.

Le dernier groupe correspond aux couleurs. En ce qui concerne ce point, vous devez utilisez des valeurs hexadecimalavec un # – ou une valeur RGB, à ce moment-là, vous devrez remplacer le chiffre #112233 par rgb(255,255,255). Pensez à adapter ces codes avec vos couleurs. Si vous n’avez pas encore défini vos couleurs, vous pouvez utiliser un outil comme KulerSi vous changez background, cela changera la couleur du bouton, si vous changez le color, vous changerez le texte.

Dans .monBouton:hover, vous spécifiez la couleur lorsque quelqu’un survole votre bouton. Choisissez donc une deuxième couleur.Lorsque vous avez fait vos changements, cliquez sur Mettre à jour le fichier. Allez sur votre article et rechargez la page. Votre bouton devrait maintenant être affiché !

Alors, vous avez réussi à créer vos propres boutons ? Vous voulez nous montrer vos créations ? N’hésitez pas !


Commentaires

  1. Avatar JoanR dit :

    Bonjour,

    C’est toujours sympa de personnaliser le design de son site, mais il faut préciser que cette méthode doit être réalisée dans un thème enfant, sinon les modifications seront perdues à la première mise à jour du thème ;-).

    En tout cas merci pour le travail de l’équipe, je vous lis très régulièrement !
    Joan

    1. Yannick Vandenthoren Yannick Vandenthoren dit :

      Bonjour Joan,

      En effet, il est utile de faire un thème enfant mais encore faut-il savoir le faire et avoir accès à son serveur FTP hélas… Mais on pourrait voir cela dans un prochain article !

      Surtout merci à vous de nous lire !
      Yannick.

  2. Avatar Olivier dit :

    Bonjour
    Je ne redis pas ce qui a été dit au dessus, attention toutefois la bonne écriture pour :
    La seule chose que vous devez faire c’est y écrire ceci : class= »monBouton »
    ce qui donne donc :
    MonBouton
    EST :
    MonBouton

    Bonne continuation
    Olivier

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Devenez chroniqueur

Vous souhaitez devenir chroniqueur ou nous soumettre un article? Rien de plus simple.

Ça m'intéresse

#EPW sur Twitter

#EPW sur Facebook

À propos

Votre blog Écrire pour le web en chiffres
  • Plus de 25.000 sessions par mois
  • Plus de 35.000 pages vue chaque mois
  • 1500 abonnés à la newsletter
  • Créé en 2006
  • 1e position dans Google sur des expressions métier
En savoir plus