Le guide complet pour une utilisation correcte de JavaScript avec WordPress

Je me souviens avoir pensé "Pourquoi diable avons-nous besoin de JavaScript quand nous avons Flash?" quand j'avais quatorze ans. Bien que je me souvienne encore de ma passion pour la codification avec ActionScript 2.0 à ce moment-là, j'ai constaté tout ce que l'on pouvait réaliser avec JavaScript et j'en suis tombé amoureux. Je ne suis pas (encore) un expert en JavaScript, mais je peux dire que j'en ai fini avec Flash depuis longtemps.

JavaScript, c’est WordPress, la plus grande plateforme de blogs et système de gestion de contenu au monde, - bien sûr - très utile pour beaucoup de choses: curseurs de contenu, galeries de lightbox, caddies lisses, éléments d'interface utilisateur tels que des onglets ou des accordéons… vous l'appelez. Mais comment utiliser JavaScript avec WordPress??

Renvoyer ou faire écho à un tas de HTML scénario éléments est une façon de le faire - et il est faux. Dans ce tutoriel, nous allons voir comment mettre en file d'attente Fichiers JavaScript dans nos pages et comment passer des données traduisibles au code JavaScript.

Les deux problèmes lors de l'utilisation de JavaScript dans des projets WordPress

Il existe essentiellement deux problèmes importants que vous pouvez rencontrer si vous injectez des fichiers JavaScript. directement dans WordPress avec le code HTML:

Dupliquer le code sur la même page: Supposons que vous ayez créé un plugin WordPress et que vous deviez inclure jQuery. Vous écho le bon scénario tag dans le et il fonctionne! Mais que se passe-t-il si un autre plugin veut aussi utiliser jQuery - comment peut-il savoir que jQuery est déjà chargé dans le ? Ce ne serait pas, et même si l'autre plugin comprend jQuery le droit chemin, la page serait encore avoir deux instances de jQuery, parce que vous n'êtes pas.
Problèmes de traduction: Supposons que vous créez un plugin pour la galerie de visionneuses et que vous deviez passer des chaînes telles que "Suivant", "Précédent" et "Image X de Y". Comment le faire sans faire écho à JavaScript intégré dans le ?

La bonne façon d'utiliser JavaScript avec WordPress

La solution au premier problème consiste simplement à "enregistrer" et à "mettre en file d'attente" les fichiers JS avec les deux fonctions principales de WordPress: wp_register_script () et wp_enqueue_script (). La solution du deuxième problème est encore plus simple: le cœur wp_localize_script () fonction vous permet de transmettre des données traduisibles dans votre code JS.

Enregistrement de fichiers JavaScript

Avant de pouvoir "mettre en file d'attente" les fichiers JavaScript, vous devez d'abord les "enregistrer". Et cela se fait simplement en utilisant une fonction appelée wp_register_script ():

Quelques notes sur les paramètres:

Nom (obligatoire, chaîne): Le nom du script. Vous pouvez choisir le nom de votre choix, à condition qu'il ne soit pas utilisé par un autre script..
URL (obligatoire, chaîne): L'URL du script. Pas besoin d'expliquer ça, non? :)
Dépendances (facultatif, tableau): Le (s) nom (s) des autres scripts dont dépend notre script. Par exemple, si votre script dépend de jQuery, il devra être chargé après jQuery. Dans ce cas, vous devriez utiliser tableau ('jquery') pour ce paramètre.
Version (facultatif, chaîne): Le numéro de version de votre script. Vous pouvez choisir entre fournir une chaîne, définir le paramètre sur nul ou en le laissant vide. Si vous le définissez à chaîne, cela va être ajouté au code de sortie comme my-script.js? ver = 1.2. Si vous laissez le paramètre vide, la version de votre installation WordPress sera ajoutée en tant que numéro de version. Si vous le définissez à nul, rien ne sera ajouté.
Charger en pied de page (facultatif, booléen): Lorsque vous mettez ce script enregistré en file d'attente, il sera chargé dans section. Mais si vous définissez ce paramètre sur vrai, il sera chargé juste avant la fermeture étiquette.

Vous pouvez également "désenregistrer" des scripts déjà enregistrés par le noyau ou d’autres plugins avec le wp_deregister_script () une fonction. Il n'accepte qu'un 'prénom' paramètre, que vous fournissez le nom du script à "désenregistrer". Évidemment.

WordPress Codex contient déjà de nombreux scripts déjà enregistrés dans le noyau. Bien que vous deviez vérifier la liste de la version actuelle de WordPress, elle fait référence à la version 3.3 de WordPress et peut être périmée..

Mise en file d'attente de fichiers JavaScript

Vous pouvez enregistrer un script, mais cela ne signifie pas qu'il sera chargé automatiquement. Après avoir enregistré vos scripts, vous devez les "mettre en file d'attente" avec le wp_enqueue_script () une fonction:

Quelques notes sur les paramètres:

Nom (obligatoire, chaîne): Le nom du script.
URL (facultatif, chaîne): L'URL du script. Comme vous pouvez le voir, cette fois le paramètre URL est optionnel parce que si vous avez déjà enregistré le script, vous pouvez simplement fournir le nom et vous êtes prêt à partir. Mais si vous n'avez pas enregistré votre script, vous devez fournir une URL pour ce paramètre..
Dépendances (facultatif, tableau): Le (s) nom (s) des autres scripts dont dépend notre script.
Version (facultatif, chaîne): Le numéro de version de votre script.
Charge en pied de page (optionnel, booléen): Si réglé à vrai, le script sera chargé juste avant se ferme.

Vous pouvez également "retirer de la file" les scripts avec le wp_dequeue_script () une fonction. Semblable à la wp_deregister_script () fonction, il n'accepte qu'un 'prénom' paramètre.

Vous pouvez vérifier "l'état" d'un script avec le wp_script_is () une fonction. Par exemple, si vous voulez vérifier si 'mon script'est mis en file d'attente, utilisez simplement wp_script_is ('mon-script', 'file d'attente') dans un si déclaration.

Crochets pour mettre vos scripts en file d'attente

La bonne façon de mettre en file d'attente vos scripts (et vos styles) consiste à utiliser les points suivants:

wp_enqueue_scripts - Celui-ci met en file d'attente les scripts au début de votre site Web.
admin_enqueue_scripts - Celui-ci met en file d'attente les scripts dans le back-end de votre site web.
login_enqueue_scripts - Celui-ci met les scripts en file d'attente dans votre écran de connexion.

En raison de problèmes de compatibilité, vous ne doit pas utiliser les crochets nommés admin_print_scripts ou styles_impression_admin.

Pour plus d'informations sur l'inclusion de JavaScript (et CSS!) Dans vos thèmes et plugins, vous pouvez vous référer à Comment inclure JavaScript et CSS dans vos thèmes WordPress et vos plugins de Japh Thomson sur Wptuts+.

Passer des données traduisibles à l'intérieur de JavaScript

En ce qui concerne la localisation, JavaScript est toujours un problème avec WordPress… car beaucoup de gens ne connaissent pas la petite fonction bien ordonnée appelée wp_localize_script ():

  __ ('Suivant', 'mon script'), 'prevItem' => __ ('Précédent', 'mon script'), 'imageTitle' => __ ('Image% d de% d', 'mon- script ')); wp_localize_script ('nom-du-script', // (obligatoire) le nom du script, 'mon-script', par exemple, 'nameOfTheObject', // (obligatoire) le nom du script, 'mon-script' par exemple $ l10n_data // (obligatoire) les données à transmettre, pouvant être traduites avec la fonction __ ()); ?>

Après avoir enregistré, mis en file d'attente et localisé le script, vous pouvez transmettre la variable localisée dans votre script en utilisant le nom de l'objet et les noms des données, comme alert (nameOfTheObject.prevItem);!

Vous pouvez vous référer à l'article de Pipping Williamson pour une analyse plus approfondie.

Emballer

Il existe une raison pour laquelle WordPress est le plus grand système de gestion de contenu au monde: son pouvoir provient de sa flexibilité. Et je crois que ce tutoriel prouve (encore une fois) à quel point il est flexible.

Ce tutoriel couvre à peu près tout ce que WordPress propose sur l’utilisation de JavaScript pour nos projets. Avez-vous d'autres astuces ou techniques sur JavaScript et WordPress? Dis nous à propos de cela!

Code