Archives mensuelles : juin 2008

Afficher les tags dans vos thémes WordPress

WordPress inclus, depuis la version 2.3, la gestion des tags en natifs. Je viens de rajouter dans le thème de ce blog la gestion des tags. Voyons comment afficher, dans votre thème ou dans un thème existant, ces tags.

Afficher le nuage de tags

Le nuage de tags permet d’afficher vos tags, sous forme d’une liste, la taille de chaque tag étant déterminé par leur importance dans votre blog. Ainsi plus un tags sera associé à des articles, plus celui-ci sera affiché en gros. Ce nuage de tags, est le plus souvent à afficher dans la barre latérale de votre blog. Il vous faudra donc rajouter le code dans le fichier de cette barre latérale (ou ailleurs si vous le voulez) qui se trouve dans le fichier sidebar.php dans le thème par défaut. La fonction à utiliser est wp_tag_cloud. Afin de rendre vos thèmes compatibles avec les versions antérieures de wordpress 2.3, on teste l’existence de cette fonction avant utilisation grâce à la méthode function_exists.

Voici la liste des paramètres utilisables:

  • smallest : la taille minimale
  • largest : la taille maximale
  • unit : l’unité de mesure de la police (pt par défaut)
  • number : le nombre de tags à afficher (0 pour tout afficher)
  • format : le format d’affichage du nuage (list, array ou flat (option par défaut)).
  • orderby : le tri des tags (name ou count). Les tags sont triés par nom par défaut.
  • order : l’ordre de tri (ASC ou DESC). ASC est l’option par défaut.
  • exclude : la liste des tags à exclure. Par défaut, aucun tags n’est exclus.
  • include : la liste de tags à inclure. Par défaut, tous les tags sont inclus.

Dans l’exemple suivant on affichera tous les tags sous forme d’une liste (ul li) avec un police minimale de 8 pt et un police maximale de 22. On donne à la liste un id pour pouvoir facilement styler les tags grâce à une feuille de style.


   
  • Tags

  • Afficher les tags d’un article

    L’affichage des tags d’un article se fait par la fonction the_tags. Elle permet d’afficher les tags associés à l’article en cours. La fonction à 3 paramètres :

    • le premier correspond à ce qui sera affiché avant la liste de tags.
    • le deuxième correspond à ce qui sera affiché entre 2 tags
    • le dernier correspond à ce qui sera affiché après la liste de tags.

    Dans l’exemple suivant, on affichera la liste de tags de l’article séparés par des virgules, précédés par « Tags : ».

    Ce code est a rajouter dans toutes les pages où sont affichées un article (résultat de recherche, page d’accueil, page d’un article, …).

    Et voila. A vous maintenant de mettre à jour vos thèmes ;).

    Firefox 3 sortira le 17 juin

    Ca y est, l’information est officielle, Firefox 3 sortira le 17 juin. La sortie récente d’une RC3, corrigeant un bug sous Mac OS X, n’a pas décalé la date de sortie annoncée précédement à mi juin.

    La fondation Mozilla profite de cette sortie pour promouvoir son navigateur d’une façon originale en tentant de battre le record du monde de téléchargement d’un logiciel en 1 journée. Mozilla l’a baptisé le Download day. Vous pouvez dès à présent vous inscrire en faisant « une promesse de téléchargement ». Vous pouvez également consulter le nombre de promesses de téléchargement global et par pays. A l’heure où j’écris ces quelques lignes, 1,085,134 personnes se sont déjà inscrites. Si vous avez toujours souhaitez entrer dans le Guiness book des records, c’est l’occasion !!! 😉

    Bonnes Pratiques Prototypes

    Je vous ai déjà présenté prototype et ses fonctions utilitaires précédemment. Voici quelques bonnes pratiques pour utiliser au mieux la puissance de prototype.

    Associer une fonction à un événement sur un élément

    Prototype permet de manière simple de s’abonner à un événement grâce à la méthode observe. Elle prend 2 paramètreS en entrée : le type d’événement (click, focus, hover, …) et la méthode à appeler.

    $('myContainer').observe('click', doSomeMagic);

    On appellera la méthode init lors du chargement de la page de la manière suivante :

    document.observe('load', init);

    Appeler la même méthode pour plusieurs éléments

    Dans certains cas, vous pouvez à être amener à appeler une même méthode sur plusieurs élément comme cacher ou afficher certains éléments d’un seul coup. La méthode invoke permet de ne faire cette opération en une seule ligne de code.

    $$('div.hidden').invoke('show')

    ou

    $('item1', 'item2', 'item3').invoke('hide');

    Enchaîner plusieurs fonctions

    Dans le même ordre d’idée, vous pouvez être amené à appelez plusieurs méthodes sur un même objet. Au lieu de récupérer votre élément à chaque appel de fonction, vous pouvez les enchaînez. Vous gagnerez en légèreté et en rapidité (pas besoin de récupérer l’élément à chaque appel).

    $('comments').addClassName('active').show();

    Effectuer des remplacements de chaines

    Prototype intègre également la notion de template. Un template est une chaîne de caractère modèle contenant des variables (#{maVar}), variables qui seront remplacés par les valeurs fournies lors l’appel à evaluate. Cela est très utile lors de lors de la concaténation d’une même chaîne dans une boucle par exemple.

    var myTemplate = new Template('The TV show #{title} was created by #{author}.');
    var show = {title: 'The Simpsons', author: 'Matt Groening' };
    myTemplate.evaluate(show);
    

    Remplacer le contenu d’un élément

    Pour mettre à jour un élément HTML, on utilisera  update (à la place de innerHTML)

    $('maDiv').update('je suis mis à jour');

    Insertion d’éléments

    Il vous arrive peut être de devoir créer dynamiquement des éléments dans vos pages. Prototype permet l’insertion d’élément de manière très aisée grâce à la fonction insert. Elle prend en paramètre la position d’insertion (top, bottom, before ou after), par rapport à un élément de référence, et l’élément à rajouter.

    var titre = new Element('h3', { 'class': 'maClasse' }).update('Mon Titre'); /* nouvel element */
    $('header').insert( {bottom : titre }); /* Insertion */
    

    On peut également noter que la position par défaut est bottom. On peut donc simplifier par :

    $('header').insert(titre);

    Et voila!! c’est tout pour cette fois 😉

    Firefox 3 passe en version RC2

    Firefox 3 vient de passer en version RC2 (Release Candidate), version de test qui sera très proche de la version finale. Vous pouvez télécharger Firefox sur le site de la fondation Mozilla . Cette version RC2 corrige une douzaine de "bugs" bloquants trouvés dans la version RC1. Aucune information concernant une éventuelle RC3, mais cela est possible en cas de bugs bloquants. La version finale de Firefox 3 est prévue pour "quand elle sera prête" soit dans les environs de mi-juin.

    Les développeurs d’extensions sont en train de les rendre compatibles avec Firefox 3 afin de pouvoir profiter pleinement de cette version de Firefox qui s’annonce très prometteuse avec au menu :

    • Gecko (le moteur de rendu) qui passe en version 1.9
    • Améliorations des performances (de nombreuses fuites de mémoire ont été résolues)
    • Une nouvelle barre d’adresse
    • Une gestion améliorée des marques pages
    • Un gestionnaire de téléchargement amélioré
    • Possibilités d’installer des extensions directement depuis l’outil de gestion des extensions
    • Un look amélioré et spécifique par OS.

    Vous pouvez voir ces nouveautés en video présenté par Tristan Nitot, président de Mozilla Europe.