Accueil » Tous » Développement » WordPress » Créer et gérer son extension WordPress
Dans ce grand tutoriel, je vais vous expliquer comment créer et gérer son extension Wordpress. 

Créer et gérer son extension WordPress

wordpress-plugin

Dans ce grand tutoriel, je vais vous expliquer comment créer et gérer son extension WordPress.

 

 

Créer une extension WordPress (aussi appelé Plugin en Anglais) est totalement gratuit et peut être proposé aux utilisateurs de ce CMS gratuitement dans la gallerie Plugin Directory. Vous devez compter 2 à 3 heures de programmation pour une extension basique.

Pour héberger votre extension, vous devrez passer par un système de gestion de versions appelé Subversion (SVN en abrégé). Ce système permet de tenir à jour des fichiers et modifier les versions pour ne pas se perdre. Nous verrons que WordPress nous propose 3 répertoires différent (trunk, tags, et branches) et je vous expliquerais quels sont leur utilité.

Je vous conseil avant de continuer, de créer un blog Laboratoire pour programmer votre ou vos extension(s) afin de ne pas gêner l’utilisation du blog par vos lecteurs. Vous pouvez créer ce blog laboratoire en local hébergé avec EasyPHP.

 

L’idée de départ

Pour commencer, vous devez avoir une idée d’extension à créer, c’est primordiale pour pouvoir continuer.
Dans ce tutoriel, j’ai choisis de programmer une extension qui affiche aléatoirement dans le panneau d’administration de WordPress la traduction de Bonjour dans plus de 140 langues différentes (vous allez voir, c’est pas si long que ça).

Cette extension est déjà disponible sur WordPress. Vous pouvez lire cet article pour davantage d’explication » http://pirmax.fr/2011/05/24/plugin-wordpress-bonjour-traduction/

 

Premier fichier (index.php)

Commencez par vous rendre dans le répertoire wp-content/plugins/ de votre blog WordPress. Créez ensuite un dossier appelé bonjour-traduction (j’ai repris le même nom que pour mon extension). Ouvrez ce dossier et créez un fichier index.php.

Dans ce fichier index.php, nous allons y placer certaines informations nécessaire au moteur de recherche d’extension WordPress par exemple ainsi que les informations qui s’afficheront sur la page de vos extensions installées.

Ces quelques lignes sont les informations nécessaire à WordPress pour reconnaître votre extension.

La première ligne Plugin Name est le nom donné à votre extension. La deuxième ligne Plugin URI est l’URL du site de l’extension, vous pouvez choisir une URL vers l’article qui le présente par exemple. La troisième ligne Description décrit l’extension, vous pouvez ajouter du HTML pour créer des liens, etc… La quatrième ligne Author doit contenir votre pseudonyme ou bien tout simplement votre prénom et votre nom. La cinquième ligne Version peut être sous plusieurs formes (1.0, v1.0, version 1.0, 1.0.0, 1.08.74.95.1, etc…), cette ligne est importante lorsqu’on veut prévenir WordPress et les utilisateurs de votre extension d’une nouvelle version. Pour terminer, la ligne Author URI est l’adresse de votre blog ou de votre site.

Vous avez surement remarqué ces mots bizarres comme différentes ou basé, é est un é en HTML, en effet, WordPress n’aime pas les caractères spéciaux, vous devez donc les remplacer par leur code ISO que vous trouverez sur cette page : http://www.commentcamarche.net/contents/html/htmlcarac.php3

Nous avons présenté l’extension à WordPress, il reste plus qu’à commencer la programmation de l’extension. Rappelez-vous que nous avons choisis une extension qui affiche la traduction du mot Bonjour dans plus de 140 langues différentes et aléatoirement dans votre panneau d’administration WordPress.

Pour une compatibilité optimale de votre extension, je vous conseil de nommer toutes vos fonctions PHP et JavaScript par un nom que nulle autres extensions utilisera, par exemple, la première fonction PHP que nous allons créer va permettre de générer aléatoirement une traduction du mot Bonjour, nous appelleront cette extension bonjour_traduction_get_translation(), notez que j’ai utilisé le nom de mon extension suivit du nom de l’action qu’aura la fonction pour nommer la fonction (compliqué tout ça, en faite non!).

Voici ci-dessous la fonction PHP bonjour_traduction_get_translation() :

Je ne vais pas vous expliquer toutes les fonctions PHP utilisées dans ce code (mon tutoriel n’est pas dans cet intérêt là), mais simplement vous conseiller de retourner votre valeur avec un return afin que WordPress ne panique pas en voyant un echo.

Nous allons continuer en étudiant la prochaine fonction que j’ai nommé bonjour_traduction_display(), en effet cette fonction va afficher la valeur retourner par notre fonction bonjour_traduction_get_translation() (vu ci-dessus).

Voici la fonction bonjour_traduction_display() :

Cette fonction doit être utilisée par WordPress, nous allons donc ajouter une fonction reconnue par le CMS, cette fonction est add_action() et comme son nom l’indique permet d’ajouter une action dans WordPress. Donc pour que WP affiche la phrase aléatoire, il faut utiliser cette fonction :

admin_notices est une action de référence que WordPress va interpréter dans le panneau d’administration du blog à côté de Options de l’écran et de Aide (deux onglets visibles en dessous du lien de déconnexion en haut à droite du panneau d’administration). Retrouvez d’autres actions de référence ici : http://codex.wordpress.org/Plugin_API/Action_Reference

La fonction ci-dessous va donc appeler la fonction
bonjour_traduction_display() et l’afficher via la fonction admin_notices.

Pour afficher le texte sur la droite (comme dans l’extension Hello Dolly), il faut utiliser une feuille de style CSS. Cette feuille de style va être affiché en haut du panneau d’administration toujours avec la fonction add_action() mais cette fois-ci en utilisant l’action de référence admin_head. Donc le code à utiliser sera :

bonjour_traduction_css est la fonction qui va être appelé pour la feuille de style. Voici la fonction bonjour_traduction_css :

#bonjour_traduction_text est l’ID de paragraphe qui va afficher la phrase aléatoire. Je ne tarde pas non plus sur cette fonction (bonjour_traduction_css()) car ce n’est toujours pas l’intérêt de ce tutoriel.

Nous avons terminé la programmation du fichier index.php de notre extension. Retrouvez toutes les fonctions et le code entier ici : http://fr.sourcepod.com/ezoneu31-4907

 

Second fichier (readme.txt)

Le second fichier doit s’appeler obligatoirement readme.txt et doit être obligatoirement présent dans votre extension, ce fichier sera utilisé par WordPress qui contiendra les informations nécessaire pour la gallerie Plugin Directory.

Dans ce fichier, vous pourrez retrouver un contenu similaire à celui-ci :

En première ligne, on retrouve Bonjour Traduction, le titre de notre extension.
Contributors est mon pseudonyme sur WordPress (pas le nom de l’auteur).
Donate link, c’est l’URL qui redirige le visiteur vers votre page de donation s’il clique sur le lien Donate to this plugin » dans la galerie des plugins.
Author URI est l’URL de mon blog.
Plugin URI est l’URL que WordPress vous a donner (ou va vous donner si vous n’avez pas encore fait la demande d’ajout dans la galerie, on verra ceci plus bas dans ce tutoriel).
Tags est une ligne qui doit contenir les mots-clefs pour la recherche de votre extension dans la galerie ou même sur les moteurs de recherche comme Google, Yahoo!, etc… Séparez-les par des virgules.
Requires at least est la version du CMS WordPress nécessaire à la bonne utilisation de votre extension.
Tested up to est la version la plus ancienne testée pour votre extension et qui affiche de bons résultats et sans erreurs.
Stable tag est une ligne dont je ne connais pas son utilité :).

Après cette ligne, le texte sera considérer comme une mini-description de 150 caractères maximum. N’oubliez pas de remplacer les caractères spéciaux HTML par leur code ISO : http://www.commentcamarche.net/contents/html/htmlcarac.php3

Après cette ligne == Description ==, tout ce qui est écrit sera considérer comme la description de votre extension. Vous pouvez y ajouter une mise en forme HTML comme des liens, du texte en gras, des liens de contact mailto, etc…

Aucun nombre de caractère n’est imposé pour la grande description de l’extension. Veillez simplement à utiliser une bonne mise en forme et espacer vos paragraphes afin que les utilisateurs ne soit pas perturber par un gros bloc de texte. Notez que c’est cette description qui sera lues par les chercheurs de plugins dans le moteur de recherche WordPress.

Après cette ligne == Installation ==, vous pouvez ajouter une explication pour l’installation de l’extension, le texte peut comprendre une mise en forme HTML avec par exemple une vidéo explicative et un grand tutoriel écrit, etc…

Cette ligne == Screenshots == est le début de la liste des captures d’écrans présentatrice de votre extension. Vos captures d’écrans doivent être placée dans le répertoire de votre extension et doivent toutes s’appeler screenshot-# où # est un chiffre, en général, la première image doit s’appeler screenshot-1, l’extension des images doivent être png, jpg, jpeg ou gif.

Dans le fichier readme.txt, vous n’avez pas besoin d’ajouter un code HTML pour afficher les images, il faut tout simplement ajouter le numéro de l’image suivit d’un point suivit de la description de l’image. Par exemple, si le fichier est screenshot-1.jpg, ajoutez après == Screenshots == : 1. Exemple d’affichage de la phrase aléatoire

Vous pouvez ajouter une deuxième capture d’écran, il faudra donc la nommée screenshot-2 avec une extension png, jpg, jpeg ou gif, etc…

La ligne == Changelog == est importante pour les utilisateurs qui aiment connaître les changements lors d’une mise à jour d’extension, ou qui aiment savoir les problèmes résolus, etc…
Ajoutez une ligne comme ceci : = Version 1.0 (23/05/2011) = puis en dessous la liste des problèmes résolus et/ou les nouveautés ajoutées : - Première version, encore une fois, n’oubliez pas de convertir les caractères spéciaux :)

Nous avons maintenant terminé pour l’écriture du fichier readme.txt. Vous pouvez le générer facilement à l’aide de ce service : http://sudarmuthu.com/wordpress/wp-readme

 

Proposition du plugin sur WordPress.org

Pour proposer votre plugin/extension sur WordPress, vous devez au préalable, l’avoir tester en local et sur votre site… ceci limitera les critiques des utilisateurs sur WordPress et la baisse de note de votre extension.

Pour faire cette proposition, rendez-vous ici : http://wordpress.org/extend/plugins/add/

Dans le champ Plugin Name, saisissez le nom de votre extension. Attention : ce nom sera utilisé pour créer votre espace SVN et sera utilisé pour vous répertorier dans la galerie WordPress (exemple: http://wordpress.org/extend/plugins/bonjour-traduction/). Le nom sera nettoyé, par exemple, si le nom de votre extension est J’aime les pommes de terre crue, le nom de votre extension dans l’URL deviendra j-aime-les-pommes-de-terre-crue.

Dans le champ Plugin Description, decrivez courtement votre extension. Sachez que cette description sera remplacé par celle utilisée dans le fichier readme.txt.

Ce n’est pas la peine de remplir le champ Plugin URL puisque nous allons utiliser le service SVN pour héberger les fichiers de notre extension.

Pour terminer, cliquez sur Send Post ».

Après la demande de proposition de votre extension sur WordPress.org, il faut compter environ 24h avant la création de votre emplacement SVN ou 12h à peine si c’est fait le soir.

Vous avez reçu un courrier électronique de ce genre ?

… alors vous pouvez continuer à lire :)

 

Hébergement de l’extension

Pour héberger les fichiers de l’extension, il va falloir les envoyer sur le serveur WordPress. Pour cela il faut utiliser un service qui s’appel le SVN, ces trois lettres sont l’abrévation de SubVersioN (pas plus compliqué que ça en à l’air).

Pour en savoir plus, le lien vers Wikipedia parlant du SVN est en bas de cet article.

Je vais donc séparer cette étape en 5 parties.

 

« Logiciels de SubVersioN

Il existe plusieurs logiciels de client subversion, en voici la liste :

» Retrouvez d’autres client subversion

Pour ce tutoriel, j’ai retenu le client subversion SmartSVN qui est le troisième que j’ai moi même testé et je trouve qu’il est irréprochable (gratuit mais Anglais).

Téléchargez-le et installez-le pour suivre ce tutoriel. Ne l’ouvrez pas après l’installation (on le fera plus tard).

 

« Configurer un espace pour votre extension sur votre ordinateur »

Il faut configurer un répertoire sur votre ordinateur qui va contenir les fichiers de votre extension. Dans ce répertoire, on va retrouver 3 autres répertoires :

  • branches » On va retrouver ici, une zone de travail différentes du trunk, qui permettra de faire évoluer des versions en parallèle du trunk. Par exemple lorsque l’on doit effectuer une correction sur la version 0.6, alors que l’on travail déjà sur la version 0.7, on pourra placer une copie de tags/0.6 dans branches/0.6.x et une fois le travail terminé on pourra créer un tags/0.6.1 basé sur branches/0.6.x.
  • tags » Dans ce répertoire on va placer les versions figer du projet, des snapshots de version stable. Par exemple la version 1.0, puis 1.1, etc… Il faut considéré ce répertoire comme étant en lecture seule. Une sorte d’historique des différents versions.
  • trunk » C’est le répertoire principal, celui dans lequel on va travailler pour faire évoluer le projet (ici votre extension).

Créez donc par exemple dans C:\, un répertoire nommé WordPress Plugins, dans ce répertoire, créez-en un autre que vous appelerez par exemple bonjour-traduction (j’ai repris le nom de mon extension). Dans ce nouveau répertoire, créez les trois dossiers ci-dessous (branches, tags, trunk). Dans le dossier trunk, placez les fichiers de votre extension (placez directement la racine de votre extension).

Donc si je récapitule, le dossier principal de votre extension WordPress pour le SVN est ici C:\Wordpress Plugins\bonjour-traduction\

 

« Configurer l’espace SVN avec SmartSVN »

Ouvrez maintenant le client subversion SmartSVN.

La première fois que vous ouvrez le client subversion SmartSVN, une fenêtre vous propose quelques options :

Par défaut, l’option Check out project from repository est sélectionnée, si ce n’est pas déjà fait, faites-le puis cliquez sur OK.

A présent, deux choix s’offre à vous :

  • Detailled Checkout
  • Quick Checkout

Sélectionnez l’option Quick Checkout. Nous avons maintenant besoin de deux informations : l’URL de votre espace SVN et le répertoire local de votre extension (je vous conseil de créer un répertoire exprès pour le SVN). Pour avoir le première information, vous devez la récupérer dans le courrier électronique que vous avez reçu. Dans mon exemple, le lien que j’ai reçu est : http://plugins.svn.wordpress.org/bonjour-traduction/. Je vais donc l’utiliser pour ce tutoriel.

De votre côté, copiez l’URL que vous avez reçu dans le champ URL. Ensuite cliquez sur le bouton Choose… en regard au champ Local Directory, puis sélectionnez le dossier contenant vos répertoires trunk, branches et tags.

Voici ce que va donner le remplissage :

Une fois que vous avez configuré les champs URL et Local Directory, cliquez sur Next. Un récapitulatif s’affichera :

Votre espace SVN pour votre extension est maintenant créé. Vous êtes maintenant prêt à héberger vos fichiers sur le serveur WordPress.

 

« Ajouter des nouveaux fichiers »

Comme c’est la première fois que vous hébergez les fichiers de votre extension, il faut les ajouter. Pour cela il faut utiliser la commande add (ne vous inquiétez pas, il n’y a pas de commande Linux, Windows, etc…). Cette commande (add) déclare l’ajout d’une nouvelle ressource pour le prochain commit. commit enregistre les modifications locales dans le dépôt créant ainsi une nouvelle version.

Le dépôt est l’endroit où vos fichiers seront enregistrés. Ce notre cas, le dépôt est : http://plugins.svn.wordpress.org/bonjour-traduction/.

Normalement, si vos fichiers sont présent dans le dossier trunk, ils doivent apparaître dans la liste des fichiers (Files) dans la partie droite de la fenêtre. Dans la partie gauche, vous pouvez voir l’arborescence de votre dépôt.

Comme je le disais plus haut, pour ajouter un fichier, il faut utiliser la commande add. Sélectionnez donc les fichiers que vous voulez ajouter et cliquez sur le bouton Add. Le logo de chaque fichier changera et ils seront prêt à être envoyé.

Une fois que tous les fichiers sont prêt à être envoyé, resélectionnez tous les fichiers que vous voulez envoyé et cliquez sur le logo Update. Laissez l’option HEAD sélectionnée puis cliquez sur le bouton Update. Les fichiers sélectionnés seront alors “revisés” et pourront être envoyés.

Pour les envoyer, sélectionnez toujours les fichiers que vous voulez envoyer et cliquez sur le bouton Commit.

Une fenêtre s’ouvrira en répertoriant les fichiers que vous avez révisé et qui vont être ajouté sur le dépôt. Cliquez alors sur le bouton Commit une fois que vous avez coché les fichiers que vous voulez envoyer. Les fichiers seront dans un premier temps ajouté (Added), puis envoyé. Une fois que tout s’est bien passé, un petit logo vert sera affiché en bas de la fenêtre.

Vous avez maintenant terminé l’envoi de votre extension. Vous devez attendre quelques minutes (en général ce n’est pas long : ~5 min) avant que votre extension soit correctement prise en compte par WordPress. Votre fichier readme.txt sera lu par le système WordPress et reprendra les informations pour les afficher sur cette page par exemple : http://wordpress.org/extend/plugins/bonjour-traduction/

 

« Mettre à jour un fichier et avertir
les utilisateurs d’une nouvelle version »

Si vous changez un mot dans un fichier, ceci peut constituer une nouvelle version pour votre extension. C’est pour cela qu’il faut prévenir les utilisateurs de votre extension qu’une nouvelle version est disponible, même si le changement est minime.

Pour mettre à jour votre extension sur WordPress.org, vous devez l’avoir re-testé pour éviter tout problème, bref je passe les explications :)

Commencez par éditer le fichier readme.txt et changez la description dans le cas où c’est utile pour les nouveautés.
Dans la partie == Changelog ==, ajoutez une nouvelle ligne, par exemple : = Version 1.1 (26/05/2011) =. Une fois que vous l’avez fait, ajoutez dans cette partie une liste journal des modifications (problèmes résolus, nouveautés, etc…). Enregistrez le fichier readme.txt.

Éditez à présent le fichier principal de votre extension, dans mon exemple, c’est le fichier index.php puis changez la description si nécessaire.
Le plus important est de changer la ligne Version car WordPress va être tenu au courant de votre nouvelle version et avertira les utilisateurs de votre extension. Éditez-la par la nouvelle version (1.1 par exemple). Enregistrez le fichier index.php.

Retournez maintenant le client subversion SmartSVN.
Il faut à présent réviser les fichiers modifiés. Notez que l’état local (Local State) de vos fichiers est devenu Modified, si ce n’est pas le cas, vérifiez que vos fichiers ont été enregistré et sont bien ceux dans le dépôt SVN local.

Pour réviser les fichiers modifiés, sélectionnez ceux dont le Local State est Modified. Cliquez sur Update, laissez l’option HEAD et cliquez sur le bouton Update, une fois que vous l’avez fait, cliquez sur le bouton Commit. Seul les fichiers dont le Local State est Modified apparaissent dans la liste, sélectionnez ceux que vous voulez renvoyer puis cliquez sur le bouton Commit.

Voilà, votre extension est maintenant à jour et les utilisateurs vont être prévenu d’une nouvelle version, ils pourront donc la mettre à jour s’ils le veulent.

 

Sources et autres informations

A propos de Pirmax Le Poulpe Rouge

Amoureux de la technologie, je partage l'actualité high-tech et informatique (Apple, Twitter, Facebook, etc.) sur le média mature qu'est aujourd'hui : l'Internet. Suivez-moi sur Twitter @pirmax.
  • Pingback: Développement Site Web | Blue-Bears

  • Pingback: Créer un Widget Wordpress | Pirmax.fr

  • http://www.evpatoria-moria.com/ Anonyme
  • http://www.creativejuiz.fr/ Geoffrey

    Bonsoir Maxence,

    Merci pour ce tutoriel qui m’a permis d’y voir plus clair sur le processus de mise en ligne d’un plugin WordPress.

    Pour information, en créant manuellement les trois dossiers (branches, tags, trunk), j’ai eu des soucis pour la mise en ligne du contenu de trunk.
    J’ai comme l’impression que la présence préalable des dossiers à bloqué SmartSVN dans l’attribution de version.

    En supprimant tout et en laissant le dossier racine vide (c:/WordPress Plugins/nom-du-plugin/) lors de la création du “projet SVN”, les trois dossiers sont créés automatiquement.
    Ensuite il suffit de placer le contenu du plugin dans “trunk” et effectuer les étapes d’attribution de version (Add + Update) et de mise en ligne (Commit).

    Et tout roule.

    Merci encore, et bonne continuation,
    Geoffrey.

    PS : le tabindex sur le champ “site web” est un peu embêtant, j’ai dû cliqué pour pouvoir le renseigner, et je me suis retrouvé tout en haut de la page une fois que j’ai appuyé sur Tab.

    • http://www.maxence-blog.fr/ Maxence

      Merci pour votre commentaire :)

      Pour info, je pense que c’est le thème du blog qui pose problème au tabindex. Je regarderais un de ces quatre.

      Amicalement,
      Maxence

  • http://doctorgotac.net46.net/ gotgot1995

    Bonjour, j’aimerai créer une extension (car jusqu’à présnet je n’ai rien trouvé en recherchant dans wordpress) qui pourrait m’afficher ,dans la barre d’admin en haut, une petite notification en rouge, comme sur facebook (quand il y a un nouveau post et/ou un nouveau commentaire) ! Je m’explique mieux ICI :
    http://www.wordpress-fr.net/support/viewtopic.php?id=58348
    Je me dit bien que pour que ça fonctionne, il faudrait du javascript pour maintenir une connection avec la base de donnée ou un rafraichissement de donnée (uniquement pour le plugin)…
    Bref, j’ai besoin d’aide !
    Merci d’avance,
    Gautier

  • Pingback: Comment développer correctement une extension WordPress | wordbook

  • Pingback: Créer un Widget Wordpress | Le Blog de Maxence

  • fred91

    Bonsoir j’ai suivi votre tutoriel qui est très bien expliquer mais quant je fait commit pour finaliser ca m’ouvre une fenêtre ” an error occurred while processing an svn command.

    commit failed(details fllow) : MKACTIVITY of /svn/act/a7e……..: 403 forbidden (http://plugins.svn.wordpress.org

    merci d’avance

    • http://www.maxence-blog.fr/ Maxence

      Bonjour Fred,

      Avez-vous bien sélectionné le bons fichiers ajoutés, et revus ?

      Pour la revue, c’est l’UPDATE comme expliqué dans l’article.

      Ensuite, cliquez sur COMMIT :)

      Merci pour le compliment, mais l’affichage et la présentation n’est pas très jolie, en effet, j’ai changé le thème du blog et le rendu n’est pas le même :(

      Maxence

      • http://www.naxialis.com fred91

        merci de repondre aussi vite maxence j’ai bien refais toute la manipulation
        mais dès le depart j’ai un message “failed to add directory ‘trunk’ an unversioned directory of the same name already exits”

        je trouve le thème de votre site sympas, ont peu pas tous faire moi c’ets pareille pour mon site :)

        • http://www.maxence-blog.fr/ Maxence

          Euh, avez-vous un bouton Fix qui se met en surbrillance lorsque vous sélectionnez vos fichiers ? Si oui, cliquez sur le bouton Fix et sélectionnez le mode Unversioned, ça devrait fonctionner.

          Ou bien alors, faites un un delete de tous les fichiers (en SVN seulement et pas SVN + local)… ensuite un Commit et puis recommencez.

          Avez-vous Skype ? (si oui, rose.maxence est mon pseudo Skype).

          Maxence

          • http://www.naxialis.com fred91

            Merci Maxence pour vos explications et votre tutoriel maintenant tous fonctionne très bien . ;)

          • http://www.maxence-blog.fr/ Maxence

            De rien Fred, je suis ravis de vous avoir aidé :)

            Bonne journée.

            Maxence

  • ChocRomain

    Hé ben bon boulot, bien expliquer et tout franchement chapeau ^^continue comme sa :)

    • http://www.maxence-blog.fr/ pirmax

      @ChocRomain Merci beaucoup Romain ;)

      Maxence