How to turn any jQuery plugin into a WordPress one
Créer l'un de ces modules n'est pas vraiment difficile, mais si vous n'êtes pas familier avec leur syntaxe, cela peut rapidement devenir épineux. Il y a déjà énormément de plugins jQuery qui ont été adapté pour WordPress, mais que pouvez faire quand ce n'est pas le cas? Comment faites vous quand vous avez trouvé le plugin jQuery idéal pour votre dernier design, mais qu'il n'est pas disponible en plugin WordPress?
Dans ce tutoriel, nous allons montrer comment vous pouvez facilement adapter un plugin jQuery afin de l'utiliser dans WordPress. Nous verrons de quoi sont vraiment constitués les plugins de part et d'autre, et ce qu'ils ont en commun. A partir de la, nous verrons comment il suffit d'opérer quelques modifications simples pour nous permettre de bénéficier de nos plugins jQuery dans WordPress.
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:
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:
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.
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:
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:
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:
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:
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():
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.
So in order to move to the next steps, I need to learn how to call in the image in the posts and to give them the proper jquery selector - any tutorials with that??
This code is specific to the plugin, I therefore place it inside my little init.php. That way, everything that has to do with the plugin code and declaration is all in the same place in the plugin folder.
Regards.
Jeremy
//Hook into wp_head....etc.
Into which page do I insert this code? the init.php in my themes file or the header.php or footer.php???? Very important.
Thank you for your comment.
I didn't mean to say that the plugin file has to be named init.php. I reworded my sentence so it less ambiguous.
You are right about using constants for the plugin path, I updated them with the WP_PLUGIN_URL, which according to the codex refers to the server path to the plugins directory. Regards.
Deluxe is right. Your plugin file DOES NOT need to be named init.php. The plugin file is declared by the comment at the start of the file, not its name. Also, there are constants you can use to get to the plugin directory, rather than using the siteurl + 'wp-content/...'. What if someone moves their wp-content folder for security reasons? Your path would be broken.
If you put fancybox_wp_setup() in the head section, it will include the plugin on every page, which defeats the purpose of having a setup function really.
Usually, in any template file, I make a call to the function get_header(), which returns the header. I only have to call fancybox_wp_setup() before get_header() only on specific pages then.
Thank you for sharing this knowledge! I agree with you that using wp_enqueue_scripts() and wp_enqueue_style() is a better way of including scripts and styles.
I did it that way to keep it simple and because I felt it would make it easier to spot the similarities between the two approaches, but yeah you are definitely right.
No problem ;) keep up the good work
Thanks for noticing, I corrected the mistake. You are right, the function name should be the same than in the hook.
add_action('wp_footer', 'fancybox_wp_foot');
but the function name is
function haccordion_wp_foot()