Créer un plugin pour PluXml 5.1

Classé dans PluXml

pluginComme promis, je me suis penché sur le code du CMS et je viens vous livrer ma méthode pour réaliser simplement un plugin pour PluXml. J'utiliserai pour cela, l'excellent zoombox de Grafikart . J'espère qu'il ne m'en voudra pas...

Edit : depuis la rédaction de cet article, un guide du développeur est sorti dans les ressources du site de pluxml. A consulter donc...

Prérequis

Comme son nom l'indique, le dossier plugins/ de PluXml contient l'ensemble des plugins disponibles. Afin de les faire fonctionner, il est nécessaire que le nom du sous-dossier contenant chaque plugin ne comporte ni accent, ni majuscule, ni chiffre, ni tiret, ni underscore. Le sous-dossier pour la zoombox 2.0 se nommera donc tout simplement zoombox/.

Les fichiers nécessaires

Afin de faire fonctionner le plugin, il est nécessaire d'ajouter dans le dossier zoombox/, trois fichiers que vous allez créer :

  •     le fichier infos.xml
  •     le fichier zoombox.php
  •     le fichier icon.png

Le fichier infos.xml

Le fichier infos.xml est nécessaire pour afficher le plugin au niveau de l'administration du site. Il contient les informations décrivant le plugin. Sa structure est la suivante :

<?xml version="1.0" encoding="UTF-8"?>
<document>
 <title><![CDATA[zoombox 2.0]]></title>
 <author><![CDATA[Grafikart]]></author>
 <version>1.0</version>
 <date>18/07/2011</date>
 <site>http://www.grafikart.fr/zoombox</site>
 <description><![CDATA[Zoombox is an easy to use jQuery modul that allows you to display images, html content and multi media content with a "lightbox" that floats over your web page.]]></description>
 <requirements><![CDATA[jQuery plugin]]></requirements>
</document>

Cela se passe de commentaire tellement il est simple à comprendre.

Le fichier zoombox.php

Afin d'activer ou de désactiver le plugin, il est nécessaire de créer une classe qui va étendre les fonctionnalités de la classe native à PluXml appelée plxPlugins. Cette nouvelle classe doit porter le nom du fichier qui la contient. Dans notre cas, nous l'appellerons donc "zoombox".
Cette classe contient deux méthodes principales :

  •     la méthode __construct() qui va faire appel à la méthode __construct() de plxPlugins et qui va permettre la gestion du plugin
  •     la méthode addZoombox() qui va gérer l'affichage des liens (appelés hooks) vers les fichiers du plugin

La méthode __construct() fait appel à la méthode addHook() de plxPlugins qui permet d'afficher les fichiers du plugin soit dans l'entête de la page soit dans le pied de la page (avant la balise body) et ce dans la partie publique et/ou dans la partie privée du site.

Cette fonction prend deux paramètres :

  •     le lieu d'affichage du hook (entête/pied de page, et partie privée/publique). Au choix : AdminTopEndHead, AdminFootEndBody, ThemeEndHead ou ThemeEndFoot
  •     la fonction d'ajout du plugin (ici "addZoombox")

Au final, le fichier est le suivant :

<?php
/**
 * Plugin zoombox
 *
 * @package PLX
 * @version 1.0
 * @date 18/07/2011
 * @author Stephane F.
 * @author Maguire Cyril
 **/
class zoombox extends plxPlugin {

 /**
  * Constructeur de la classe zoombox
  *
  * @param default_lang langue par défaut utilisée par PluXml
  * @return null
  * @author Maguire Cyril
  **/
 public function __construct($default_lang) {

  # Appel du constructeur de la classe plxPlugin (obligatoire)
  parent::__construct($default_lang);
  
  # Déclarations des hooks
  $this->addHook('ThemeEndHead', 'addZoombox');
  $this->addHook('AdminTopEndHead', 'addZoombox');  
 }

 /**
  * Méthode qui ajoute l'insertion du fichier javascript de Zoombox dans la partie <head> du site
  *
  * @return stdio
  * @author Maguire Cyril
  **/ 
 public function addZoombox() {
  echo "\t".'<link rel="stylesheet" type="text/css" href="http://www.ecyseo.net/'.PLX_PLUGINS.'zoombox/zoombox.css" />'."\n";
  echo "\t".'<script type="text/javascript" src="http://www.ecyseo.net/'.PLX_PLUGINS.'zoombox/zoombox.js"></script>'."\n";
  echo "\t".'<script type="text/javascript" >'."\n";
      echo "\t\t".'jQuery(function($){'."\n";
      echo "\t\t\t".'$(\'a.zoombox\').zoombox();'."\n";
      echo "\t\t\t".'// You can also use specific options'."\n";
      echo "\t\t\t".'$(\'a.zoombox\').zoombox({'."\n";
      echo "\t\t\t\t".'theme       : \'zoombox\',        //available themes : zoombox,lightbox, prettyphoto, darkprettyphoto, simple'."\n";
      echo "\t\t\t\t".'opacity     : 0.8,              // Black overlay opacity'."\n";
      echo "\t\t\t\t".'duration    : 800,              // Animation duration'."\n";
      echo "\t\t\t\t".'animation   : true,             // Do we have to animate the box ?'."\n";
      echo "\t\t\t\t".'width       : 1000,              // Default width'."\n";
      echo "\t\t\t\t".'height      : 600,              // Default height'."\n";
      echo "\t\t\t\t".'gallery     : true,             // Allow gallery thumb view'."\n";
      echo "\t\t\t\t".'autoplay : false                // Autoplay for video'."\n";
      echo "\t\t\t".'});'."\n";
      echo "\t\t".'});'."\n";
      echo "\t".'</script>'."\n";
 }

}
?>

Bien sûr, ceci est la structure de base. D'autres méthodes peuvent être ajoutées. A vous de les écrire.

 

Le fichier icon.png

Il s'agit de l'image qui permettra d'illustrer le plugin dans la partie administration du site. Idéalement, elle doit avoir pour dimensions 48x48 pixels.

Cette image est optionnelle : le CMS attribue une icône générique à chaque plugin qui ne contient pas ce fichier.

Voilà. J'espère que ce petit tuto vous sera utile. Et comme je suis trop bon, je vous laisse à télécharger une petite archive contenant le plugin prêt à l'emploi .

N'hésitez pas à laisser vos commentaires !
NB : icone de cet article disponible auprès de http://raindropmemory.deviantart.com/ ⇒

3 commentaires

  1. bonjour,
    as-tu mis une demo du résultat sur le site ? je ne trouve pas ... j'aime bien voir, "de visu", pour me faire une idée
    @mitiés

Écrire un commentaire

*


*

 Se rappeler de moi sur ce site

*
Quelle est la cinquième lettre du mot tdwyxs ? :