Barre de navigation pour WordPress via jQuery
Voici un petit tutoriel pour mettre une barre de navigation discrète sur son blog WordPress, mais possibilité de l'adapter sur n'importe quel site très facilement !
Vous savez que j'aime offrir la meilleur expérience de navigation possible à mes visiteurs, et bien ce tuto va aider vos visiteurs à naviguer facilement dans votre blog !
A quoi celà va ressembler ?
Pour les pressés, voici la page de démonstration.
La barre se situe au dessus de la page, elle contient tout ce dont vos visiteurs ont besoin (pages, archives, tags, calendrier, blogroll, catégories, accueil et flux). Le tout est inclus dans un petit menu déroulant. Evidement, libre à vous de placer la barre ailleurs 
A savoir avant de commencer !
1. Fonctionne sur jQuery, j'avoue que j'aurais pu faire sans, mais bon voilà
2. Cette barre n'est pas sensé remplacer la navigation de votre site ! C'est juste un élément supplémentaire pour aider vos visiteurs. Et la raison est simple, c'est que cette barre est basée sur du javascript, donc un visiteur sans javascript activé (ou via un mobile) n'aurait plus accès à la navigation du site !
3. Pour ce tuto, j'utilise les fonctions PHP native de wordpress. Ce qui veut dire que j'augmente le nombre d'appels vers votre base de donnée ! Si vous avez beaucoup de traffic, je vous conseil d'activer le cache de WordPress (via ce plugin: wp-cache) ou alors d'écrire le contenu des blocs déroulant en dur (à la main).
4. La barre de navigation est positionnée en absolue sur la page, donc elle apparait par dessus le reste et ne fait pas parti du flux de la page ! Pour la déplacer, il vous faudra donc jouer sur ses propriétés CSS "top" et "left".
Allez, on commence !
Le code html (et php) à rajouter dans votre template
Le code html suivant est à inclure après le footer de votre blog. Sous wordpress, dans la plupart des cas, il faudra le placer dans le fichier wp-content/themes/votre-theme/footer.php.
Juste avant la balise </body> ...
<div id="wLiens">
<a href="<?php bloginfo('url'); ?>">Accueil</a> |
<a class="wclic" href="#w-tagcloud">Tags</a> |
<a class="wclic" href="#w-links">BlogRoll</a> |
<a class="wclic" href="#w-archives">Archives</a> |
<a class="wclic" href="#w-categories">Categories</a> |
<a class="wclic" href="#w-pages">Pages</a> |
<a class="wclic" href="#w-calendar">Calendrier</a> |
<a href="<?php bloginfo('rss2_url'); ?>">RSS</a>
</div>
<div id="wContent">
<div id="w-tagcloud"><?php wp_tag_cloud(); ?></div>
<div id="w-links"><?php get_links(); ?></div>
<div id="w-archives"><?php wp_get_archives("type=monthly&show_post_count=1"); ?></div>
<div id="w-categories"><?php wp_list_categories("orderby=name&title_li=&show_count=true"); ?></div>
<div id="w-pages"><?php wp_list_pages("title_li="); ?></div>
<div id="w-calendar"><?php get_calendar(); ?> </div>
</div>
</div>
Pour les options d'affichage, rendez-vous en fin du tuto.
Le code CSS à inclure
A mettre à la fin de votre fichier style.css (ou dans un nouveau fichier css) ...
margin: 0;
padding: 0;
display: block;
text-align: left;
}
#wBandeau{
display: none;
position: absolute;
font: 10px Arial, Helvetica, sans-serif;
color: #ccc;
width: 100%;
top: 0;
left: 0;
}
#wBandeau #wLiens{
background: #000;
padding: 3px
}
#wBandeau #wContent{
position: absolute;
}
#wBandeau a{
color: #fff;
}
#wBandeau a:hover{
color: gray;
}
#wBandeau #wContent div{
display: none;
width: 160px;
background: #000;
padding: 5px;
}
#wBandeau #wContent div li{
list-style-type: none;
list-style-position: outside;
}
Bon, je ne vais pas vous faire un cours de CSS, mais pour personnaliser les blocs, il faut cibler #wBandeau #wContent div, et pour déplacer la barre, visez #wBandeau et changer la valeur de top:
Le code javascript
- 1. On inclu la librairie jQuery dans la page (si ce n'est pas déjà fait) entre les balises HTML
<head>et</head>
- 2. On ajoute le bout de javascript qui va permettre à la barre de fonctionner
Les portions de code suivantes sont à ajouter soit entre des balises <script type="text/javascript"> //le code ici </script>, soit dans un fichier .js
Par contre il doit impérativement ce trouver après jQuery.
$("#wBandeau").css("display","block");
$("#wBandeau #wLiens a.wclic").each(function(i){
$(this).attr("rel", "not");
var temp = $(this).attr("href");
$(this).click(function () {
var offset = $(this).offset();
$("#wContent").css({
left: offset.left+"px",
top: $("#wBandeau").height()+"px"
})
$("#wBandeau #wLiens a.wclic").not(":eq("+i+")").each(function(i){
var temp3 = $(this).attr("href");
if($(temp3).css("display") != 'none'){
$(this).attr("rel", "not");
$(temp3).css("display","none");
}
});
if($(this).attr("rel") == "not"){
$(this).attr("rel", "yes");
$(temp).slideDown();
}else{
$(this).attr("rel", "not");
$(temp).slideUp();
}
return false;
});
});
$("#wBandeau").hover(function(){},function(){
$("#wBandeau #wLiens a.wclic").each(function(i){
var temp3 = $(this).attr("href");
if($(temp3).css("display") != "none"){
$(temp3).slideUp();
$(this).attr("rel", "not");
}
});
})
});
Et voilà !
Intégration et fonctionnement alternatif de la barre de navigation
Voici quelques exemples de codes qui permettrons de modifier un peu le comportement de la barre ...
- Effet de survol à la place du clic
- Créer un décalage en haut de page pour ne pas que le barre recouvre du contenu
- Fixer la barre sur le bord de l'écran, pour qu'elle soit toujours accessible (sauf ie6)
- Ajouter/supprimer des blocs de la barre
Ressources
Voici les pages d'options de wordpress pour la personnalisation de l'affichage des liens dans vos blocs:
- wp_list_categories (Affichage des catégories)
- get_archives (Affichage des archives)
- get_calendar (Affichage du calendrier)
- wp_list_pages (Affiche les pages du blog)
- get_links (Affiche la blogroll)
- wp_tag_cloud (Affiche le nuage de tags)
Conclusions
Ce système ne conviendra pas à tout le monde, mais il permet d'optimiser son taux de rebond ainsi que l'expérience utilisateur.
-----Pages: Page suivante
iTypo: thème Wordpress gratuit
Guide pour mieux gérer vos emails via gmail (multicompte, redirection, ...)
Comment réussir vos concours sur vos blogs ?
Brève Wordpress: 40 liens, thèmes, plugins et astuces en tout genre !
Merci pour ce tutoriel, pour le blog et le mag !
Un vrai régal à chaque fois.
Stéphane
Merci pour toutes ces infos sur jQuery
pardon mais je dois pas voir la meme chose que vous là parceque je ne vois aucun effet JS ou autre…
Hello Toto,
As-tu bien regardé ? La barre est assez petite, et elle est tout en haut de la page de demo.
Sinon dis moi sur quel navigateur et quel OS tu es
C’est peut etre le firewall de ma boite qui doit bloquer des JS car je sais que pas mal d’appli ne marchent pas là ou je suis. quelqu’un aurait une capture d’écran sous la main?
Bonjour,
La capture d’écran ici :
http://www.hostingpics.net/viewer.php?id=381176Webinventif.png
@toto
Alors oui effectivement, il y a souvent beaucoup de bridage en entreprise. refait le test de chez toi
Et merci pour la capture Sbertolotti
De rien
Merci pour tes très bon tuto bien écrit.
La même barre mais fixe donc visible tout le temps qui suit le scroll tant verticalement que horizontalement c’est possible a faire en partant de ce tuto?
C’est possible en chipotant simplement le css?
thanks
@nad
Oui c’est très simple, il suffit de changer la valeur « position: absolute » en « position: fixed » dans les CSS de « #wBandeau{«
merci tu viens de me faire avancer dans la vie
Bonjour,
J’ai mis en place ce tutoriel, tout marcha impec à part qu’à l’affichage tous les liens sont visibles, il faut passer sur catégories par exemple pour qu’ils soient cachés
Avez vous une solution pour y remédier?
@Buzenet
As-tu bien mis en place tout le CSS que j’ai fourni ? On dirait que t’as oublié un « display: none; » quelque part …
Bonjour,
Si je place ma barre en bas d’écran (bottom:0px et position:fixed) comment faire pour dérouler les blocs vers le haut et non en bas cette fois-ci ?
Merci beaucoup.
Draikhin
j’essaie de mettre ton menu dans mon blog WordPress fabriqué avec le thème Ataualpa mais il n’y a rien d’affiché
Peux-tu m’aider?
merci beaucoup
Bonjour,
Je souhaite savoir ou mettre le code javascript dans le thèmes. Là j’avoue être un peu perdu.
Sous mac et Dreamweaver
Merci beaucoup.
merci pour ce tuto sur jquery
Bonjour,
ce tuto est toujours d’actualité malgré le fait que tu l’aies posté en 2008. Je l’ai installé sur le theme Twentyten de WordPress pour le tester et je n’ai pas eu besoin d’installer le Javascript.
Est-ce normal ?