J’avais envie de me lancer dans le développement d’un petit plugin pour WordPress sur mon Mac.
Je n’ai aucune expérience en développement web et n’avais aucune idée de quels outils j’avais besoin, ni de la façon de travailler.
Par contre, je tenais absolument à utiliser un gestionnaire de versions, en l’occurrence Subversion, qui est celui que je connais le mieux.
Voici un descriptif de ce que j’ai mis en place et utilisé.
Installation de MAMP
Il a été rapidement clair que pour pouvoir développer confortablement un plugin pour WordPress, il faut une installation locale d’une version (voire plusieurs) de WordPress.
Pour ce faire, il suffit d’installer MAMP, qui intègre toutes les applications nécessaires au bon fonctionnement de WordPress : Apache, MySql, PHP, etc. Il existe une déclinaison pour Windows (WAMP) et pour Linux (LAMP).
MAMP peut être téléchargé à l’adresse suivante : http://www.mamp.info/en/mamp/index.html
Il suffit ensuite de démarrer le paquet d’installation. Celle-ci se déroule sans encombre.
Aller dans /Applications/MAMP/ et démarrer MAMP. Comme MAMP PRO est installé, il fait la demande suivante :
Décocher et cliquer Lancer MAMP. Eventuellement, désinstaller MAMP PRO en cochant toutes les cases du désinstalleur.
Après le démarrage, MAMP affiche l’état des serveurs, qui sont inactifs.
Cliquer sur Démarrer les serveurs. Normalement, ils s’activent et passent au vert.
L’activation des serveurs provoque l’affichage dans votre navigateur par défaut de l’URL http://localhost:8888/MAMP/?language=French.
À partir de cette page, il est possible d’administrer les différents outils qui composent notre serveur web local.
Création d’une base de données pour WordPress
Pour fonctionner, WordPress a besoin d’une base de données MySQL, qui sera ensuite configurée et remplie par ses soins.
Utiliser l’utilitaire phpMyAdmin, accessible par le navigateur web, sur l’onglet phpMyAdmin.
Il faut activer l’onglet Bases de données, puis donner un nom à la nouvelle base de données qui sera utilisée par WordPress (par exemple wptest). Cliquer ensuite sur le bouton Créer.
Il n’y a rien d’autre à faire !
Installation locale de WordPress
Télécharger WordPress sur le site http://fr.wordpress.org.
Suivre les instructions indiquées :
- Créer un répertoire wordpress dans /Applications/MAMP/htdocs/ et y copier les fichiers téléchargés.
- Renommer wp-config-sample.php en wp-config.php
- Éditer le fichier wp-config.php afin d’y configurer le nom de la base de données WordPress ainsi que l’identifiant à utiliser :
define('DB_NAME', 'wptest');
define('DB_USER', 'root');
define('DB_PASSWORD', 'root'); - Remplacer “put your unique phrase here” par votre propre phrase.
- Comme notre installation locale de WordPress est destinée au développement, activer le mode debug : define('WP_DEBUG', true);
- Aller à la page localhost:8888/wordpress/. La configuration automatique commence.
- Si tout se passe bien, WordPress est désormais complètement utilisable.
Installer l’IDE
On m’a conseillé, pour développer en PHP, d’utiliser Aptana Studio. Cet IDE, basé sur Eclipse, permet d’installer ensuite un bundle spécifique à WordPress.
Installation de Git
Pour installer ce bundle, il faut disposer d’un client Git. Les binaires pour Mac sont téléchargeables à l’adresse http://git-scm.com/download/mac.
Ensuite, installer le paquet git-1.8.2.1-intel-universal-snow-leopard.pkg. Le script setup git PATH for non-terminals programs.sh n’a pas besoin d’être exécuté.
Il faut également s’assurer que le port TCP 9418 soit ouvert.
Installation de Aptana Studio
Télécharger Aptana Studio à l’adresse http://www.aptana.com/products/studio3/download. Si vous possédez déjà Eclipse, vous pouvez installer Aptana sous forme d’un plugin. Pour ma part, j’ai préféré télécharger la version autonome d’Aptana Studio.
L’installation ne pose aucun problème.
Installation du bundle WordPress
Pour installer le bundle WordPress (ou d’autres) d’Aptana Studio, aller dans le menu Commands->Bundle Developement->Install Bundle. Choisir WordPress dans la liste.
Installation d’un client Subversion
J’ai choisi d’utiliser SmartSVN comme client Subversion pour Mac. La version gratuite me permet de faire tout ce dont j’ai besoin.
Créer un projet de développement
Emplacement du bac à sable
J’ai choisi de créer un dépôt Subversion par plugin.
Je ne voulais pas placer mon bac à sable (ou autrement dit, l’emplacement de ma copie locale du dépôt Subversion de mon projet) directement dans le répertoire plugins de mon installation locale de WordPress, bien que plusieurs personnes font ça. Il y a principalement deux raisons à ce choix :
- Le projet de développement contient des fichiers qui n’ont pas a figurer dans le répertoire des plugins WordPress. Je pense par exemple aux fichiers de configuration du projet qu’Aptana génère, aux fichiers traitant de la documentation interne ainsi qu’aux éventuels fichiers de ressource.
- Si j’ai plusieurs installations locales de WordPress, par exemple avec différentes versions de WordPress pour les tests, je veux éviter de faire un checkout du dépôt dans chaque répertoire plugins de chaque installation locale, car ça deviendrait vite ingérable.
La solution que j’ai trouvée pour tenir compte de ces contraintes est de créer des symlink (les alias sont plus faciles à gérer depuis le Finder, mais ils ne sont malheureusement pas transparents aux yeux de WordPress). J’ai donc, dans le répertoire plugins de mon installation locale de WordPress, créé avec le Terminal un lien sur le répertoire de développement de mon plugin :
ln -s ~/Documents/Aptana\ Studio\ 3\ Workspace/MonPlugin /Applications/MAMP/htdocs/wordpress/wp-content/plugins/monplugin
Ainsi, notre installation locale de WordPress (ou nos installations s’il y en a plusieurs) utilise(nt) toujours la toute dernière version du plugin, ce qui rend les tests très aisés.
Remarque : pour que l’utilisation des symlinks fonctionne correctement, apache doit être configuré (dans le fichier httpd.conf) pour les accepter (option FollowSymLinks), ce qui est le cas par défaut, lorsqu’il est installé avec MAMP, pour le répertoire /Applications/MAMP/htdocs/.
Auto-completion avec l’API WordPress
Il reste un problème, découlant de cette solution, à régler : Comme notre projet est isolé des fichiers de WordPress, Aptana ne va pas être en mesure de faire de la completion automatique avec les fonctions de l’API WordPress.
Pour corriger ce problème, il suffit d’ajouter le chemin de notre installation locale de WordPress au chemins de construction de PHP (PHP Buildpath).
Dans Aptana Studio, ouvrir le menu Project->Properties. Choisir dans la zone latérale gauche la propriété PHP Buildpath, sélectionner l’onglet External Directories, puis cliquer sur Add .... Il ne reste plus qu’à sélectionner le répertoire local de l’installation WordPress (par exemple /Applications/MAMP/htdocs/wordpress) et le tour est joué.
Le bug des symlink
Tant que le plugin WordPress que vous développez n’est constitué que d’un fichier, tout va bien.
Par contre, si votre plugin doit faire appel à d’autres fichiers, par exemple pour ajouter une feuille de style spécifique, l’utilisation de symlinks pose problème car WordPress ne les gère pas correctement.
Beaucoup de développeurs sont très ennuyés par cette situation et espèrent que la version 3.6 de WordPress intègre un correctif. Le ticket #16953 permet de suivre l’avancement de ce problème.
Dans l’intervalle, un petit patch très pratique créé par Kaspars Dambis doit être ajouté dans le code du plugin. C’est un moindre mal comparé à l’énorme avantage que l’on a d’utiliser les symlinks.
// ---- Patch pour autoriser le symlinking avec ce plugin.
// Patch créé par Kaspars Dambis (http://konstruktors.com/blog/wordpress/3635-plugins-via-symlinks/)
// Le bug #16953 traite de cette problématique : http://core.trac.wordpress.org/ticket/16953
// Avec un peu de chance, une solution sera à disposition dans le version 3.6 de WordPress.
add_filter( 'plugins_url', 'your_plugin_symlink_fix', 10, 3 );
function your_plugin_symlink_fix( $url, $path, $plugin ) {
if ( strstr( $plugin, basename(__FILE__) ) )
return str_replace( dirname(__FILE__), '/' . basename( dirname( $plugin ) ), $url );
return $url;
}
Dans le cas cité plus haut où une feuille de style doit être chargée, il suffira de placer le fichier css dans le répertoire du plugin…
…et de la charger selon la méthode traditionnelle :
// Chargement de la feuille de style spécifique à ce plugin
if ( ! function_exists( 'monplugin_add_stylesheet' ) ) {
add_action( 'wp_enqueue_scripts', 'monplugin_add_stylesheet' );
function monplugin_add_stylesheet() {
wp_register_style( 'monplugin-style', plugins_url('monplugin-style.css', __FILE__));
wp_enqueue_style( 'monplugin-style' );
}
}
Déploiement
Une fois le plugin testé avec l’installation locale de WordPress, il ne reste plus qu’à le déployer sur une installation distante. Pour ce faire, Aptana Studio permet de configurer une connexion pour transférer facilement les fichiers locaux sur le serveur distant.
Il faut donc disposer d’une connexion FTP permettant d’accéder à l’installation distante de WordPress, puis il faut configurer cette connexion au niveau du projet Aptana.
Depuis le menu contextuel de l’élément Connections, choisir Add New Connection... (ou double-cliquer sur l’élément).
Une fenêtre de configuration s’ouvre.
Donner un nom à la nouvelle connexion et créer une nouvelle destination distante en cliquant sur le bouton New....
Valider les paramètres FTP de connexion en cliquant sur OK.
Dès lors, chaque fois qu’un des fichiers du plugin doit être mise à jour sur le serveur distant, il suffit de le sélectionner et de cliquer sur l’icône Upload.
