Comment passer des données PHP et des chaînes à JavaScript dans WordPress

Il est recommandé de placer toutes vos données dans des chaînes statiques dans vos fichiers PHP. Si vous avez besoin d’utiliser certaines données en JavaScript ultérieurement, il est également judicieux de les mettre en tant que telles. Les données-* attributs dans votre HTML. Mais dans certains scénarios, vous n'avez pas d'autre choix que de passer des chaînes directement à votre code JavaScript.

Si vous incluez une bibliothèque JavaScript et que vous vous êtes trouvé en train d'initialiser un objet JavaScript dans votre header.php puis assigner des données à ses propriétés, cet article est pour vous.

Cet article vous apprendra comment transmettre correctement les données PHP et les chaînes statiques à votre bibliothèque JavaScript..

Pourquoi la nécessité de passer des données à JavaScript

Permettez-moi d'illustrer quelques scénarios typiques pour la nécessité de passer des données à JavaScript. Par exemple, nous avons parfois besoin d’intégrer ces valeurs dans votre code JavaScript:

• URL de page d'accueil, d'administration, de plug-in, de thème ou ajax,
• Cordes traduisibles, ou
• Un thème ou une option WordPress.

La manière habituelle de transmettre des données

Disons que nous avons un fichier jQuery appelé myLibrary.js que nous allons inclure dans notre site WordPress:

var myLibraryObject; (function ($) "use strict"; myLibraryObject = home: ", // remplit ceci plus tard pleaseWaitLabel:", // peuplera utilisera ceci plus tard someFunction: function () // code qui utilise les propriétés ci-dessus )

Nous l'enregistrons dans notre functions.php avec le code suivant:

wp_enqueue_script ('my_js_library', get_template_directory_uri (). '/js/myLibrary.js');

Maintenant, la question est de savoir comment pouvons-nous peupler le maison et s'il vous plaîtWaitLabel Propriétés? Vous avez peut-être instinctivement ajouté quelque chose comme ça dans votre header.php pour obtenir les données dont vous avez besoin:

Cela fonctionne comme prévu; Cependant, WordPress nous a fourni un moyen plus efficace et plus rapide de le faire..

La voie WordPress

La méthode recommandée pour transmettre des données à JavaScript consiste à utiliser le wp_localize_script une fonction. Cette fonction est destinée à être utilisée après la mise en file d'attente d'un script à l'aide de wp_enqueue_scripts.

wp_localize_script ($ handle, $ objectName, $ arrayOfValues);

Voici les paramètres:

• $ handle. Le handle du script mis en file d'attente pour lier les valeurs à
• $ objectName. L'objet JavaScript qui contiendra toutes les valeurs de $ arrayOfValues
• $ arrayOfValues. Un tableau associatif contenant le nom et les valeurs à transmettre au script

Après avoir appelé cette fonction, le $ objectName variable deviendra disponible dans le script spécifié.

Exécution wp_localize_script

Réglons l'exemple précédent pour utiliser notre nouvelle méthode de transmission de données. D'abord, nous mettons en file d'attente le script puis appelons wp_localize_script dans notre functions.php:

wp_enqueue_script ('my_js_library', get_template_directory_uri (). '/js/myLibrary.js'); $ dataToBePassed = array ('home' => get_stylesheet_directory_uri (), 'pleaseWaitLabel' => __ ('Veuillez patienter…', 'default')); wp_localize_script ('my_js_library', 'php_vars', $ datatoBePassed);

Maintenant notre maison et s'il vous plaîtWaitLabel les valeurs sont maintenant accessibles dans notre bibliothèque jQuery via le php_vars variable.

Depuis que nous avons utilisé wp_localize_script, nous n'aurons rien à courir dans notre header.php et nous pouvons supprimer en toute sécurité le contenu de la > étiquette:

var myLibraryObject; (function ($) "use strict"; myLibraryObject = someFunction: function () // code utilisant php_vars.home et php_vars.pleaseWaitLabel (jQuery));