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à !