Comment insérer un plugin JQuery dans son thème WP

SOURCE

JDMWEB.com 

Partie 1: Anatomie d’un plugin jQuery

Dans cette partie, nous allons voir de quoi est généralement constitué un plugin jQuery, et où nous devons placer les différents composants. Tout au long de cet article, nous allons prendre l’exemple du plugin FancyBox (même s’il existe déjà une implémentation WordPress, c’est juste pour avoir un exemple concret).

A) La Source Javascript

jQuery est une librairie JavaScript, et les plugins servent à étendre ses possibilités, ils sont donc écrit en suivant la même syntaxe que jQuery. Chaque plugin que vous trouverez est écrit dans un fichier JavaScript. C’est le coeur même du plugin, et doit donc être inclus dans votre application:

  1. //Include the plugin script
  2. <script type= »text/javascript » src= »Chemin_vers/jquery.fancybox.js »></script>

B) Le Code Javascript

Une fois le plugin inclus, vous êtes souvent amené à écrire quelques lignes de code afin de faire marcher votre plugin avec votre application. La plupart du temps, cela consiste à écrire quelques lignes afin de faire marcher le plugin avec un élément particulier de votre page, et avec un évènement particulier. Comme par exemple, faire marcher la FancyBox après un clic sur un lien:

  1. //Write the plugin setup
  2. <script type= »text/javascript »>
  3. jQuery(document).ready(function(){
  4. //Fancybox
  5. jQuery(« a.fancy »).fancybox({
  6. overlayShow: true,
  7. overlayOpacity: 0.7
  8. });
  9. });
  10. </script>

C) Les styles additionnels

Certains plugins marchent avec des styles particuliers, comme les fenêtres modales comme la FancyBox par exemple. Ces styles sont requis et garantissent le bon fonctionnement du plugin. Ils doivent donc être inclus dans l’application.

  1. //Include the plugin Stylesheet
  2. <link rel= »stylesheet » type= »text/css » href= »Chemin_vers/jquery.fancybox.css » />

D) Comment tout mettre en place ?

Une fois que vos fichiers sont prêts, c’est une pratique courante et recommandée de les ajouter à votre application en mettant les styles dans le header de la page, et les scripts juste avant la fermeture du tag </body>.

Partie 2: Comment tout intégrer dans WordPress?

Maintenant que nous avons une meilleure compréhension des différents éléments que l’on peut trouver dans un plugin jQuery, et où ils sont sensé aller, voyons comment nous pouvons faire de même dans WordPress.

Comment déclarer un plugin WordPress ?

A) Dans WordPress, les plugins sont stockés dans le dossier /wp-content/plugins. Il suffit donc de se rendre dans ce dossier, et de créer un dossier du même nom que votre plugin, dans notre cas, FancyBox.

B) Dans ce dossier, copiez tous les fichiers nécessaires au bon fonctionnement de votre plugin jQuery, (script, css, images etc).

C) Créez un fichier appelé init.php. Init.php est un fichier particulier que va utiliser WordPress pour reconnaître notre nouveau plugin. Ouvrez ce fichier et copiez le code suivant dedans:

  1. /*
  2. Plugin Name: FancyBox //Your plugin name (here we’d write Fancybox)
  3. Plugin URI: http://www.jdmweb.com/resources/fancybox //Url of your choice
  4. Description: Implementation of the FancyBox for jQuery //Brief PLugin Description
  5. Version: 1.0 //Version of your plugin
  6. Author: Jeremy Desvaux //Name of the author
  7. Author URI: http://jdmweb.com/ //Url of your site
  8. License: Creative Commons Attribution-ShareAlike //Licence
  9. //Other terms and conditions
  10. This program is free software; you can redistribute it and/or modify
  11. it under the terms of the GNU General Public License as published by
  12. the Free Software Foundation; either version 2 of the License, or
  13. (at your option) any later version.
  14. */

Comme vous pouvez le voir, dans ce fichier on spécifie un nom, une URL, une description et deux trois autres informations du même type. Ces informations sont ensuite réutilisées par WordPress dans l’interface d’administration des plugins comme vous pouvez le voir sur l’image suivante:

Plugin Interface Screenshot

Depuis cette image, nous pouvons voir que notre futur plugin a été reconnu par WordPress, et qu’il contient les informations que nous avons spécifiées. Le moment est venu de tout faire marcher maintenant. D’après ce que nous avons wu dans la partie 1, il nous faut trouver un moyen d’inclure nos fichiers dans le header et le footer de notre application.

Comment inclure des fichiers dans le header de WordPress?

Ce que l’on veut faire, c’est inclure notre feuille de style, dans le header de la page. En html, on le fait en plaçant une balise link directement dans le header. Dans WordPress, c’est déconseillé, il existe une fonction spécifique pour réaliser cela, elle s’appelle wp_enqueue_style() (ref codex ici)

wp_enqueue_style accepte plusieurs paramètres, principalement le nom de votre feuille de style et son url. On peut aussi ajouter des dépendances (c’est à dire d’autres styles qui doivent être inclus avant), et un numéro de version. Dans notre cas, afin d’ajouter notre feuille de style dans le header, on utiliserait wp_enqueue_style comme ceci:

  1. //Add the stylesheet into the header
  2. wp_enqueue_style(
  3. « jquery.fancybox »,
  4. WP_PLUGIN_URL. »/jQuery2Wp_fancybox/jquery.fancybox-1.3.1.css »,
  5. false,
  6. « 1.3.1 »
  7. );

Ligne 3, vous pouvez voir le nom que l’on donne à notre feuille de style, l’url de sa source, avec l’emploi de la constante WP_PLUGIN_URL qui renferme le chemin vers le dossier des plugins. Du coup si l’utilisateur décide de le changer, le lien vers la feuille de style ne sera pas brisé. Ligne 5, false veut dire qu’il n’y a pas de dépendance. et ligne 6, 1.3.1 détermine la version de la feuille.

Voilà tout pour le header. En fait, pour récapituler, au lieu d’ajouter par nous même la feuille de style dans le header directement, on demande à WordPress de le faire pour nous.

Comment inclure des fichiers dans le footer de WordPress?

D’une manière très similaire, afin d’ajouter nos scripts dans le footer de WordPress, nous faisons à nouveau appel à une fonction, cette fois ci appellée wp_enqueue_script() (ref codex ici).

wp_enqueue_script accepte des paramètres similaires à wp_enqueue_style, c’est à dire un nom de script, une url, des dépendances et un numéro de version. Le dernier paramètre est un booléen et vous permet de spécifier où vous désirez inclure vos fichiers. Si c’est 0 (par défaut), le script sera inclus dans le header, sinon, si c’est 1, dans le footer. Dans notre cas, afin d’inclure les fichiers dans le footer, on utilisera le booléen avec la valeur 1.

Il est maintenant temps d’inclure nos scripts avec wp_enqueue_script:

  1. //Add the scripts in the footer
  2. wp_enqueue_script(« jquery »);
  3. wp_enqueue_script(
  4. « jquery.fancybox », WP_PLUGIN_URL. »/jQuery2Wp_fancybox/jquery.fancybox.js »,
  5. array(« jquery »), « 1.3.1 »,1);
  6. wp_enqueue_script(
  7. « jquery.fancyboxsetup », WP_PLUGIN_URL. »/jQuery2Wp_fancybox/fancybox-setup.js »,
  8. array(« jquery », »jquery.fancybox »), «  »,1);

Lignes 3 et 6, vous pouvez voir wp_enqueue_script en action. On ajoute les scripts en sépcifiant leur nom, chemin, dépendance et version, et on les places dans le footer grâce au 1 à la fin. Comme vous pouvez le voir, la FancyBox a une dépendance (jQuery) et le script d’initialisation en a 2, (jQuery et FancyBox).

Il est temps de tester.

Votre plugin est maintenant prêt à l’emploi. Si vous retournez dans l’interface d’administration des plugins et que vous l’activez, WordPress va ajouter vos fichiers aux bons endroits, et votre plugin commencera à marcher.

Comment utiliser le plugin sur des pages spécifiques seulement?

Maintenant que notre plugin est actif, WordPress va ajouter les fichiers spécifiés dans init.php dans chaque page de votre application. Alors si c’est ce que vous voulez car vous utilisez le plugin sur toutes les pages c’est très bien. Sinon, c’est un gaspillage de ressources, et cela rajoute du temps de téléchargement pour rien.

Je vais vous montrer une petite technique toute simple que j’utilise pour avoir plus de contrôle. C’est très simple.

L’astuce consiste à rassembler le code que l’on vient d’écrire, et de la placer dans une nouvelle fonction que l’on appellera FancyBox_wp_setup():

  1. //Group the code inside a function
  2. function fancybox_wp_setup(){
  3. wp_enqueue_style(
  4. « jquery.fancybox », WP_PLUGIN_URL. »/jQuery2Wp_fancybox/jquery.fancybox-1.3.1.css »,
  5. false, « 1.3.1 »);
  6. wp_enqueue_script(« jquery »);
  7. wp_enqueue_script(
  8. « jquery.fancybox », WP_PLUGIN_URL. »/jQuery2Wp_fancybox/jquery.fancybox.js »,
  9. array(« jquery »), « 1.3.1 »,1);
  10. wp_enqueue_script(
  11. « jquery.fancyboxsetup », WP_PLUGIN_URL. »/jQuery2Wp_fancybox/fancybox-setup.js »,
  12. array(« jquery », »jquery.fancybox »), «  »,1);
  13. }

Ceci à 2 effets différents. Cela empêche WordPress d’ajouter vos fichiers de partout, ce qui est ce que l’on voulait, mais cela vous donne aussi accès à la fonction FancyBox_wp_setup(), que vous pouvez appeler sur chaque page où vous désirez utiliser le plugin.

Conclusion

Quand vous trouvez le plugin idéal pour votre nouveau design, l’intégrer dans WordPress n’est qu’à quelques lignes de code! J’espère que la prochaine fois que vous trouverez un plugin que vous souhaitez utiliser, vous vous souviendrez de cet article et que vous le transformerez en un plugin WordPress en 5 petites minutes.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s