Barre de navigation pour Wordpress via jQuery

05/02/2008
Projets Allez aux commentaires

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="wBandeau">
        <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) ...

#wBandeau, #wBandeau div, #wBandeau div div{
        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>
<script type="text/javascript" src="jquery-latest.pack.js"></script>
  • 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.

$(document).ready(function(){//on attend que la page soit chargée
        $("#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 ...

Ressources

Voici les pages d'options de wordpress pour la personnalisation de l'affichage des liens dans vos blocs:

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

Articles relatifs

  1. sbertolotti
    05/02/2008 à 18:03 | #1
    Répondre | Citer

    Merci pour ce tutoriel, pour le blog et le mag !
    Un vrai régal à chaque fois.

    Stéphane

  2. UGAL
    06/02/2008 à 15:03 | #2
    Répondre | Citer

    Merci pour toutes ces infos sur jQuery

  3. toto
    07/02/2008 à 14:18 | #3
    Répondre | Citer

    pardon mais je dois pas voir la meme chose que vous là parceque je ne vois aucun effet JS ou autre…

  4. k-ny
    07/02/2008 à 14:36 | #4
    Répondre | Citer

    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 ;)

  5. toto
    07/02/2008 à 14:46 | #5
    Répondre | Citer

    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?

  6. Sbertolotti
    07/02/2008 à 15:00 | #6
    Répondre | Citer
  7. k-ny
    07/02/2008 à 15:20 | #7
    Répondre | Citer

    @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 ;)

  8. Sbertolotti
    07/02/2008 à 15:30 | #8
    Répondre | Citer

    De rien :)

  9. nad
    26/02/2008 à 06:29 | #9
    Répondre | Citer

    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

  10. k-ny
    26/02/2008 à 11:00 | #10
    Répondre | Citer

    @nad

    Oui c’est très simple, il suffit de changer la valeur « position: absolute » en « position: fixed » dans les CSS de « #wBandeau{« 

  11. nad
    27/02/2008 à 05:14 | #11
    Répondre | Citer

    merci tu viens de me faire avancer dans la vie

  12. Buzenet
    22/08/2008 à 17:04 | #12
    Répondre | Citer

    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?

  13. k-ny
    23/08/2008 à 07:32 | #13
    Répondre | Citer

    @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 …

  14. Draikhin
    14/11/2008 à 14:51 | #14
    Répondre | Citer

    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

  15. maria
    26/02/2009 à 19:01 | #15
    Répondre | Citer

    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

  16. Deepsurf
    26/05/2009 à 19:52 | #16
    Répondre | Citer

    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.

  1. 08/02/2008 à 16:25 | #1
    Revue de la semaine – Oueb-Revue
  2. 08/02/2008 à 22:29 | #2
    Réflexions sur le design de ce blog… at Aurelien Bessaguet | un blog web2.fr
  3. 20/02/2009 à 18:36 | #3
    34 tutoriels sur WordPress (astuces, hacks…) | Jean-Baptiste – Blog perso, Actualités, High-Tech, WordPress, Webdesign