javascript - wp_enqueue_style - Cómo manejar la traducción de textos dentro de un.js de un tema de WP

utilizar javascript en wordpress

Question

Tengo una aplicación de wordpress y usualmente uso la función PHP <?php _e(''foo'', ''bar'') ?> Cuando necesito hacer eco de algo que necesita ser traducido. Pero, ahora mismo estoy implementando una nueva característica y en mi archivo .js tengo algo así como

var confirmation = confirm("Are you sure you want to quit");
if(confirmation){
...
}

El problema con el código anterior es que no puedo usar la función PHP _e() para traducirlo, ya que este es un script JS.

¿Hay alguna forma de habilitar la traducción de textos repetidos en JS?

Después de BOUNTY

Estoy poniendo una recompensa ya que las preguntas son genéricas, mientras que estoy buscando una solución que pueda resolver mi problema.

Estoy trabajando en un proyecto de WP que alguien antes había creado. Se supone que solo debo agregar una traducción a los códigos que existen en el archivo js llamado ruta de functions.js : C:/Users/meskerem/foo.com/wp-content/themes/foo/assets/scripts/functions.js supongamos que el siguiente código existe dentro de la función.

var confirmation = confirm("Are you sure you want to quit");
if(confirmation){
...
}

Ahora el objetivo es traducir esa oración en inglés. El código js anterior se ejecuta cuando se hace clic en un botón dentro de este archivo. C:/Users/meskerem/foo.com/wp-content/plugins/wp-jobhunt/templates/dashboards/candidate/templates_ajax_functions.php

El código html que desencadena la traducción es tan simple como:

<h1> <?= _e(''good morning'', ''jobhunt'') ?> </h1>
<div> <i class=''icon-trash'' onclick="askConfirmation()"> x </i> </div>

Por lo tanto, el script es simple, pero la traducción es donde tengo algunos problemas.

Answer 1

Debería usar la función wp_localize_script , que se agregó a WordPress por este mismo motivo.

Pruebe con algo como esto:

wp_localize_script( $handle, $name, $data );

Ejemplo

<?php
// Register the script
wp_register_script( ''some_handle'', ''<ENTER YOUR SCRIPT PATH HERE>'' );
// Localize the script with new data
$translation_array = array(
''some_string'' => __( ''Some string to translate'', ''plugin-domain'' ),
''a_value'' => ''10''
);
wp_localize_script( ''some_handle'', ''object_name'', $translation_array );
// Enqueued script with localized data.
wp_enqueue_script( ''some_handle'' );

Puede acceder a las variables en JavaScript de la siguiente manera:

<script>
// alerts ''Some string to translate''
alert( object_name.some_string);
</script>

Nota: Los datos en la llamada de JavaScript resultante se pasarán como texto. Si está tratando de pasar enteros, deberá llamar a la función JavaScript parseInt ().

<script>
// Call a function that needs an int.
FinalZoom = map.getBoundsZoomLevel( bounds ) - parseInt( object_name.a_value, 10 );
</script>

Answer 2

En Word Press tienes que pasar la matriz de traducción al script java respectivo.

por ejemplo,

si está en cola de comandos como a continuación desde el archivo function.php,

wp_enqueue_script( $handle, $src, $deps,$ver,$in_footer );

tienes que agregar la traducción del archivo de función a js perticular usando su manejador dentro de wp_localize_script ();

 e.g. wp_enqueue_script( ''your-handle'', $src, $deps,$ver,$in_footer );
$translation_array = array(''messagekey'' => __(''Are you sure you want to quit'', foo''); );
wp_localize_script(''your-handle'', ''langvars'', $translation_array);

En tu caso

wp_enqueue_script( ''cs_functions_js'', plugins_url(''/assets/scripts/functions.js'', __FILE__ ), '''', '''', true );
just add below code after above code.
$translation_array = array(''messagekey'' => __(''Are you sure you want to quit'', foo''); );
wp_localize_script(''cs_functions_js'', ''langvars'', $translation_array);

Entonces puedes acceder a la traducción en js like,

var confirmboxmessage = langvars.messagekey;
var confirmation = confirm(langvars.messagekey);

Answer 3

Haga un script PHP simple que su JS pueda llamar a través de AJAX que no hace más que traducir una cadena (o varias cadenas) enviada a través de HTTP GET y repetirla como el cuerpo de respuesta (probablemente con json_encode ()).

Luego puede crear una función JS para realizar esa llamada AJAX, por lo que llamarla podría ser tan simple como llamar a una función JS

var confirmTxt = jstranslate(''Are you sure you want to quit?'');

Y usando JQuery por ejemplo:

function jstranslate(string)
{
translations = $.get(''/my-ajax-translate-url'',{string: string}, function(e){
return e.text; // console.log e to double check what to return, this is from memory
});
}

Y en PHP

// require_once() your _e() function.
$text = _e($_GET[''string''], ''jobhunt'');
header(''Content-Type: application/json'');
echo json_encode(array(''text'' => $text));
exit;

Answer 4

Si entendí el problema correctamente, tiene una secuencia de comandos que está en cola por un plugin o tema de un tercero, y desea localizar el cuadro window.confirm sin modificar los scripts originales.

/wp-content/plugins/jobhunt-client-translations/jobhunt-client-translations.php

<?php
/*
Plugin Name: Jobhunt Translations
Author: John Doe
*/
add_action( ''wp_enqueue_scripts'', function() {
wp_enqueue_script( ''translations'', plugins_url( ''/translations.js'', __FILE__ ) );
// change the translations domain from ''default'' to match yours
// you can also add other translations here in format "message" => "translated message"
wp_localize_script( ''translations'', ''DialogMessages'', [ ''Are you sure you want to quit'' => __( ''Are you sure you want to quit'', ''default'' ) ] );
});

/wp-content/plugins/jobhunt-client-translations/translations.js

(function( original ) {
window.confirm = function( message ) {
message = DialogMessages[message] || message;
return original.call( this, message );
};
})(window.confirm);

Cree una nueva carpeta jobhunt-client-translations en el directorio /wp-content/plugins/ , coloque dentro de estos dos archivos y active el complemento. Simplemente anulará la window.confirm predeterminada. window.confirm diálogo sin cambiar ninguno de los archivos originales de terceros, y sin modificar el comportamiento predeterminado del cuadro de diálogo, excepto que ese mensaje será traducido.

El código fue probado y funciona correctamente.

Answer 5

tal vez esto podría ayudar

function addScript() {
wp_enqueue_script( ''functions'', get_template_directory_uri() . ''foo/assets/scripts/functions.js'', array(), ''1.0.0'', true );
}
add_action( ''wp_enqueue_scripts'', ''addScript'' );