Cómo pasar datos y cadenas de PHP a JavaScript en WordPress

Es una buena práctica colocar todos sus datos en cadenas estáticas en sus archivos PHP. Si necesita usar algunos datos en JavaScript más adelante, también es una buena práctica poner sus datos como datos-* Atributos en su HTML. Pero en algunos escenarios determinados, no tiene más remedio que pasar cadenas directamente a su código JavaScript.

Si está incluyendo una biblioteca de JavaScript y se está iniciando un objeto de JavaScript dentro de su header.php Luego, asignando datos a sus propiedades, este artículo es para usted..

Este artículo le enseñará cómo pasar correctamente los datos de PHP y las cadenas estáticas a su biblioteca de JavaScript.

¿Por qué la necesidad de pasar datos a JavaScript?

Permítanme ilustrar algunos escenarios típicos para la necesidad de pasar datos a JavaScript. Por ejemplo, a veces necesitamos incluir estos valores en su código JavaScript:

• URL de inicio, administrador, plugin, tema o ajax,
• Cuerdas traducibles, o
• Un tema u opción de WordPress.

La forma común de pasar datos

Digamos que tenemos un archivo jQuery llamado myLibrary.js que incluiremos en nuestro sitio de WordPress:

var myLibraryObject; (function ($) "use strict"; myLibraryObject = home: ", // complete esto más tarde por favorWaitLabel:", // populate use esto más tarde someFunction: function () // código que usa las propiedades anteriores );

Lo encolamos en nuestra funciones.php con el siguiente código:

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

Ahora la pregunta es ¿cómo podemos poblar el casa y por favor, espera. propiedades? Es posible que haya agregado instintivamente algo como esto en su header.php para obtener los datos que necesita:

Esto funciona según lo previsto; Sin embargo, WordPress nos ha proporcionado una forma mejor y más corta de hacer esto..

El WordPress Way

La forma recomendada de pasar datos a JavaScript es utilizando el wp_localize_script función. Esta función está destinada a ser utilizada después de poner en cola un script usando wp_enqueue_scripts.

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

Aquí están los parámetros:

• $ manejar. El identificador de la secuencia de comandos en cola para enlazar los valores a
• $ objectName. El objeto JavaScript que contendrá todos los valores de $ arrayOfValues
• $ arrayOfValues. Una matriz asociativa que contiene el nombre y los valores que se pasarán al script

Después de llamar a esta función, el $ objectName la variable estará disponible dentro del script especificado.

Implementar wp_localize_script

Ajustemos el ejemplo anterior para usar nuestro nuevo método de pasar datos. Primero, ponemos en cola el guión y luego llamamos. wp_localize_script en nuestro funciones.php:

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

Ahora nuestra casa y por favor, espera. Ahora se puede acceder a los valores dentro de nuestra biblioteca jQuery a través de php_vars variable.

Desde que usamos wp_localize_script, No tendremos que correr nada en nuestro. header.php y podemos eliminar con seguridad los contenidos de la > etiqueta:

var myLibraryObject; (function ($) "use strict"; myLibraryObject = someFunction: function () // código que usa php_vars.home y php_vars.pleaseWaitLabel (jQuery));