Dessines moi un bpmh widget!

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 commentaires sur “Dessines moi un bpmh widget!

  1. 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. 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. 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. 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. 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. 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. 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+

Les commentaires sont fermés.