Et si on jouait avec wp-pointer ? (hovercard revisited!)

Crédits Photo Port Grimaud de Maarten Thewissen, sur Flickr

L’autre jour, j’√©tais parti pour tester mes plugins sur WordPress 3.3 beta 2, lorsque suite √† l’installation j’ai d√©couvert la nouvelle fonctionnalit√© wp-pointerÔĽŅ

le wp-pointer sous l’admin bar

Je me suis arr√™t√© 2 minutes et une rapide recherche sur le sujet m’a dirig√© sur ces deux excellents articles :

L’id√©e est s√©duisante, lorsqu’on √©crit des plugins par exemple c’est un moyen rapide d’orienter visuellement l’utilisateur vers son menu de settings lors de sa premi√®re utilisation !!

Curieux, j’ai voulu tester les snippets des deux sources cit√©es plus haut et de fil en aiguille, je me suis amus√© √† cr√©er une nouvelle extension ūüôā
Or quite √† tester wp-pointer autant en profiter pour s’en servir du c√īt√© front. Comme j’avais √©crit un snippet l’ann√©e derni√®re sur l’affichage des xprofiles BuddyPress via un hovercard au survol des avatars, j’ai pens√© que l’utilisation de wp-pointer pouvait devenir une solution int√©ressante pour apporter ce type de fonctionnalit√©…

R√©sultat final du plugin bricol√© pour l’occase ūüėČ

A la diff√©rence de ma bricole de l’ann√©e derni√®re, ici il n’est pas question d’afficher des xprofiles BuddyPress mais de proposer au choix :

  • soit des √©l√©ments du profil gravatar (illustration ci-dessus)
  • soit l’affichage des infos du profil utilisateur du blog (illustration ci-dessous)
NB : les champs twitter, fb et wp.org ont été ajoutés via un filter sur les user_contactmethods

Fast Rewind !!

Avant d’avoir ces r√©sultats, il faut bien √©videmment installer

Ensuite il faut choisir l’une ou l’autre des options via l’interface d’administration du plugin et pour aiguiller l’administrateur du blog, je vous le donne en mille, what about a brand new wp-pointer ūüôā

O√Ļ est-ce qu’on effectue les r√©glages du plugin ?

Quelques points importants…

Pour r√©cup√©rer les infos de gravatar, si vous visitez l’API Developers, il est propos√© un exemple de code qui propose l’utilisation de file_get_contents(). Or comme on √©volue dans WordPress, je profite de l’occasion pour vous conseiller dans de pareilles situations de plut√īt utiliser la classe WP_Http comme l’explique l’excellent article d’Ozh Richard (un des 3 auteurs de ma bible !)

Cette fa√ßon de proc√©der vous √©vitera des surprises lorsque vous passerez d’un environnement de d√©v √† un environnement de prod… L√† avec cette classe, WordPress se charge d’utiliser la meilleure m√©thode selon ce qui est disponible sur votre config ūüôā

En passant, une capture de l’Admin de l’extension

Ensuite, le plugin fait des appels ajax, or le hover de jQuery se lance d√©s que vous survolez l’avatar.. en m√™me temps c’est ce qu’on lui demande me direz vous.. mais imaginons que vous passiez la souris rapidement au dessus de l’avatar le wp-pointer va s’afficher une fois qu’il aura re√ßu le r√©sultat de l’ajax mais vous n’√™tes peut √™tre plus au dessus de l’avatar et donc l’√©v√®nement mouseout a √©t√© envoy√© avant que le wp-pointer ne se soit affich√©.. Il reste donc affich√© et il faut de nouveau survoler l’avatar pour le masquer : pas top !

En utilisant le plugin jQuery hoverIntent : on s’assure que le visiteur a l’intention d’afficher l’hovercard puisqu’il nous est possible de s’assurer que il est rest√© quelques millisecondes expr√®s au dessus de l’avatar avant de faire l’appel ajax.

Revenons au param√©trage du wp-pointer illustr√© par theme.fm dans son article. Sur ma config, la fl√®che ne s’affichait pas lorsque je n’incluais pas le r√©glage edge dans l’option position. L’option arrow n’a pas sembl√© avoir d’incidence sur le comportement de wp-pointer pour moi… Voici donc le code qui a fonctionn√© pour le back-end :

<script type="text/javascript">
//<![CDATA[
jQuery(document).ready( function($) {
   $('#menu-users').pointer({
     content: '<?php echo $pointer_content; ?>',
     position: {
       edge:'left',
       my: 'left top',
       at: 'right top',
       offset: '0 -2',
     },
     close: function() {
       setUserSetting( 'imho_user_settings', '1' );
     }
   }).pointer('open');
 });
//]]> </script>

Enfin, m√™me si ce plugin est juste une d√©mo, j’ai pens√© √† ajouter des filtres (apply_filters) si les contenus affich√©s par les hovercards ne vous conviennent pas. Pour donner des exemples de ces filtres j’ai rapidement √©labor√© un child th√®me de twentyeleven ūüėČ

A vous de jouer et de ¬ę¬†pointer¬†¬Ľ !

Rappel de l’√©quipement n√©cessaire :

  1. WordPress 3.3-beta 2
  2. le plugin de démo
  3. le child thème pour les filters

1 commentaire sur “Et si on jouait avec wp-pointer ? (hovercard revisited!)

Les commentaires sont fermés.