Le blog.

Modifier le widget WordPress « Nuage de mots-clefs ».

Vous utilisez le widget natif de WordPress Nuage de mots-clés et souhaitez modifier son apparence et son comportement ? Découvrez comment utiliser le filtre widget_tag_cloud_args pour étendre les fonctionnalités de ce widget.

Bien peu d'options...
Bien peu d’options…

 Les options de ce widget sont hélas bien limitées : seul le titre du widget et la taxonomie des termes à afficher peuvent être définis dans l’interface de configuration du widget Nuage de mots-clefs. Hors, durant la création d’un site Internet WordPress, il est bien utile d’afficher ce widget tag cloud mais à cause de son apparence peu attrayante, des plugins sont souvent utilisés.

Heureusement, en plongeant dans le code de ce widget (dans wp-includes/default-widgets.php, recherchez la classe WP_Widget_Tag_Cloud), on remarque deux choses :

  1. le nuage de tags est généré par la fonction wp_tag_cloud
  2. cette fonction présente l’utilisation du filtre widget_tag_cloud_args pour personnaliser la génération du nuage de tags

Parfait ! Nous pouvons donc très facilement (et proprement !) modifier l’apparence et le comportement de ce nuage de tags.

Utilisation du filtre widget_tag_cloud_args

En observant les paramètres disponibles dans la fonction wp_tag_cloud, on apprend qu’il est possible de modifier des propriétés intéressantes comme :

  • smallest représente la plus petite taille de texte d’un mot-clef du nuage
  • largest représente la plus grande taille
  • unit définit l’unité de texte utilisée
  • number pour définir le nombre de mots-clefs à afficher
  • orderby et order pour modifier l’ordre
  • separator pour indiquer ce qui séparera chaque mot

La liste de tous les paramètres disponibles est accessible dans le Codex WordPress.

function custom_tag_cloud($args) {
  $args['unit'] = 'em';
  $args['smallest'] = 0.5;
  $args['largest'] = 3;
  $args['order'] = 'RAND';
  $args['separator'] = ' /// ';
  return $args;
}
add_filter('widget_tag_cloud_args', 'custom_tag_cloud');

Avec ce code placé dans functions.php, la fonction passée dans notre filtre redéfinit les valeurs dans le tableau $args. L’exemple ci-dessus change l’unité du texte en em, affichant des mots dont la taille s’étend de 0.5em à 3em.  L’ordre d’affichage est également modifié en aléatoire avec RAND. Enfin, on demande à séparer chaque terme par ‘///‘.

WP-Args-Tag-Cloud

Dommage que ces propriétés ne soient pas définissables directement dans l’interface d’édition du widget. Mais désormais, nous pouvons facilement modifier  l’apparence de notre nuage de tags avec ce filtre.

Des widgets bien plus puissants qu’il n’y parait

Enfin, je tiens à terminer cet article en vous incitant à jeter un oeil au fichier wp-includes/default-widgets.php. On trouve plus de 20 occurrences d’apply_filters, indiquant un grand nombre de valeurs modifiables dans les widgets par défaut WordPress, même si aucune option visuelle n’existe dans l’édition du widget.

Bien souvent, le filtre est appliqué à l’intérieur d’une fonction WordPress d’affichage de contenu pour en modifier les paramètres par défaut (comme l’affichage des commentaires avec get_comments, l’affichage des pages avec wp_list_pages ou bien encore l’affichage des archives avec wp_get_archives). Une liste (pas très à jour) des filtres est disponible dans le Codex WordPress.

Par exemple, si vous voulez cacher les commentaires d’un type de contenu spécifique affichés dans le widget Commentaires Récents, vous pouvez définir vos types de contenu grâce au filtre widget_comments_args.

function custom_recent_comments_widget($args) {
  $args['post_type'] = array('post', 'page');
  return $args;
}
add_filter('widget_comments_args', 'custom_recent_comments_widget');

Faites comme moi et partagez vos personnalisations des widgets natifs WordPress en laissant un commentaire ci-dessous !

6 commentaires ont été rédigés, ajoutez le votre.

  1. jean-luc Répondre

    Bonjour Pierre

    Bien. Tu traites de la dimension des tags et du ‘look’ du nuage. j’ai déjà vu des sites où ce nuage change selon le passage de la souris sur la zone.
    mais ce n’est pas cela qui m’occupe.
    A quoi ça sert si, en cliquant sur un tag il renvoie à une page qui affiche le ‘code 404’. en d’autre mots: « comment activer ce widget et lier les mots clés aux articles dans lesquels ils sont repris? »
    pour le moment, ce widget est désactivé sur mon site.
    merci pour ton conseil, même si tu me renvoies vers un site où je trouverai une réponse.

    cordialement
    jean-Luc

    • Pierre Saïkali Répondre

      Bonjour Jean-Luc,
      Par défaut ce nuage de tags fonctionne, heureusement ;)
      J’ai regardé votre site Info Attitude et il semble que les liens vers les tags ne fonctionnent pas (cf http://info-attitude.com/articles/devoir/). Faites un tour sur la page Options > Permaliens puis retestez cette page, ça pourrait résoudre ces liens morts.
      Si ça ne marche pas cela doit venir d’un plugin ou du thème. Désactivez plugin après plugin pour voir si les liens du tag cloud marche, sinon testez avec un autre thème pour cibler le problème.

  2. Redon Répondre

    bonjour

    tout d’abord je n’y connais pas grand chose, mais j’ai décidé d’essayer de faire …

    merci pour vos infos sur les modifs possibles des mots clefs

    j’ai réussi à trouver le fichier que vous indiquiez, un exploit !, en regardant dans le texte j’ai trouvé [class WP_Widget_Tag_Cloud extends WP_Widget { ]
    j’ai voulu copier coller le code que vous indiquez et…frayeur, plus de site accessible… une fois tout effacer c’est revenu…ouf.
    mais qu’est ce que j’ai oublié ? ou que je ne fais pas correctement ?

    cela m’intéresse car nous voulions modifier la taille des mots clefs pour qu’ils apparaissent tous à la même taille.
    merci pour votre aide à un débutant …
    Erwan

    • Pierre Saïkali Répondre

      Bonjour Erwan,

      Oui mon article ne décrit pas trop la marche à suivre, je vais régler ça. Il faut en fait éditer le fichier functions.php (ou le créer) dans le dossier du thème que vous utilisez.

      C’est dans ce fichier functions.php que vous pourrez intégrer le code ci-dessus afin de modifier le nuage de tags.

      A votre dispo !

  3. Marc Répondre

    Bonjour,
    Je suis très intéressé par votre façon de modifier le nuage des tags: simple et élégant!
    J’ai donc copié le code dans mon fichier fonctions.php mais sans aucun résultat ….
    Y a t’il quelque chose de complémentaire à faire ???
    Merci

Laisser un commentaire