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

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

styledmenus propose une trentaine de menus de navigation compatibles avec les navigateurs IE6, IE7, Firefox, Opera, Safari, Chrome et conformes aux recommandations du W3C.

Le téléchargement de ces menus est gratuit ; toutefois, vous pouvez acheter les fichiers originaux au format .psd si vous voulez personnaliser davantage vos menus selon votre charte graphique.

Merci Thierry ;)

L’excellent guide sur les différentes systèmes de navigation Donne-moi ce que je veux ! » est désormais accessible gratuitement en ligne. Découvrez 60 modèles de navigation commentés des bonnes pratiques d’ergonomie, de référencement et d’accessibilité.

Via le blog Alsacréations.

Menu à onglets avec Javascript et CSS fait partie des articles les plus lus de ce blogzine. Mais la solution présentée n’est pas un modèle d’accessibilité car elle ne fonctionne plus correctement si Javascript est désactivé. Dans ce cas, le menu reste bloqué sur le premier onglet actif. Bien que certains trouvent qu’il s’agit d’une fonctionnalité et non d’un défaut, je préconise deux scripts bien plus accessibles et efficaces : idTabs de Sean Catchpole et domtab de Chris Heilmann.

Avant de choisir un système de menus à onglets, il est important de vérifier les trois points suivants :

1. Poids du script — généralement faible pour ce genre de script, il néanmoins penser à additionner les tailles de tous les petits scripts déjà installés.

   • idTabs -> 10 ko + jQuery -> 31 ko = 41 ko. Si vous devez juste ajouter un menu à onglets sur votre site, ce poids est rédhibitoire.

   • domtab -> 10 ko. C’est déjà beaucoup mieux, et par rapport à idTabs, vous pourrez encore installer plusieurs scripts intéressants avant d’arriver à 41 ko.

   Ceci dit, l’appétit vient en mangeant et le nombre de scripts à tendance à s’allonger, de sorte que l’investissement en jQuery est très vite rentabilisé.

2. Comportement quand javascript n’est pas activé — Ces deux scripts se dégradent élégamment en l’absence de Javascript. Comme l’affichage des onglets est géré par la feuille de style CSS ils restent en place ; les éléments masqués au départ s’affichent simplement les uns sous les autres.

3. Balisage HTML, classes CSS et identifiants nécessaires — Le fonctionnement de ses deux scripts suit le même principe : il faut identifier les zones où le script va agir (identifiants, classes) et ajouter des ancres internes vers lesquelles les liens des onglets pointeront.

Commençons par idTabs »

Sean Catchpole, le créateur du plugin idTabs pour jQuery nous propose nanotabs un nouveau script minimaliste pour gérer des menus à onglets (mais pas seulement).

Nanotabs peut faire tout ce que faisait idTabs avec même quelques options supplémentaires, le tout sans utiliser le framework jQuery !

Tutoriel vidéo consacré à la réalisation d’un menu accordéon en Javascript en utilisant la librairie jQuery. Menu Accordeon Javascript. Envoyé par JojoRatonLaveur

Je suis souvent d’avis qu’un bon texte vaut mille images, mais dans le cas du bookmarklet Press This présent dans WordPress 2.6, c’est la capture d’écran du billet de Nioumedia sur Press This qui m’a incitée à tester l’engin. Plutôt efficace pour la saisie de texte (avec éditeur WYSIWYG), le choix des catégories ou l’ajout d’un tag. On peut ensuite enregistrer le billet pour le modifier ultérieurement ou le publier de suite.

Un nouveau menu à onglets sur ce blog !

Ce bookmarklet m’a tellement emballé que j’ai mis en place un deuxième menu à onglets sous les catégories du blog pour accueillir les fruits de mes petites découvertes au gré du surf quotidien. J’ai inauguré cette zone avec un onglet « News » pour des brèves plutôt généralistes. Mais à l’avenir, ce menu devrait accueillir des onglets plus spécialisés comme « Insolite », « ludique », histoire de rendre le développement web un poil plus fun ;)

Je n’ai pas encore tout testé mais il semble possible de publier directement les images présentes sur une page Flickr ou les vidéos sur Youtube (peut-être même que des plugins verront le jour pour élargir l’offre). Pratique pour ajouter un onglet « Vidéo » et/ou un onglet « Image » à mon nouveau menu à onglets.

Les billets affichés sont donc sélectionnés selon le tag, ce qui est moins lourd que la création d’une catégorie qu’il faudrait éventuellement masquer dans d’autres boucles WordPress présentes sur le blog (ce qui me fait une partie de la réponse au commentaire de Kynerion par la même occasion !)

A noter que j’ai quand même créé une sous-rubrique News pour garder une certaine cohérence avec la catégorie Revue de web, mais ce n’est pas une obligation. Cette souplesse de WordPress est assez magique car elle permet toutes les fantaisies : on pourra facilement créer un billet dans une catégorie et ajouter le tag « News » pour afficher le billet à un autre emplacement du template.

De plus, dans la boucle qui suit, rien n’empêche d’afficher des billets contenant d’autres tags pour avoir encore plus de souplesse dans l’étiquettage des billets. Il suffira de remplacer 'tag=news&showposts=3' par 'tag=news+insolite+comique&showposts=3'.

N’ayons plus peur du loop !

Pour les billets taggués « News », par exemple, il suffit de faire la boucle suivante :

<div id="tab6">
    <ul>
        <?php /* Affichage des toutes les news */
        query_posts('tag=news&showposts=3'); ?>
        <?php while (have_posts()) : the_post(); ?>
        <li>
            <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
            </h2>
            <div>
                <?php the_content('Lire la suite &raquo;'); ?>
            </div>
        </li><!-- end .post -->
        <?php endwhile; ?>
    </ul>
    <p><a href="/tag/news" title="Tous les articles tagué news">Voir toutes les news</a></p>
</div>

Bref, je n’ai pas encore fait le tour de cette nouvelle version de WordPress, mais il semble que l’équipe de développement se dirige vers la création d’une véritable plate-forme de CMS aussi complète qu’efficace.

Mais que manque-t-il donc à WordPress ?

Tiens, ça me rappelle que j’ai un brouillon en cours sur ce qui manque à WordPress par rapport à d’autres outils de gestion de contenu. Comme je suis loin de tous les connaitre, et si le coeur vous en dit, vous pouvez m’aider en me donnant des pistes du genre : « sur Joomla! on peut faire ça facilement », ou « avec SPIP, je fais ce que je veux avec mes cheveux »… Enfin, vous voyez l’idée générale ;) Merci par avance !

La chaine ! la chaine ! la chaine !

Si j’osais, je lancerai bien une chaine de blog sur ce qui manque à WordPress pour permettre à chacun d’y réfléchir à tête reposée dans le cadre d’un billet, ce qui me permettra ensuite de compiler les contributions de chacun(e).

Allez, j’ose : tous les lecteurs et lectrices sont invitées à participer à cette chaine de blog d’intérêt public !!!

Vous pensiez avoir fait le tour des tutoriels pour réaliser des menus avec onglets en CSS ? Moi aussi, mais c’était sans compter les facéties googliennes : je cherchais tranquillement des ressources sur le poids des sélecteurs css pour ajouter une information ou deux à mon billet sur les Reset CSS quand un résultat au titre alléchant a retenu mon attention :

Créer un menu à onglets avec CSS. Surpris de n’être jamais tombé sur cet article auparavant, je regarde ce que Google a à dire sur la requête menu onglets css. L’article apparait bien, mais en 3ème page… alors qu’un tutoriel de cette qualité mérite la première. Non mais franchement, y font quoi les gars de chez Google ? Ils pourraient faire un effort, quand même ;)

Ce tutoriel vous guidera pas à pas sur la voie de la création d’un menu à onglets accessible et multi-navigateurs. Que vous en soyez à votre premier menu ou pas, vous apprendrez forcément quelque chose. Si ce n’est pas le cas, vous pourrez toujours venir vous plaindre ici ;) Bref, vous m’avez compris, faites du bruit pour que tout le monde puisse profiter du sens de la pédagogie de Normand Lamoureux.

L’article est plein de bons conseils que je vous laisse découvrir. Bon, si vous insistez, je vais avoir du mal à résister à l’envie de dévoiler une astuce particulièrement simple et efficace pour améliorer la productivité dans l’écriture des CSS :

Arrive le moment d’écrire ma feuille de style. Dans ce dessein, je vais à l’élément « Éditer les CSS » du menu CSS de la barre d’outils pour développeur Web. Cette fonctionnalité permet d’écrire une règle CSS dans le volet de gauche du navigateur et de voir immédiatement le résultat dans le volet de droite, où le fichier HTML s’affiche.

J’utilise régulièrement ce volet gauche pour jouer avec les CSS des sites que je visite, mais je n’avais jamais pensé m’en servir comme ça.

Comme quoi, avec Google, une requête peut en cacher une autre ;)

Faites en sorte que la redondance de l’information profite aux contenus qui le mérite, et ne sortez pas sans cette boite à outils pleine de cours et autres tutoriels ;)

Les résultats du Sandbox Designs Competition sont disponibles depuis quelques heures après plusieurs jours passés à peser le pour et le contre de chaque proposition. Chaque membre du jury était libre de laisser libre court à sa subjectivité et à son intime conviction pour se prononcer sur les choix éditoriaux ou la mise en valeur des différentes fonctionnalités qui structurent un blog. Ou encore sur les choix purement esthétiques comme les visuels employés ou les choix colorimétriques. J’ai accordé un poids important au confort de lecture en traquant impitoyablement les déficits en blancs tournants, interlignages et autres espacements. Pour autant, je n’ai pas laissé de répit aux problèmes de lisibilité dépendants de la palette de couleurs retenue : un blog, c’est avant tout beaucoup de texte à lire. En second lieu, j’ai pris en compte l’équilibre global du design. J’ai vérifié ensuite si la structure résistait à l’épreuve de la compatibilité inter-navigateurs. Pour celà, j’ai testé les pages sous Firefox 2, Internet Explorer 6 et Opéra 9, le tout pour Windows. Merci à Scott pour avoir mis en place ce concours qui fut un modèle d’organisation. Vivement l’année prochaine !

C’est quoi au juste ce concours ?

Il s’agissait de proposer un thème pour WordPress en utilisant l’intendance fournie par Sandbox. Je vous renvoie sur l’un des billets que j’ai déjà écris sur ce thème Sandbox. Grosso modo, ce thème a deux particularités. D’une part, il offre l’intégration des microformats dans un écrin xhtml CHIC, donc classe… D’autre part, il utilise le fichier functions.php pour générer des classes à gogo en fonction du contexte dans lequel s’affiche la page dont voici quelques exemples :

 <body class="wordpress y2007 m05 d31 h18 home loggedin"> <body class="wordpress y2007 m05 d31 h18 archive category category-action-citoyenne loggedin"> <div id="post-1" class="hentry p1 post publish author-admin category-uncategorized y2007 m05 d16 h09"> <li id="comment-550" class="comment c1 byuser comment-author-admin bypostauthor c-y2007 c-m05 c-d31 c-h20">

Et quand on sait que Sandbox fera probablement partie un jour ou l’autre de la distribution WordPress, vous conviendrez qu’il est urgent d’aller jeter un oeil chez l’ami Scott !

46 designs — Mes impressions « à chaud »

La suite de ce billet contient mes notes de lecture prises durant la phase de sélection des designs. Ces notes, destinées à guider mes choix pour désigner les trois meilleurs thèmes accompagnés de leur chalengers, sont à peines réécrites pour les besoins de cet article. A la relecture, je m’aperçois que je n’ai pas été particulièrement tendre : que voulez-vous, c’est pas de ma faute si j’ai pris mon rôle de judge au sérieux ;) En, même temps, je me dis que ça ne sert à rien d’embellir les résultats après coup pour éviter de froisser les susceptibilités. Car en fait, si les résultats parlent d’eux-mêmes, ils ne disent finalement pas grand chose sur les designs qui n’ont pas été retenus.

Ca va sans dire mais mieux en le disant, il s’agit essentiellement d’impressions personnelles et subjectives, même si ça et là, quelques justifications techniques ou ergononiques donnent l’impression du contraire ^_^. Lorsque je n’ai pas pu me prononcer franchement « pour » un design, j’ai joué la carte de l’honnêteté en précisant « N/A » pour « Non Applicable » au moment où j’ai rédigé ma note. En revanche, je me suis appliqué à justifier mes impressions « contre ».

Les 46 designs »

Ce mini tutoriel propose une technique simple pour afficher un effet de survol sur un bouton en permutant une image en background associée à un lien et faire en sorte que cet effet de survol reste une fois le bouton cliqué, de manière à signaler la page en cours. Le tout avec une pincée de HTML, une bonne dose de CSS et un soupçon de PHP.

Le code HTML

Le menu est constitué d’une liste non-ordonnée ul où chaque lien a contenu dans l’élément li est transformé en bloc display: block afin de recevoir une image de fond qui contient les deux états du bouton. Cette image possède une largeur de 100px pour une hauteur de 50px. Les vingt-cinq premiers pixels de hauteur sont réservés à l’état « inactif », tandis que les vingt-cinq pixels restants feront le bonheur de la pseudo-classe :hover.

Si vous ne connaissez pas cette technique, n’ayez pas PêUR ! Vous trouverez des exemples d’images en portes coulissantes sur cet excellent blog consacré au HTML et aux CSS ;)

Qu’y a-t-il au menu ?

Il s’agit d’une simple liste qui contient les liens auxquels j’ai associé un id (ici en gras) nécessaire pour l’application des styles CSS abordés plus bas.

<div id="menu">
  <ul>
    <li><a id="accueil" href="index.php">Accueil</a></li>
    <li><a id="page1" href="page1.php">page1</a></li>
    <li><a id="page2" href="page2.php">page2</a></li>
  </ul>
</div>

La feuille de style CSS pour le menu »