WordPress — Menus «funky» avec wp_list_bookmarks()

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

WordPress — Menus «funky» avec wp_list_bookmarks()

WordPress est un CMS formidable, ce qui ne l’empêche pas d’avoir des lacunes. L’une d’elle concerne la possibilité de construire des menus composés de liens vers des pages ou des articles publiés sur le blog, ce qui est courant avec des CMS comme Drupal ou Joomla. En général, je me contente de créer mon menu en HTML et ça fonctionne très bien. Toutefois, cette solution n’est pas toujours très évidente à maintenir. Voici la solution que j’ai retenue pour la mise en place des liens pointant vers les articles que je souhaitais mettre en avant sur ce blog.

La fonction wp_list_bookmarks()

La fonction wp_list_bookmarks() possède plusieurs arguments intéressants dont l’identifiant de la catégorie à afficher category=386 et before et after qui permettent de spécifier les balises HTML que vous voulez avant et après chaque élément de liste. Par défaut, il s’agit de la balise li. Toutefois, pour une bonne gestion des coins arrondis, j’ai ajouté une balise p (oui, un p dans le li, ça manque d’élégance… ), ce qui oblige à préciser explicitement les balises li.

<div id="featured-posts" class="wrapper">
    <ul>
        <?php echo wp_list_bookmarks('title_li=&categorize=0&category=386&before=<li><p>&after=</p></li>'); ?>
    </ul>
</div>

Une pincée de CSS3 pour épicer le menu

#featured-posts ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#featured-posts li {
    float: left;
    width: 102px;
    margin-right: 18px;
}
#featured-posts li:hover {
    background: #2F0615;
    color: #fff;
/*
* Coins arrondis
/
    -moz-border-radius: 5px 0 5px 0;
    -webkit-border-radius: 5px 0 5px 0;
    border-radius: 5px 0 5px 0;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    -webkit-border-bottom-right-radius: 5px;
/
* Ombres portées
*/
    -webkit-box-shadow: #aaa 3px 3px 3px;
    -moz-box-shadow: #aaa 3px 3px 3px;
    box-shadow: #aaa 3px 3px 3px;
}
En fonction de la grille de mise en page que j’ai mise en place sur ce blog, j’ai opté pour l’affichage de 8 liens occupant chacun 2 colonnes sur les 16 disponibles. Si vous voulez disposer d’un deuxième menu comme celui que j’ai ajouté dans mon pied de page, il suffit de dupliquer la fonction wp_list_bookmarks, de changer l’id de la catégorie des liens et de remplacer #featured-posts par .featured-posts and the cat’s in the bag!

Note : si vous aviez déjà utilisé le Widget Liens dans votre barre latérale, cette catégorie est affichée deux fois. Pour la supprimer de votre blogroll faites glisser le Widget Liens, sélectionnez la catégorie dans le menu déroulant et répétez l’opération autant de fois que nécessaire.

Pour finir

Oui,  toutes ces opérations sont un peu fastidieuses, mais je n’ai pas encore trouvé mieux à part attendre la sortie prochaine de WordPress 3.0. D’ailleurs, à ce propos, je vous propose de lire l’article Les menus, l’intégration de MU, et une course aux correctifs ! de Xavier Borderie sur WordPress Francophone qui parle notamment de l’intégration prochaine d’une fonctionnalités permettant de faire des menus en veux-tu en voilà !

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



6 commentaires pour “WordPress — Menus «funky» avec wp_list_bookmarks()”

  1. Luc dit :

    Bon ben désolé bruno, mais je vais encore devoir troller…

    rien que l’appel à la fonction est en lui même un gros WTF ?

    hou hou, une fonction, on lui passe des variable, pas une chaine de caractère.

    normalement on devrai avoir :

    wp_list_bookmarks($sTitle,$bCategorize,$iCategory,$sBefore,$sAfter)

    en ademettant

    $sTitle (string) $bCategorize (bool) $iCategory (int) $sBefore (string) $sAfter (string)

    Mais Je pense qu’on pourrai améliorer la gestion du before after avec un wrap (enfin ce qu’on appelle un wrap dans typo3)

    $sWrap = ‘chaine_avant|chaine_après';

    quel hérésie de voir un code comme ça

    j’imagine bien la tronche de la fonction

    function wp_list_bookmars($sConf){ $aParams = explode(‘&’,$sConf); $aFinalParams = array(); foreach($aParams as $params) $tempParams = explode(‘=’,$params); $aFinalParams[$tempParams[0]] = $tempParams[1]; } … }

  2. Bruno Bichet dit :

    @Luc — héhé, les trolls, je les aime bien : ils permettent souvent de clarifier les choses (quand tout le monde est de bonne foi, bien entendu) ;)

    J’ai bien envie de te dire : « ouais, tu as entièrement raison », sauf que si WordPress utilisait des variables à la place des chaines de caractères il faudrait faire plusieurs manipulations : préciser le contenu des variables et les indiquer dans la fonction.

    Du coup, je trouve que ça enlèverait beaucoup à la simplicité propre à WordPress : là, tu ajoute des chaines de caractère (code html, arguments avec les valeurs) et hop, tu colles ta fonction où tu veux sans te soucier de savoir si les variables sont déclarées quelques part. Surtout quand tu veux réutiliser la fonction.

    Enfin, moi je trouve ça plus simple et je ne suis pas sûr que les performances en pâtissent tant que ça. A moins que…

  3. Luc dit :

    ben non, justement, c’est beaucoup moins lisible justement…

    wp : wp_list_bookmarks(‘title_li=&categorize=0&category=386&before=

    &after=

    ‘)

    vrai php : wp_list_bookmarks(‘titre’,0,386,’html avant’,’html après’);

    bon effectivement, il faut connaitre la fonction pour savoir quelle paramètre passer. mais bon niveau codage c’est bcp plus propre.

    d’ailleurs, quid de passer à la fonction des caractères html type & nbsp ; & eacute ; je suis prêt a parier que ça fait crasher le script

  4. piouPiouM dit :

    @Luc, les fonctions comme wp_list_bookmarks() acceptent deux types d’arguments :

    Un String dans le style d’une requête HTTP (comme dans l’article) ; Un Array associatif argument => valeur.

    C’est bien simple, si tu trouves dans le corps d’une fonction WordPress l’appel à wp_parse_args() c’est que les deux formats d’arguments sont acceptés (qui elle même applique parse_str() sur la chaîne de caractères).

    /me préférerait de réels arguments également, bien qu’il faille avouer que ce format (array associatif tout du moins) est plus lisible.

  5. [...] here to see the original: WordPress — Menus «funky» avec wp_list_bookmarks() Tags: [...]

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site