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.