imath

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.

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 😉 .

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 🙂 .