Construyendo un puente de oro mágico de PHP a JavaScript con wp_localise_cript ()

wp_localise_script () le permite pasar variables PHP a JavaScript. Una de las grandes razones para amar a WordPress es la cantidad de tareas de programación que facilita. Hoy veremos mi fragmento mágico de WordPress favorito: wp_localise_cript (). Como el nombre no implica, wp_localise_script () le permite hacer algo muy importante: le permite pasar las variables PHP a JavaScript. Por qué wp_localise_cript () es excelente antes de comenzar, será muy útil si comprende la distinción del lado del servidor/cliente (o front-end/back-end). PHP está del lado del servidor: hace todo el trabajo antes de que las cosas se envíen al navegador. JavaScript, en nuestro contexto, está a nivel del cliente: funciona en su navegador, para hacer cosas como ocultar y mostrar elementos con un clic del mouse.
Ahora: ¿Por qué deberíamos pasar las variables PHP a JavaScript? Tomemos un ejemplo de la vida real. Escribo un complemento (Bare-Bonus, pero funcional) que crea atajos de teclado para la experiencia de edición de Post WordPress. Con este complemento, por ejemplo, puede CTRL+S en el teclado y “guardará el boceto” en la publicación actual, sin tener que mover el mouse al botón “Sketch SCO”. Necesitamos PHP para administrar las opciones del sitio aquí es la cosa: quiero que los atajos de teclado sean configurables por el usuario. Si usted, el usuario, desea “guardar el boceto” en MACE en Ctrl+D, quiero que esto sea posible.

Esto significa que cada enlace de acceso directo (“Ctrl+D está vinculado a” Salvación de boceto “) debe guardar como una opción de sitio: una pieza de datos que se almacenará en la base de datos de WordPress y se accede y se modifica en PHP utilizando el útil, pero WordPress, pero WordPress programa. Configuración de la API confundida. Necesitamos JavaScript para afectar la interfaz de uso para que nuestro complemento funcione, no solo podemos permanecer en PHP-Land: necesitamos JavaScript en la parte delantera, para escuchar al usuario que presiona Ctrl+S-o cualquier comando personalizado rápido en A Página de editor de publicaciones en su navegador. También necesitamos que JS tome la acción apropiada: desencadena el proceso de “rescate de bocetos” de la página como si se hubiera hecho clic en “Sketch Rescue”. Necesitamos variables compartidas en ambos entornos en conclusión:
PHP debe manejar una opción de sitio: una variable en el lado del servidor que almacena el orden de teclado personalizado “Sketch Rescue” en el sitio.
JavaScript debe saber esa variable, escuche ese atajo desde el teclado del cliente.
En otras palabras, debemos poder transmitir variables PHP a JavaScript. Los modos hacky para pasar las variables PHP a las soluciones de Hackers JavaScript implican el manejo de la página o DOM. Hay algunas maneras de resolver el problema que acabo de presentar. Quizás el WP-Admin/Post.php recibe un Invisible en el sótano, que contiene muchos elementos que describen los enlaces de teclado actualmente guardados. ¿O puede la etiqueta de la página recibir una cadena gigante de datos data-attribute = “” que contiene la misma información, que JavaScript puede leer. Pero WordPress nos proporciona una solución elegante que no implica el manejo de la página o el documento modelo. objeto (DOM). Aquí está: la ruta inteligente: wp_localise_script () para comprender cómo wp_localise_script (), veamos una versión muy simplificada del código de complemento “atajos de teclado”: la transmisión de datos de php aquí es una versión de PHP simplificada que lo usamos para hacer dos vinculados cosas:
Pon en la cola de JavaScript que necesitamos y
Transmite ese JavaScript los datos que necesita.

Mientras lee el código a continuación, lea sobre los ganchos de WordPress y coloque los scripts y los estilos si lo necesita.
/ * Entorno: este es el archivo php principal del complemento */ // enganchamos nuestra función en WordPress Admin_init Action Hook add_action (‘admin_init’, ‘wpshout_demo_get_scripts’); Function wpshout_demo_get_scripts () {// Enquue el javascript necesario wp_enqueue_script (‘wpshout_demo_update_shortcut’, plugin_dir_url (__file__). ‘Wpshout_demo-adate-hortcut.js’, article (‘jQuery’); / * * Esta es una función externa. * Devuelve una matriz PHP de los nombres de las opciones de sitio. // Obtener opciones de sitio para crear una matriz de enlaces actualmente guardados $ bindingStopass = array (); Foreach ($ bindingOpTonsArray as $ key => $ name) {$ bindingStopass [] = get_option ($ name); } // ‘Keys’ contendrá una matriz de enlaces actualmente guardados $ datoPass = array (‘keys’ => $ bindingStopass); / * * Función real para pasar PHP a JavaScript. Args: * 1. El archivo de JavaScript de destino tiene el mango ‘wpshout_demo_update_shortcut’ (este es el archivo que acabamos de encarear) * 2. Los datos se llamarán ‘passdata’ por el archivo js * 3. ‘passData’ Will the data en $ datopass */ wp_localise_script (‘wpshout_demo_update_shortcut’, ‘passatata’, $ datoPass); } Uso de datos en JavaScript Nuestro uso real de los datos sería demasiado complicado para simplificarse, por lo que aquí crearemos un caso de uso muy simple: crearemos una alerta de navegador con la primera vinculación guardada.
/ * Entorno: estamos en wpshout_demo-update-shortcut.js */ // access el elemento ‘claves’ del objeto passata var startcutKeys = pasteData.Keys; // Crear alerta del navegador con el primer elemento de la alerta de passata (atajos [0]); Nuevamente, estos fragmentos de código están simplificados. Con estos ejemplos bajo control, lo invito a explorar el código de complemento para averiguar cómo creamos realmente pedidos de navegador cortos en el editor de publicaciones. Comenta espero que pienses: “WP_LOCALED_cript () es increíblemente genial”. Algunas notas para recordar: debe registrarse y poner el script antes de enviarlo. En nuestro caso, hacemos ambas cosas en una posición, que probablemente no sea la mejor para leer el código.
Puedes pasar muchas cosas a la vez. Solo tenemos un conjunto de ‘claves’ para transmitir, pero si necesita más datos, realmente puede cobrar la matriz asociativa $ DatoPass con muchos tipos de datos.
¿Preguntas sobre los nombres? ¿Por qué wp_localise_script () y no wp_send_php_vars_to_js ()? Como muchos en WordPress, es un pedazo de historia. Desde Codex: “Esto le permite proporcionar traducciones adecuadamente ubicadas de cualquier cadena utilizada en su script. Esto es necesario porque WordPress actualmente ofrece solo una API de ubicación PHP, no directamente en JavaScript … Aunque la ubicación es el uso principal, se puede usar para proporcionar el script cualquier dato que normalmente pueda obtener del servidor de WordPress “. En otras palabras, wp_localise_cript () comenzó como una cosa I18N y ha demostrado ser extremadamente útil para muchos otros usos.
Ahora comprende wp_localise_cript () Si escribe código que se extiende en la parte posterior y en el frente, sé que le gustará wp_localise_cript ().Le permitirá dejar de crear Invisible y cualquier otra cosa y le permitirá pasar todo tipo de datos ricos, desde la base de datos, PHP Processing, como usted dice, directamente en JavaScript.Lo más simple es el modo WordPress para permitirle pasar variables PHP a JavaScript y es algo muy útil que puede hacer. ¡Gracias por leer!Crédito de la imagen: Nelson L.