Inclure les fichiers Javascript dans le header

Dans le cadre de notre application, nous aurons besoin d'inclure des fichiers Javascript dans le header des pages de notre blog Wordpress. Nous pourrions bien entendu le faire en ajoutant sauvagement du code HTML au fichier de template, mais cela ne serait pas très propre :

ces lignes de codes ne disparaîtraient pas en cas de suppression du plugin,
le système wordpress a prévu cette éventualité, nous pouvons donc effectuer cela en utilisant les actions wordpress.

Ajout des librairies Javascript : wp_enqueue_script

Vous le savez sans doute, nombre de développeurs web utilisent des librairies Javascript et il en existe de nombreuses : jQuery, PrototypeJS, Mootools... elles facilitent grandement le développement Javascript et gèrent dans la majorité des cas les disparités d'interprétation entre navigateurs.

Dans le cadre de notre exemple wp_jschat, nous utilisons la librairie Javascript jQuery, ce n'était pas réellement obligatoire, mais il s'agissait de couvrir un maximum de fonctionnalités de Wordpress.

Le problème est que d'autres plugins installés sur le blog wordpress de vos utilisateurs peuvent utiliser les mêmes librairies que votre plugin et que nous ne pouvons inclure une même librairie plusieurs fois sous peine de voir apparaître un erreur Javascript.

Heureusement, les développeurs de wordpress y ont pensé, et nous pouvons charger nos librairies tranquillement; d'ailleurs, de nombreuses librairies sont livrées avec la source de wordpress : nous chargeons ces librairies en utilisant la fonction wp_enqueue_script() dans la méthode addHeaderCode() de notre classe principale lorsque que nous avions évoqué les actions wordpress.

wp_enqueue_script('jquery');

Note : vous n'avez pas besoin d'inclure d'adresse vers le fichier jQuery : il est livré avec Wordpress. Pour voir l'inventaire des librairies livrées,rendez-vous sur la documentation officielle de Wordpress. De la même manière, pour inclure le framework prototype et swfObject :

wp_enqueue_script('prototype');
wp_enqueue_script('swfobject');

jQuery noConflict() et Wordpress

La librairie jQuery est configurée en mode "no conflict", afin d'éviter les problèmes de compatibilité avec les autres librairies Javascript dû à l'utilisation du "$".

Dans le mode "no conflict", le raccourci "$()" est remplacé par jQuery(), c'est donc le cas pour notre plugin.

$(document).ready(function(){
     $(#somefunction) ...
});

devient donc :

jQuery(document).ready(function(){
    jQuery(#somefunction) ...
});

Rien de bien complexe.

Ajout de nos fichiers Javascript

Ce n'est pas tout d'inclure les librairies, il faut maintenant inclure nos propres fichiers JS, toujours avec la même fonction :

 wp_enqueue_script('wp_jschat', '/wp-content/plugins/wp_jschat/javascript/wp_jschat.js');

Cette fonction est décrite dans la documentation wordpress : wp_enqueue_script

On passe simplement un premier paramètre comme identifiant de notre fichier, puis l'url vers ce fichier. notez qu'une url absolue sera généré par le système lors de l'affichage.

Développement d'un plugin wordpress :

Plugin chat Javascript pour Wordpress

Ce plugin de chat Javascript pour wordpress est distribué sous licence GPLv2, il est surtout développé à titre d'exemple dans le cadre d'un cours sur la création d'un plugin Wordpress.
Créer un plugin Wordpress 3.X

Créer un plugin Wordpress 3.X
Structure des plugins Wordpress

Tous les plugins wordpress seront installés dans le répertoire wp-content/plugins. Certains plugins peuvent se limiter à l'inclusion d'un seul fichier PHP, mais il est recommandé de toujours créer un dossier pour stocker les plugins....
Actions

Après avoir défini la structure de notre plugin wordpress, nous pouvons ajouter des actions, dans cet exemple, nous allons ajouter un bout de code qui va s'exécuter dans la balise <head> du blog Wordpress.
Filtres

Les filtres wordpress sont les fonctions que votre plugin peut accrocher dans le but de modifier le texte de sortie. Ce texte de sortie est généralement formaté et inséré dans une base de données, et montré à l'écran à l'utilisateur.
Créer le panneau d'administration d'un plugin wordpress

Tous les plugins devraient idéalement posséder un panneau d'administration. Créer ce panneau d'administration n'est pas très complexe, c'est donc un peu pénible de la part des auteurs de plugin de demander à leurs utilisateurs d'éditer eux-mêmes le code PHP (Ce qui n'est généralement pas une bonne idée).
Création d'une widget Wordpress

Nous allons maintenant créer une widget sous forme de plugin. Les widgets wordpress permettent d'insérer des parties de code facilement sous forme de bloc pour l'utilisateur final. Elles peuvent être ensuite ajoutées dans les barres d'outils prédéfinies selon les thèmes que vous utilisez.
Plugin - créer un panneau utilisateur

Il peut y avoir des situations où les utilisateurs peuvent être amenés à gérer leurs propres paramètres pour votre plugin : dans le cas de notre projet de chat Javascript, nous allons permettre d'une part aux utilisateur d'afficher ou non le chat, et d'utiliser les smileys ou non.
Installation/Désinstallation base de données | plugin Wordpress

Maintenant que nous savons créer des panneaux d'administration et des panneaux utilisateurs, nous allons attaquer l'accès au model : en interagissant avec la base de données. C'est une partie très importante du tutoriel wordpress, car lorsque l'on écrit un plugin, on a dans la majorité des cas besoin de stocker des données dans une base.
Traitement et affichage des requêtes dans base de données wordpress

C'est bien joli d'avoir nos tables dans base de données, maintenant, nous allons afficher les résultats de nos insertions.
Inclure les fichiers Javascript dans le header

Dans le cadre de notre application, nous aurons besoin d'inclure des fichiers Javascript dans le header des pages de notre blog Wordpress. Nous pourrions bien entendu le faire en ajoutant sauvagement du code HTML au fichier de template, mais on va éviter :)
Inclure les feuilles de style CSS

De la même manière que nous avons inclut les scripts Javascript dans le header de notre blog wordpress, nous allons maintenant inclure la feuille de style CSS de notre plugin wp_jschat. Nous allons également placer cette inclusion dans la méthode addHeaderCode() de notre classe principale créée lors de l'article sur les actions wordpress.
Ajax et les plugins Wordpress

Ajax est un protocole qui permet d'envoyer des requêtes http à partir de Javascript, si vous n'êtes pas familier avec ce protocole, vous pouvez en savoir plus sur cet article sur Ajax xmlHttpRequest.
Internationalisation du plugin

Depuis le début de cette suite d'articles, nous utilisons systématiquement les fonctions e() et __() pour afficher du texte. Nous l'avions déjà évoqué au cours d'articles précédents : c'est dans le but d'internationaliser notre plugin. Tous les textes pourrons ainsi être traduits par les utilisateurs de votre plugin dans des fichiers de langue.
Création de shortcode/bbcode Wordpress

Nous pouvons déjà créer des pages personnalisées grâce aux filtres wordpress, cependant, dans le cadre de notre plugin, il peut être intéressant d'ajouter des fenêtres de chat dans les pages de notre blog.
Distribuer un plugin Wordpress

Maintenant que votre plugin fonctionne, il a peut être vocation à être redistribué à la communauté ! Pour cela, rien de plus simple, cet article a vocation à vous expliquer comment vous y prendre.