Francis Chouquet Lettering & Web Design

Création Thème WordPress | Tutoriel #23: CSS: les liens

0

Ce tutoriel est le vingt-troisième d’une série d’articles sur la création d’un thème pour WordPress de A à Z. Si vous prenez le train en cours et si vous souhaitez créer votre propre thème de A à Z, je vous conseille fortement de commencer par le premier tutoriel de la série.

Et bien oui, ce tutoriel est le dernier de la série ! 23 tutoriels quand même !!! J’espère que ça vous aura plu !! Mais ne vous inquiétez pas, c’en est pas fini des tutoriels. Je vous en dirai plus dans un prochain billet ! ;-)

Aujourd’hui, on va aborder les liens. Ceux-ci sont définis d’une certaine manière par défaut par votre navigateur mais ils ne sont pas toujours du meilleur goût. On va donc modifier le principal pour que les liens et leurs couleurs soient cohérents avec le design de votre blog. Ensuite, on verra différentes manières de customiser un peu plus ces liens pour les rendre attractifs. Il y a cependant un aspect que l’on ne va pas aborder ici, c’est l’insertion d’images à la place de simples liens. Ca fera l’objet d’un tutoriel à part entière. Ici, je souhaite que l’on se concentre uniquement sur le principal et sur les simples liens de texte et de liste.

A la base et par défaut, un lien est affiché en bleu et est souligné. Quand vous passez dessus avec votre souris, rien ne se produit. Par contre, une fois que vous avez cliqué sur un lien, celui-ci devient violet. Personnellement, je ne trouve pas tout ça très beau ! Alors, pourquoi ne pas changer ces couleurs ?

Il y a 3 paramètres qui vont rentrer en compte:

  • la balise a, c’est elle qui définit les paramètres pour les liens. A chaque fois que vous souhaiterez modifier l’apparence d’un lien à quelque endroit que ce soit de votre thème, il sera impératif de l’associer à vos div.
  • a:hover est utilisé dès que vous survolez un lien. Vous pouvez paramétrer le survol des liens différemment.
  • a:visited est utilisé pour « marquer » différemment les liens que vous avez visité. Personnellement, je ne l’utilise pas. Je trouve que ça enlaidit l’ensemble d’un thème. Mais c’est personnel !! ;-)
Donc, nous allons travailler autour de ces 3 variations de la balise a.

Dans un thème, il y a différentes parties qui utilisent les liens. Il y a par exemple les titres, le contenu, les listes de la sidebar, le footer, le header même avec le titre du blog. Si vous souhaitez avoir qu’une seule manière de définir vos liens pour tout le thème, il vous suffit uniquement de définir la balise a dans votre feuille de style. On va ici utiliser un exemple concret et simple:

1 2 3 4 
a { color: #555; text-decoration: none; }

Ici, on va juste modifier la couleur des liens pour un gris sombre. Je n’ai pas forcément envie non plus de voir les liens soulignés, donc j’ajoute un « text-decoration: none » qui retire le soulignage. Vous pouvez aussi dire que vous ne voulez pas le soulignage à l’affichage des liens mais que vous aimeriez l’avoir quand on passe dessus. Pas de soucis, il suffit de le paramétrer sur a:hover:

1 2 3 
a:hover { text-decoration: underline; }

Vous pouvez également choisir de mettre les liens au survol dans une autre couleur, un gris plus pâle peut-être:

1 2 3 4 
a:hover { color: #777; text-decoration: underline; }

Donc, vous voyez, il y a déjà pas mal de choses que vous pouvez paramétrer pour vos liens ! Maintenant, imaginons que vous souhaitiez avoir un lien différent pour les titres de vos articles. Vous allez modifier le style de vos liens directement sous la div des titres, ici h2 à laquelle on va ajouter la balise a. Mais dans mon thème, j’ai aussi des titres h2 ailleurs que pour mes articles ! On va donc modifier les h2 dans la div « content » où apparaissent les titres d’articles. On aura donc le code suivant:

1 2 3 4 5 
#content h2 a{ font-size: 1.2em; font-family: Century Gothic, Lucida Grande, Verdana, Arial, Sans-Serif; color: #006699; }

Ici, je n’ai pas modifié le soulignage, mais j’ai décidé de changer la police et sa taille. Je pouvais très bien le faire sans la balise a d’ailleurs, mais c’est pour vous montrer que l’on peut vraiment définir chaque lien du thème différemment.

On va juste ajouter un petit attribut supplémentaire pour que le lien change de couleur au survol des titres:

1 2 3 
#content h2 a:hover{ color: #555; }

Les couleurs ne sont pas forcément top, mais c’est uniquement pour vous montrer ce que ça donne. A vous de choisir vos couleurs selon vos goûts et votre thème.

Exemple complet de customisation des liens sur un thème:

Je vais juste vous donner quelques petits trucs simples que j’utilise et qui peuvent donner un peu plus de style à votre thème. Voici les hypothèses pour mon thème:

  • Je veux donner un background de couleur à tous les liens dans les articles quand je les survole. Je trouve que ça les met bien en relief et en plus je trouve ça plutôt sympa. Par contre, je ne veux pas qu’ils soient soulignés au survol.
  • Je veux que mon titre de blog dans le header ne soit pas souligné, ni à l’affichage et ni au survol.
  • Je veux que tous les liens de la sidebar ne soient pas soulignés d’un trait mais de pointillés quand on les survole.

Comment je vais procéder ? En fait, pour ce qui est du titre, on l’a déjà vu plus haut. On va définir la balise a avec le même style, qui sera appliqué au titre. Ainsi, pas de soulignage. Pour ce qui est du survol, on va tout simplement supprimer l’attribut « text-decoration: underline; » que l’on a définit ci-dessus pour a:hover, puisque de toute façon on ne veut pas de soulignage au survol sur l’ensemble du thème. Pour ce qui est du background dans les liens des articles, on va ajouter la balise a:hover à la div « post_content ». Comme ça, on pourra modifier les liens uniquement pour le contenu des articles. On y appliquera un background de couleur grise sombre et un text-decoration:none. Enfin, pour la sidebar, on va définir un style pour les liens de la div « sidebar ». On va appliquer un border-bottom « dotted » d’un pixel au a:hover. Voici donc ce que ça donne:

1 2 3 4 5 6 7 8 9 10 11 12 13 
.post_content a { color: #006699; }   .post_content a:hover { color: #fff; background: #006699; }   .sidebar a:hover { text-decoration: none; border-bottom: 1px dotted; }

Ici, j’ai déjà commencé par donner une autre couleur à mes liens dans les articles pour qu’ils soient différenciables de la couleur du texte. Ensuite, j’ai défini un style pour le survol. J’ai choisi un background bleu et une couleur de police blanche pour faire ressortir le texte du lien. J’aime assez cette technique ! ;-) Ensuite, comme on avait préalablement défini qu’il n’y aurait pas de soulignage pour la balise a, il m’a suffit juste d’ajouter un bord en pointillés sous les liens de la sidebar, et ce uniquement quand on les survole.

Pour terminer, j’ai décidé de mettre en ligne les fichiers du thème réalisé grâce aux tutoriels. Histoire de valider le tout !! ;-)

J’espère que ces tutos vous auront plu. J’avais dans l’idée de prolonger tout ça avec du design mais je n’ai pas le temps pour le moment, me consacrant entièrement à ma boutique de thèmes ( cf encart ci-dessous ). Mais le blog devrait être mis à jour d’ici quelques mois (on est le 5 octobre 2011) et peut-être que de nouveaux tutos verront le jour ! ;-)

Et si ça vous intéresse, avec des amis, on a créé notre boutique de ventes de thèmes WordPress, Peaxl. Venez jetez un oeil ! ;-)

Francis

142 Commentaires

  • johnny

    Ceux de Yann? Le lien ne marche pas… :(

  • Johnny > Mais non, je mets le lien dans le tuto -> http://www.fran6art.com/tutori.....-de-theme/

  • Salut Francis, j’ai suivis tout ton tuto, qui est, effectivement même après plus de 3 ans de publications toujours fort utiles et éttonament à jour !(?)
    Je suis novice et ne connais que partiellement l’html & css, j’ai donc suivi attentivement ton tutorial, et j’ai un petit problème lors de la vérification W3C; il m’affiche une 20aine d’erreurs de fermeture de balise, qui pourtant dans mon code sont fermée! (les méta, et autres balises plus courament entre la balise , c’est 20fois la même erreur, je te copie donc une qui résumera mieux que ce que j’ne pourrais en dire:
    « end tag for X omitted, but OMITTAG NO was specified

    You may have neglected to close an element, or perhaps you meant to « self-close » an element, that is, ending it with « /> » instead of « > ».

    Line 5, column 68: end tag for « meta » omitted, but OMITTAG NO was specified

     »

    Et pourtant ses lignes comporte bien le /> de fermeture d’une balise seule … :x
    « <meta http-equiv="Content-Type" content="; charset= » /> »

    je suis un peu perdu, merci d’avance pour ton aide!

  • Dorian

    Bonjour,

    Bien que cela date un peu de très longtemps, je trouve énormément d’erreurs qui ne sont pas corrigées. C’est super de nous donner des bases mais si elles sont fausses et qu’arrivée à la fin bah on est comme un C– bah c’est très frustrant.

    Bon ben je vais me débrouiller seul.

    Dorian

  • Dorian > Salut Dorian, normalement, il n’y a que très peu de choses qu’il manque. Les tutos datent de 2007, mais ils ont été revu plusieurs fois et je suis en train de les mettre à jour une nouvelle fois. Quels sont tes problèmes, peut-être que je peux t’aider ?

  • Dorian

    Merci de répondre si vite.
    Avant tout merci de tous ces tutos qui m’ont grandement aidé pour créer mon propre theme. Je trouvais juste dommage qu’une fois arrivé à la fin bah le résultat était terriblement moche lol. J’aurais aimé avoir un résultat parfait ce qui est du reste le but. Bref. Depuis j’ai grandement avancé j’en suis à personnaliser le theme. J’ai téléchargé tes fichiers et cela a fonctionné du premier coup. Donc plus de problème. Enfin si mais now c’est juste que je personnalise et donc avance peu à peu.

    Encore merci je viendrais souvant ici lol.

  • stevensf

    Un grand merci pour ce superbe tuto.

    Franchment j’en avait rarement vu d’aussi bien foutu et commenté (les gens de Prestashop devraient te demander de faire un tut sur le dev de themes pour leur logiciel).

    Il m’a permit de faire mon premier theme WordPress en 1 journée (je maitrise parfaitement le CSS / PHP / HTML) ce qui m’a peu etre aidé….

    Encore merci et bravo !!!

  • stevensf

    c’est encore moi… j’avais oublié de dire que meme si un update complet est en cours, il serait bien dans un premier temps de remplacer sur le tut#12 la fonction ‘get_links_list()’ par la nouvelle fonction qui la remplace, à savoir : wp_list_bookmarks()

  • Jocelyn

    C’est vraiment tres bien tout ca.
    Si je veux inserrer une photo, un logo dans le theme, comment je fais???

    Merci a l’avance.

  • Licha

    Franchement superbe tutoriel qui m’aide vachement ! :) Un grand merci :D

  • Christophe

    Bonjour

    Bravo

    Très simple

    Facilement transposable

    Pour faire simple, continuez à faire des tutos vous êtes doué.

    Amicalement

  • Bravo pour ces tutos, ils sont très bien fait
    cela m’éclaire beaucoup vous avez fait du très bon boulot!

    merci encore!

  • lethys

    GENIAL

  • Bonjour Francis,

    Tout d’abord, mille mercis pour ton excellent tuto !
    Bravo pour tes exercices clairs et faciles à suivre.

    Voici mon problème, je n’arrive pas à faire afficher les images dans mes pages. Ni une image toute simple via l’interface d’administration de WP dans la partie création de page. Ni en passant par une extension que j’ai installée qui s’appelle : NextGEN Gallery.
    J’ai sans doute fait une erreur quelque part. Je suis novice en programmation php.

    D’autre part, je voudrais faire un site vitrine avec une partie e-commerce. Y a t il une suite à ton excellent tuto qui expliquerait tout ça de A à Z ? :)

    Merci d’avance, et encore bravo !

  • Eliott Dupuis

    Salut à toi Francis. J’ai regardé ton portfolio et je suis, et mon associé sommes tombés sous le charme du thème que tu as fais pour whydot.com et j’aimerais bien l’utiliser pour mon site internet. Si je pouvais le récupérer gratuitement ^^/ ou contre quelques sous je suis preneur. Merci d’avance et encore merci pour ses tutos qui déchirent tout.

  • Un grand merci pour ces 23 tutoriels excellents que j’ai dévorés !

  • noixdecoco

    Merci pour ces tutos,
    Pour le menu, on ne peut pas en créer un avec les pages statique sur ce theme, comment faire ?

  • Merci pour cette série de tutoriels, une bonne courbe de progression (pas trop rapide), un résultat tangible à la fin et de nombreuses portes ouvertes sur les possibilités de wordpress.

  • Bonjour Fran6,

    5 ans après, ton tuto est toujours le bienvenu, et je te dis merci pour ces 23 chapitres.

    Le design, les css et le html je connais bien, mais le codage en php, hum, comment dire…….grosse inconnue :-).

    Et bien voilà, grâce à je viens de réaliser mon 1er thème, qui plus est, il est valide. Il ne me reste plus qu’à le personnaliser à mon goût.

    Alors un gros merci à toi.

    Cdt

  • Merci bcp ! Un autre blogeur est né de ce tuto aujourd’hui ;)

  • lakhdym

    سلام الله عليكم

    جزاك الله بالخير

  • Auriane

    Bonjour Fran6 ! Déjà merci pour ces tutos qui me sauvent un peu la mise :)
    J’ai une question qui me frustre, j’ai importé les articles de mon ancien blog wordpress gratuit sur ce blog mais j’aimerai pouvoir régler le nombre d’articles qui apparaissent sur la page d’accueil… Comment faire ?

    Merci de ton aide, j’attends ta réponse avec impatience !

    Auriane

  • mohamed

    bonjours merci beaucoup
    جزاك الله بالخير

  • Quentin

    Bonjour Francis,

    J’ai un petit problème sur mon blog wordpress, je m’explique.
    Les pages possèdent des urls par défaut du type : [nom-du-blog]/?p=2 pour un post d’id 2 par exemple.
    Dans un souci de référencement, j’ai choisi de rédéfinir les urls de mes pages.
    Je voudrais donc : [nom_du_blog]/2012/10/[nom-de-mon-article]
    Seulement, lorsque je définis mon paramètrage de la sorte, je n’ai plus accès à ces pages (erreur 404).
    J’ai un peu creusé le sujet et il semblerait qu’il faille intervenir dans le .htaccess pour redéfinir l’url rewriting.
    Peux-tu m’apporter tes connaissances pour éclaicir ma lanterne ? :-)

    Un grand merci d’avance.

    Quentin.

  • harry75

    Une grande reconnaissance pour ce partage de savoir et de connaissances…..Se mettre à la portée de tous et promouvoir ce savoir….Un bien bel exemple de ce que devrait être le web tout entier..merci pour toutes ces lumières Fran6, en espèrant partager davantage encore ! ;)

  • Digiz

    Un immense merci pour ce tutoriel d’une clareté et d’une pédagogie incomparable. Merci pour le temps que tu as passé dessus (un petit paquet d’heures j’imagine bien…) et pour ce partage de connaissance d’une grande qualité :).

    Et bonne continuation à toi!

    D.

  • BRAVO ! MERCI ! Très grande classe, clair, précis, efficace !

  • nadjib

    comment mettre des liens sur mes images d’articles vers mes page dans wordpress

  • Merci beaucoup de votre temps consacrer a tout ces tutos !!!!!

  • Merci, un très bon Tuto

  • Charly

    Merci beaucoup pour ce tuto simple à aborder mais qui néanmoins reste très complèt.

  • Sympho

    Merci beaucoup Fran6 pour ce tuto clair net et précis.
    Il est rare d’en trouver d’aussi concis sur le web.
    Félicitations !
    Je retourne à mes feuilles de styles ;-)

  • Bonjour Fran6,

    Un grand merci pour avoir partagé tes connaissances avec tout le monde. Comme on le dit souvent, la connaissance ne sert pas à grand chose si elle n’est pas partagée avec les autres. Tout le monde a apprécié ton geste avec une clarté exceptionnelle. Fier de toi.
    Merci encore et n’hésite pas à me tenir au courant de nouveauté. Je vais voir la boutique.

  • Ilphrin

    Merci beaucoup pour cette suite de tuto …
    Grâce à ça, j’ai pu comprendre comment wordpress fonctionne et aussi valider mon thème

    Super boulot…Merci :)

  • Youness

    Merci :)

  • Passenger

    Soigné, clair et pédagogique.
    Bravo.
    Merci pour l’effort et le partage.

  • Ezzanz

    Bonjour je veux m’aider s’il vous plaît, j’ai créé thème WordPress et je veux faire un thème de démonstration, mais dans le wordpress à l’exportation dans les pages de les post et les articles, et moi j’ai des donnés important dans le tableau wp_option comment je veux que faire pour regle ce probleme s’il vous plaît et merci d’avance.

  • Une série de tutoriels qui, bien qu’elle date un peu, est toujours d’actualité et permet toujours de comprendre les bases du fonctionnement d’un thème WordPress. Merci beaucoup pour le partage de tes connaissances et l’ensemble de ton blog!


7 + 8 =

Success, your comment is awaiting moderation.