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 !!
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.
Voilà donc ce qu’on peut dire sur les liens tout en restant simple. Dans un prochain tutoriel, on abordera le remplacement des liens par des images en utilisant les CSS, mais je ne voulais pas trop l’aborder ici parce que le but de cette série c’est de donner des pistes simples pour apprendre à faire son thème. Et puis aussi parce que les images sont des petits plus à utiliser avec modération !
Restez connecté parce qu’aujourd’hui ou demain je vais vous annoncer la suite des évênements et notamment certaines nouvelles importantes pour le blog !!!
En attendant, j’ai décidé de mettre en ligne les fichiers du thème réalisé grâce aux tutoriels. Histoire de valider le tout !!
Accès directement aux tutoriels sur la page créative du projet !
Francis
![[]](http://m3.moostik.net/img/?pseudo=fran6art&option=invisible)
Bonjour,
En effet, 23 tutos, moi je dis merci et BRAVO !
Grâce à tes explications claires et ciblées, je suis en train de créer un nouveau thème de mon blog WP.
D’un coup, je me sent moins seul
Ravi de pouvoir t’aider Florent !!
Un grand merci à Fran6 pour son long (mais bon) tutoriel.
Il n’y a aucun équivalent francophone à ma connaissance, et même anglophone, tant les explications de Fran6 sont claires et pédagogiques.
J’ai découvert Wordpress il y a peu, j’ai beaucoup progressé grâce à toi, j’aurais surement bientôt un Template bien à moi, fait maison et entièrement maitrisé…
Promis, si j’en suis là c’est grâce à toi.
Bonne continuation, Fran6, promis, on reviendra …
(et j’imagine bien tout le travail qu’il y a derrière tout ça…)
TommyG.
15h15.net
Merci Tommy pour ton soutien, c’est vraiment très sympa !!
Ah ça y est on y est. Ce fut un tuto très instructif car bien pensé. Je l’ai suivi un peu en silence mais on va dire que c’était surtout par concentration lol. Du coup j’ai pas mal d’idée de thème qui me vient en tête et si le temps me permet de les finir, ça sera sans nul doute grâce à toi
Encore merci ^^
J’ai pas encore eu le temps de lire tous les autres tuto mais je les ai gardé dans mes favoris pour les lire à tête reposée. En tout cas, très bon boulot. Pour ce tuto, je me permets quelques commentaires:
J’ai jamais compris s’il fallait plutôt utiliser a ou a:link ?
“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 !”
Pourtant c’est très important d’un point de vue ergonomique. Les gens aiment savoir où ils ont déjà été et ce qu’il reste à parcourir. D’ailleurs Jakob Nielsen classe ce point comme une “erreur grave” toujours d’actualité. Tu parles d’enlaidir mais à toi de trouver une couleur, un style qui ne dénote pas dans son environnement. C’est ça le boulot de webmaster ^^
“color: #555;” - “color: #006699;”
Ca serait bien de garder une même logique, surtout pour un tuto. Opte pour les raccourcis.
“font-family: Century Gothic…”
Century Gothic n’est pas une fonte système reconnue.
“soulignage”
Tiens j’viens d’apprendre que c’était la même chose que “soulignement”
katsoura > Je ne vois jamais de a:link, je me demande si c’est pas devenu obsolète… Concernant les raccourcis, je dois vraiment m’y mettre, c’est pas encore rentré !! Désolé !!
Pour ce qui est de Century Gothic, c’est vrai tu as raison mais je la trouve tellement chouette !! 
Mais bon, je crois que je vais modifier tout ça pour être un peu plus “pro”… Enfin, concernant mon vocabulaire à la Ségolène, j’avoue que j’ai cherché mais j’avais rien trouvé de mieux !!!
Bonsoir, bon je vais faire le noob encore , je suis désolé.
et si malheureusement non, pourrait-on me conseiller un ou plusieurs sites ou ils expliquent la marche a suivre.
JE voudrais juste savoir si on va aller encore un peu plus loin dans la conception du thème, parce que la, ce que j’ai moi ressemble a l’exemple qu’on nous donne a la fin du tutoriel #19. un blog correctement “mis en page” mais niveau beauté de la chose il y a du boulot ^^ Bon la j’ai compris que ce qui a eté fait depuis le debit sont les fondations, mais est ce qu’on va apprendre grace a d’autre tuto la manière de mettre tel ou tel image en header, avoir la sidebar d’une certaines apparences, ou avoir un fond constitué d’une image comme sur ce blog. Pour résumer j’aimerais savoir si on va aborder l’aspect graphique dans de prochains tuto ?
Si oui tant mieux
Merci d’avance !
Zenein > Oui oui, je te rassure, on va effectivement aborder le côté graphique et photoshop. Si ça t’intéresses de comprendre comment ça fonctionne, je te conseille de prendre un thème que tu aimes bien et de le décortiquer. C’est la meilleure manière pour apprendre en attendant les prochains tutos ! a
Ha excellente nouvelle ^^
EN plus decortiquer les autres themes c’est ce que je fais , j’ai reussis a mettre une banniere deja…bon le titre qu’on a mis au blog viens se superposer par dessus mais j’ai mis une banniere : o /
Vivement ces tutoriel alors !
merci
Bravo Francis pour ton courage sur ce long tutoriel extrêmement bien explique. J’ai rarement vu ca. La partie CSS n’est pas la plus approfondie mais je trouve que c’est tres important d’avoir expliquer la structure de Wordpress comme tu l’a fais. Génial, encore bravo.
Merci Chan pour ton soutien !
Bonjour Francis,
J’ai suivis ton tutoriel pas à pas et j’y suis revenu souvent lors de la création de mon blog à vocation éducative (grammaire allemande). Des lien vers ton site vont suivre dans un prochain billet.
Merci pour ce travail de Titan, et chapeau,
Pierre
PS: cette fois le lien est bon, sorry
et bonne continuation, je repasserai surement de temps en temps. p.
Merci Pipo ! Très sympa ton site !
Juste pour dire merci pour tout ces tutos et que j’attends avec impatiente la suite pour pouvoir ajouter un peu de graphismes à mon site ;).
Merci encore
Salut,
Merci bcp. Maintenant moi aussi j’ai un beau theme que j’ai fait moi meme, mais comme je suis pas une pro au niveau technique: Je ne sais pas comment passer de mon serveur local au web. Pourrais tu me dire comment faire?
Merci encore
En fait desolee d’insister, mais j’ai dc mis ts mes fichiers sur le serveur mais j’obtiens cette page:
Warning: main(/home/fhlinux207/c/monblog.com/user/htdocs/marie_test/wp-includes/wp-db.php) [function.main]: failed to open stream: No such file or directory in /home/fhlinux207/c/monblog.com/user/htdocs/marie_test/wp-settings.php on line 100
Fatal error: main() [function.require]: Failed opening required ‘/home/fhlinux207/c/monblog.com/user/htdocs/marie_test/wp-includes/wp-db.php’ (include_path=’.:/usr/share/pear’) in /home/fhlinux207/c/monblog.com/user/htdocs/marie_test/wp-settings.php on line 100
Le blog cherche des infos sur mon ordi a la place de prendre celles qui sont en ligne. J’ai fais une recherche dans tous les fichier pour voir s’il n’y avait pas de chemin de type : /home/fhlinux207/c/ mais absolument rien.
As tu une idee? Merci
Kouikou > Pour passer du local en ligne, il te faut déjà installer Wordpress sur le serveur. Une fois que l’installation est faite, tu n’as juste qu’à copier le dossier de ton thème au même endroit sur le serveur à distance !
Ok, ca marche… desolee pour ma question un peu stupide
Bonjour, Mr Francis j’ai effectué deux fois chaque article que vous savez écrit et je suis désolé mais malheureusement j’ai un problème d’affichage de ma sidebar. J’en peux plus … Donc j’aimerai si possible que vous m’envoyez tous les fichiers de vos exemples. Si vous le souhaitez je peux vous les envoyer et vous me dîtes ce qui ne vas pas … Sinon je tient tout de même à vous féliciter pour tous vos articles, car il en fo du courage !
Merci bien à vous !
Yann
Re-bonjour, j’ai trouvé ou été les problèmes d’affichages de ma sidebar. Je vous en fait part pour la résolution.
Alors tout d’abord si vous n’arrivez pas bien à créer l’index utilisez celui que Francis vous à mis à disposition :
http://www.fran6art.com/documents/index.txt
**ATTENTION** Utilisez cette index puis RE-copié le dans la page single.php, archive.php et page.php !
En plus de cela faîtes les petite modification :
==> page.php :
supprimer ces lignes :
par |
Catégorie: |
‘, ”); ?>
——————————
==> Single.php :
Supprimer la ligne suivante :
——————————
==> archive.php :
Remplacez ??content? par ??excerpt?:
——————————————
Je crois que c’est tout mais attention reprenez le fichier index de départ indiquez ci-dessus, car sans vous aurez des problèmes je peux vous le dire
Donc voila, encore une fois bravo Francis !
aie les lignes de codes que j’avais écris
bon …
Bon voici ci-dessous les codes hébérgé sur mon serveur en fichier texte (au cas Francis tu peux les prendre et les mettre a disposition
)
==> single.php
http://astuce-pc.net/aide/single.txt
==> archive.php
http://astuce-pc.net/aide/archive.txt
==> page.php
http://astuce-pc.net/aide/page.txt
Voila
==> search.php
recopiez simplement l’index
Salut Fran6
Est-ce qu’une suite aux 23 leçons est prévue ?
Je viens enfin de les finir et j’ai hâte de pousser la customisation un peu plus loin.
Encore bravo pour ton excellent travail
Thomas > Tu ne pouvais pas mieux tomber car la suite arrive dans moins de 5 minutes !! C’est reparti pour toute une série de tutos !! Et ce coup-ci, on parle design ! A très vite !!
Salut et tout d’abord, un grand MERCI pour ces tutos que j’ai suivit à la lettre et qui sont vraiment sympas.
J’ai juste un petit problème c’est que quand je passe sur un page ne montrant qu’un seul article, le footer est aligné a gauche et non centré comme sur l’index, je sais pas trop d’où vient l’erreur…
Paullo’z > Tu utilises quoi comme navigateur ?
Bonsoir Francis,
Superbe leçon que tu nous a donné là! (je parle pour nous, les noob’s)
A mon avis, t’a du être prof dans une autre vie!!
Ce fut pour ma part une expérience magique, un peut comme se retrouver
dans une classe avec un prof des plus intéressent, aimable, serviable, poli et
amoureux de son travail!!
Je vais continuer la suite de tes tutos et attendre les autres avec impatience!!
Je n’aurai qu’un mot à te dire: “MERCI”
Bonne continuation pour la suite.
ps: tu pourrais pas faire un dico avec les balises html et css? lol
Bien à toi
XStaZ
XStaz > C’est trop d’honneur que tu me fais là !!!
Mais en tout cas, je suis ravi que ça plaise parce que quelque part c’est un peu le but… Je me suis fait plaisir à écrire ces tutos dans le but que vous aimiez les faire…
Je vais me grouiller pour la suite, je suis très à la bourre… de plusieurs mois… Mais quelques jours de vacances et ce sera reparti comme en 14 !!
Perso je crise un peu là…
J’essaye de transformer un theme à ma sauce, j’ai quasiment tout fait sans probleme.
J’ai même changé les couleurs qui m’embarrassaient SAUF celle des liens.
Je m’explique, ils sont en bleu d’origine (quand on clique dessus ils restent de la même couleur).
Je voudrais les passer en rose (ce que j’ai fait sur mes ex themes) et sans changement de couleurs quand ils snt vistés.
Seulement j’ai parcouru tout les .css du theme en question et nulle part je trouve cette balise a:
Vous me conseillez quoi ? Quel fichier du theme dois-je ouvrir ?
La j’avous que je crise un peu…et j’ai mal aux yeux à force.
J’arrive au terme des 23 tuto et il me reste a te dire merci ! Je n’y connaissais RIEN en PHP, CSS MySql Apache ou CSS et j’ai un blog (en local pour l’instant) ultra paramétrable (ce que je voulais) et qui tient la route
thx
salut fran6,
tout d’abord merci beaucoup pour ton tuto, que j’ai suivi pas à pas.
J’ai quelques soucis :
- J’aimerais avoir des pages (par opposition au blog) comment faire?
- ces pages constitueraient d’autres rubriques de mon site
- j’aimerais afficher mes différentes rubriques dans le header
J’arrive à créer mes pages dans parties admin (Ecrire>Page) mais elles ne s’affichent pas sur mon site.
Merci d’avance
Je découvre ce tuto seulement maintenant, et je tenais juste à dire bravo pour avoir écrit tout ceci. Ca m’aura été bien utile, et je respecte ceux qui ont le courage dans ce lancer dans ce genre de projet !
Merci pour ce tutoriel. C’est un gros travail d’être explicite et rare sont ceux qui tiennent jusqu’au bout, donc Bravo. Je vais donner une formation en xhtml + css, et un thème wordpress semblait un bon appât comme but final. Je cherchais un didacticiel comme celui-ci, je ne m’attendais pas à quelque chose d’aussi complet. Avez vous dans vos liens quelque chose en français sur la liste des templates tags, qui soit aussi explicite que ceci ?
Merci en tous cas.
Je suis en train de me lancer avec WP; c’est un ensemble de briques qui me manquaient et que je viens de découvrir. Merci beaucoup pour tout cela qui représente certainement beaucoup de temps.
Alors là… moi je dis MERCIIIIII Fran6
Tes tutos ne datent pas d’hier apparemment, mais moi, je les découvre aujourd’hui.
Je les ai suivi toute au long de la journée, dans leur intégralité et franchement c’est du méga top.
J’ai tout compris… lol !
*** (euh non, j’ai juste un koik avec les commentaires dans single.php mais, au pire si je ne trouve pas, je te ferai signe ;-)))***
Reste plus qu’à intégrer le design quoi !!!
Bon apparemment y’a des choses en ligne sur ton blog… donc je vais aller éplucher ça de plus près
Encore merci pour cet énorme boulot mis à disposition de la communauté.
Je ne connaissais pas vraiment WP mais là du coup, ça donne vraiment envie de continuer !
MERCI MERCI MERCI
@u plaisir de te retrouver au travers d’autres tutos
@ +++
Val
Val > Merci pour tout, ça me fait toujours plaisir les compliments !!
Salut!
Je tenais à te remercier pour tout le travail que tu as réalisé, sans aucune notion dans les technologies du web j’ai tout compris en m’y reprenant à deux fois. La logique d’ensemble en tout cas, les détails viendront à force de mettre la main dans le cambouis.
Merci pour ces petites perles et à bientôt!
bonjour, est ce difficile de mettre en place quelques elements graphiques simple dans le css?
par exemple, des lignes fines qui separents les posts ( ou des ++++++)..
aussi je ne trouve pas comment mettre les titres des posts en gras? lorsque je mets:
#content h2 {
font-size: 1em;
font-weight: bold
}
rien ne change!
Merci
Bonjour Fran6,
Merci pour ce tuto fort intéressant.
Ayant quelques petits problèmes avec le mien, notamment la validation w3c qui ne passe pas, j’ai télécharger le pack pour le valider aussi et j’ai des erreurs.
Voici ce que je viens de trouver :
- la balise qui n’est pas refermée dans single.php
- dans header.php il manque le signe “=” pour la balise
Merci pour l’aide que vous apportez à des amateurs comme moi.
Sans vous, avec wordpress, c’est la dépression qui guette.
Bonjour et merci pour ce tuto remarquable, qui montre tous les fondamentaux et donne vraiment envie d’aller plus loin.
Partant de zéro à part une petite compétence HTML, j’ai réalisé ce thème sans problème. Un petit souci toutefois. Alors que le thème marche impeccablement en local sur mon ordinateur, à distance chez mon hébergeur il appraît dans la liste des thèmes “endommagés”. Wordpress me dit que “le modèle est manquant”. Qu’est-ce que ça veut dire ?
Bon j’ai suivi votre tuto, mais je me heurte à un probléme les flux rss ne marche plus !!!!
Cela peut être du à quoi ?
http://www.treebu.eu/index.php/feed
merci pour ton tuto… jamais envie de refondre mon site mais from scratch et non à partir d’un template existant. Ton tuto était d’une limpidité exemplaire! Bvo! ;o)