Dessines moi un bpmh widget!

Publié le

par

Crédits Photo LSE Library

Avec ce billet, je vous proposais de découvrir BP My Home, mon dernier plugin WordPress / BuddyPress. Or je ne suis pas entré dans le détail de la conception d’un widget. J’ai simplement inlus un widget « exemple » au plugin. Or comme me l’a très justement fait remarquer claudeg « Bonne idée! Reste à y ajouter des plugins ». (Je pense qu’il voulait dire widgets).

Effectivement, avec seulement un lecteur de flux rss et une liste de favoris : on a vite fait le tour de l’extension 😉 . Or cette après-midi, j’ai pris 1h30 à en concevoir un nouveau et je me suis dit que ça pourrait éventuellement vous intéresser que je partage avec vous la manière dont on dessine un bpmh widget. En passant, si celui que j’ai rapidement conçu vous intéresse : il est disponible ici(bpmh pour BP My Home et surtout pour le différencier des sidebar widgets..)

1/ Un peu d’organisation…

Une fois installé, BP My Home est localisé dans le répertoire /wp-content/plugins/bp-my-home. Dans ce dernier il y a un sous répertoire qui s’appelle widgets : c’est ici que les widgets sont à déposer.

Arbo des widgets

Il s’agit donc de créer un répertoire pour le widget en faisant en sorte que le nom de celui-ci coïncide avec le nom de votre fichier PHP principal : celui qui va contenir les fonctions nécessaires à son affichage. Pour notre exemple : bpmh-notepad et bpmh-notepad.php.

2/ L’utilité des entêtes du fichier PHP principal

J’ai recopié ci-dessous les entêtes de mon dernier bpmh widget : bpmh-notepad.

<?php
/*
bpmh widget name: My Notepad
bpmh widget function: bpmh_notepad
bpmh widget column: 1
bpmh widget URI: https://imathi.eu/2010/11/18/bpmh-notepad/
bpmh widget Description: widget to store random notes.
bpmh widget Author: imath
bpmh widget Author URI: https://imathi.eu/
*/

Deux d’entre elles sont déterminantes, les autres servant surtout à la partie back office du plugin – ce que j’ai appelé BPMH Manager et qui sert à l’Admin du réseau/blog pour l’activation des bpmh widgets.

La valeur écrite juste après ‘bpmh widget function:’ est le préfixe des fonctions qui seront appelées par BP My Home pour afficher, permettre une mini configuration et illustrer le widget. Ensuite ‘bpmh widget column:’ renseigne sur la position par défaut du widget sur la page qui est divisée en deux colonnes. Il y a donc 2 valeurs possibles : 1 et 2 !

3/ Let’s code !

Dans notre fichier bpmh-notepad.php, la première fonction à considérer est celle qui renvoie le titre, on connait son préfixe (dans notre exemple bpmh_notepad), son suffixe est _dragbox_title.

function bpmh_notepad_dragbox_title(){
  ?>
  My NotePad !
  <?php
}

Ensuite, il y a la fonction qui permet d’ajouter la mini configuration du bpmh widget et qui se matérialise par le lien Configurer à droite du titre de la dragbox. Préfixe identique (bpmh_notepad) et suffixe _dragbox_config_link.

function bpmh_notepad_dragbox_config_link(){
   ?>             <a href="javascript:void(0)" onclick="alert('utilisons wp_ajax pour configurer!')">Configurer</a>
   <?php
}

Dans BP My Home, la page « Mes Réglages » dont le slug est my-settings permet de laisser au membre le choix d’utiliser ou non un bpmh widget parmi ceux activés par l’Admin du réseau/blog. Aussi pour l’aider à faire son choix : rien de tel qu’une petite vignette. C’est l’objet de la fonction préfixe[bpmh_notepad]_user_settings.

/* idéalement une image de 100px x 100px */ function bpmh_notepad_user_settings() {
   ?><img src="chemin/vers/image/screenshot.png"/><?php
}

Enfin et c’est la plus importante : la fonction qui va être appelée pour charger le contenu du bpmh widget : préfixe[bpmh_notepad]_widget_display.

function bpmh_notepad_widget_display() {
   $user = wp_get_current_user();
   $notes_in_db = nl2br( get_user_meta(
$user->id, 'bpmh_notepad_notes', true) );
   ?>
   <div id="notepad-content">
     <div class="bpmh-notepad-text"><?php echo $notes_in_db;?></div>
   </div>
   <?php
}

Comme vous pouvez le constater, j’utilise les user_meta pour stocker les données. A ce jour lors de l’activation d’un widget, je ne propose pas de ‘activation_hook’ pour éventuellement créer des tables spécifiques. Par ailleurs, il s’agit pour le moment de déposer sur le serveur le dossier du bpmh widget dans le répertoire /wp-content/plugins/bp-my-home/widgets. Très prochainement, je ferais un upgrade du plugin pour permettre d’uploader un fichier zip depuis le back office de BP My Home (BPMH Manager) et sur activation du widget il sera possible d’automatiser la création de tables…

4/ Activez !

Après avoir éventuellement dézippé le widget (si par exemple vous téléchargez le zip de bpmh-notepad), puis copié le répertoire dans celui des widgets de l’extension, il ne reste plus qu’à se rendre dans BPMH Manager pour activer et rendre disponible le widget aux membres 😉 .

Admin des BPMH Widgets

Enfin pour finir, je vous invite à jeter un oeil sur cette ressource du codex qui présente wp_ajax, ça vous permettra de mieux comprendre notamment les appels ajax de bpmh-notepad. Et s’agissant de ce dernier widget, merci à Mika Tuupola pour son travail sur jeditable qui m’a permis de gagner un temps fou dans sa conception 🙂 .

8 réponses à “Dessines moi un bpmh widget!”

  1. Avatar de DC
    DC

    Thanks again. It’s really great that you’ve documented this so well and it really helps, especially someone like myself who is not a programmer but a web designer/coder.

    I’ll give your examples a try.

    Another thing I wanted to report is that I cannot get the divs to drag. I tried it on Mac Chrome, FF, Safari and Windows Chrome and FF.

    Any suggestions?

    Thanks,

    DC

    1. Avatar de imath

      This is weird. Normally, to drag a box you just have to click on the header of the box and while still clicked move the box. So far, i only saw trouble with Internet Explorer. I’ve checked on FF/chrome and Safari on Win and Mac and there were not such an issue.. Can you put the link to your website to check if a javascript creates a conflict ?

  2. Avatar de lsm

    Bonjour imath,
    çà a l’air vraiment bien mais désolé c’est trop pointu pour moi 😉
    Peut-on récupérer simplement les widgets habituels de WPMU (derniers articles, dernière activité, messages des forums, membres, blogs, etc) pour en faire des widget BPMH ? a+

  3. Avatar de Georglob

    Bonjour,

    Je t’ai dessiné un joli Widget BPMH permettant d’afficher les derniers articles d’un blog.
    Rien de bien compliqué mais ça me semblait important d’avoir accès rapidement à ça.
    N’hésites pas à t’en servir si tu le souhaites, ou à me faire quelques critiques.
    le lien : http://glob.bargeo.fr/fr/web/wordpress/un-widget-lasts-posts-pour-le-plugin-bp-my-home-de-budypress/

    Bonne journée !

    PS : j’aime beaucoup ce que vous faites 😉

    1. Avatar de imath

      Hello @Georglob,

      Je viens de voir ton tweet et me suis empressé de lire ton article, c génial !! Si ça ne te dérange pas, j’aimerai l’inclure dans la prochaine version de bp my home. T’es ok ?

      Et merci pour le PS : ça fait super plaisir étant donnée ma période compliquée au taf 😉

  4. Avatar de Georglob

    Salut Imath,

    Pas de souci pour t’approprier mon widget, avec plaisir. Il est probable qu’il évolue un peu mais je te tiendrai au courant.
    J’en ai deux autres dans les cartons, je te dirais aussi quand je les sortirai.

    Juste deux petites remarques sur ton plugin, vu que tu parles d’une nouvelle version :
    La localisation des widget est-elle prévue ou faut-il modifier tes .po .mo du plugin lui-même ? C’est l’impression que j’ai eu, et si c’est le cas, ce serait peut-être à revoir, de manière à ce que chaque développeur de widget puisse le faire de manière plus indépendante du plugin 😉

    Sinon, pour la redirection vers BPMH quand on coche la case pour en faire sa home par défaut, tu n’as pas prévu qu’un blog ne soit pas forcément à la « racine » d’un NDD. dans le cas d’un « http://monsite.fr/monblog » ca ne fonctionne pas. Il faudrait faire la comparaison entre l’url complète et le get_bloginfo(‘url’).

    Voilà… 😉

    1. Avatar de imath

      Salut @georglob,

      Effectivement la localisation est à revoir, car actuellement elle se situe effectivement dans le plugin principal.

      Je dois également revoir le répertoire de stockage des widgets car à chaque upgrade du plugin, les widgets rajoutés par l’utilisateur sont effacés.

      Il y a également un autre problème sur la fonctionnalité « make my home my home » : j’ai constaté que si accueil classique = une page statique et que le template de cette page contient une ligne vide après get_header, cela ne fonctionnait pas (header allready sent!).

      Fais moi signe qd tes widgets sortiront des cartons 😉

      A+