Para explicar brevemente c\u00f3mo traducir scripts de Javascript (Gutenberg): WordPress requiere Entonces, lo que debemos hacer primero es agregar las funciones gettext ( Tenga en cuenta que los archivos \/ de su tema o complemento El primer paso es envolver todos los textos en nuestro archivo Javascript dentro de las funciones de traducci\u00f3n. Si ha manejado la traducci\u00f3n de WordPress en PHP, probablemente est\u00e9 muy familiarizado con las funciones Al igual que con PHP, debe proporcionar un dominio de dominio de texto (nombre\/identificador). Puede ser lo que quieras, pero s\u00e9 breve, ya que es probable que tengas que escribirlo muy a menudo. Para mi tema, configur\u00e9 mi dominio de texto con el dominio Comencemos a editar nuestro archivo Javascript. Primero necesitamos desestructurar la funci\u00f3n Y luego es cuesti\u00f3n de encontrar todos nuestros textos codificados en el archivo Javascript y actualizarlos. Tenga en cuenta que las funciones Por ejemplo, nuestro Y en cuanto a accesorios, es decir, en Envuelva todos los textos para los que desee admitir la traducci\u00f3n en Este paso var\u00eda un poco seg\u00fan lo que ya haya hecho y configurado para su tema o complemento. Es posible que est\u00e9 escribiendo sus scripts de Gutenberg en un complemento nuevo y vac\u00edo que no se ha configurado para la traducci\u00f3n de PHP, o dentro de un tema que ya tiene un dominio de texto registrado. Es posible que tenga archivos PO (y MO) listos, o que solo tenga un archivo POT. Har\u00e9 todo lo posible para cubrir todas las bases.<\/p>\n Si ya tiene un archivo PO o POT en su proyecto, lo m\u00e1s probable es que tambi\u00e9n tenga la funci\u00f3n PHP Todo lo que necesita hacer es cargar el archivo PO para el idioma que desea traducir (o generar uno desde el archivo POT) en, por ejemplo , PoEdit<\/a>. Haga clic en "Actualizar desde el c\u00f3digo" (o similar en otros programas) para que el programa pueda escanear todos los archivos del proyecto (incluidos nuestros archivos Javascript actualizados recientemente) y actualizar el grupo de cadenas para la traducci\u00f3n. Deber\u00edan aparecer las cadenas en nuestro archivo Javascript. Luego solo necesita traducirlos como normales y guardar.<\/p>\n PD: si no puede hacer clic en "Actualizar desde el c\u00f3digo" o volver a escanear los archivos, es probable que el archivo PO no se haya configurado correctamente. Busque consejos en la siguiente secci\u00f3n.<\/p>\n Si su tema o proyecto no ha sido configurado con traducci\u00f3n, necesita generar un archivo POT usando WP-CLI o crear manualmente un archivo PO.<\/p>\n Tengo una gu\u00eda detallada sobre c\u00f3mo crear un archivo PO en mi Tutorial de temas para principiantes, parte 8<\/a>. La publicaci\u00f3n describe c\u00f3mo puede crear el archivo y configurarlo correctamente para buscar sus archivos de tema y las palabras clave para buscar ( Si prefiere crear un archivo POT, puede usar el comando wp i18n make-pot<\/a> en WP-CLI y luego crear un archivo PO a partir de eso usando, por ejemplo, PoEdit. Tenga en cuenta que deber\u00e1 volver a generar el archivo POT (y luego el archivo PO) cada vez que actualice cualquier cadena en su c\u00f3digo.<\/p>\n Lo que finalmente necesita es un archivo PO que haya encontrado sus cadenas de Javascript donde se han traducido. Recomiendo colocar sus archivos de traducci\u00f3n en una carpeta separada en su tema o complemento. Cuando comencemos a generar archivos JSON, terminaremos con bastantes archivos para traducir y ser\u00e1 bueno mantenerlos todos juntos en su propia carpeta.<\/p>\n Como punto de referencia, estoy colocando todos los archivos de traducci\u00f3n en mi archivo El siguiente paso es usar WP-CLI para generar archivos JSON desde nuestro archivo po. Para ello usamos el comando wp i18n make-json<\/a>.<\/p>\n Tenga en cuenta que, de manera predeterminada, este comando eliminar\u00e1 las cadenas traducidas de su archivo PO para usarlas en la generaci\u00f3n de archivos JSON. Esto puede ser engorroso mientras se encuentra en medio del desarrollo de su tema o complemento. Porque cuando agrega cadenas nuevas o las ajusta, tendr\u00e1 que volver a escanear los archivos y traducir todas las cadenas nuevamente (y otra y otra vez). Afortunadamente, hay una bandera en el comando para evitar esto.<\/p>\n \u00a1Empecemos! En su terminal, navegue hasta el directorio de su idioma para su proyecto. Ejecute el siguiente comando y consulte su archivo po (como se mencion\u00f3, tengo un Si no tiene problemas para eliminar las cadenas traducidas de su archivo PO (por ejemplo, si est\u00e1 haciendo su compilaci\u00f3n final), puede omitir la El terminal deber\u00eda indicar "\u00c9xito" e indicar cu\u00e1ntos archivos JSON se crearon. Si ve que gener\u00f3 dos archivos JSON, es porque ley\u00f3 nuestro archivo Javascript de c\u00f3digo fuente y el archivo de compilaci\u00f3n, y gener\u00f3 uno para cada uno. Si tiene m\u00e1s archivos Javascript en su proyecto, terminar\u00e1 con a\u00fan m\u00e1s archivos JSON.<\/p>\n Al momento de escribir esto (WordPress v 5.3.2 y WP-CLI versi\u00f3n 2.4.0), los archivos JSON se generan con el c\u00f3digo de idioma y un hash, una cadena cr\u00edptica como nombres de archivo. Necesitamos encontrar el correcto y cambiarle el nombre.<\/p>\n.mo<\/code>archivos para la traducci\u00f3n de archivos PHP, pero para Javascript WordPress requiere un .json<\/code>archivo. Cada archivo Javascript necesita un archivo JSON para la traducci\u00f3n. El JSON debe tener un formato espec\u00edfico (WP CLI lo generar\u00e1 por nosotros) con nuestras cadenas traducidas. Necesitamos un archivo JSON por idioma al que deseamos traducir.<\/p>\n__()<\/code>, _e()<\/code>etc.) en nuestros archivos Javascript y generar un archivo PO como de costumbre para nuestro tema o complemento. Debido a que hemos envuelto los textos en nuestros archivos de script con, por ejemplo __()<\/code>, el archivo PO deber\u00eda poder incluirlos. Luego hacemos la traducci\u00f3n como de costumbre en nuestro archivo PO. Y finalmente usamos WP CLI para extraer las cadenas necesarias del archivo PO y generar archivos JSON para todos nuestros archivos Javascript.<\/p>\n.po<\/code>nunca .mo<\/code>tendr\u00e1n un efecto en sus archivos Javascript, aunque contengan cadenas traducidas de nuestros archivos Javascript.<\/p>\nImplementando la traducci\u00f3n en Javascript<\/h2>\n
__()<\/code>, _e()<\/code>, esc_html__()<\/code>etc. WordPress tiene un paquete wp.i18n<\/code>que contiene estas funciones, que funcionan exactamente como en PHP.<\/p>\nawhitepixel<\/code>. Entonces, dentro de PHP, lo har\u00e9 __('My string', 'awhitepixel')<\/code>para traducir cadenas, y ser\u00e1 exactamente lo mismo en los archivos Javascript.<\/p>\n__<\/code>y _e<\/code>del wp.i18n<\/code>paquete. Debido a la naturaleza de React, lo m\u00e1s probable es que use la __<\/code>funci\u00f3n principalmente o quiz\u00e1s solo.<\/p>\nconst { __, _e } = wp.i18n;<\/code><\/pre>\n__<\/code>y _e<\/code>requieren el contexto de Javascript. Eso significa que cuando escribimos cadenas como, por ejemplo, valores de propiedades de objetos, los usamos __()<\/code>de inmediato, pero como valores para, por ejemplo, accesorios, necesitamos envolver todo dentro { }<\/code>para indicar que se trata de c\u00f3digo Javascript.<\/p>\nregisterBlockType<\/code>soporte para traducci\u00f3n se ver\u00e1 as\u00ed:<\/p>\nregisterBlockType('awp\/firstblock', {\n title: __('My first block', 'awhitepixel'), \n category: 'common',\n icon: 'smiley',\n description: __('Learning in progress', 'awhitepixel'),\n keywords: [__('example', 'awhitepixel'), __('test', 'awhitepixel')],\n attributes: {\n ...<\/code><\/pre>\nInspectorControls<\/code>:<\/p>\n<InspectorControls>\n <PanelBody\n title={__(\"Most awesome settings ever\", 'awhitepixel')}\n initialOpen={true}\n >\n ...\n <ToggleControl\n label={__(\"Toggle me\", 'awhitepixel')}\n checked={attributes.toggle}\n onChange={(newval) => setAttributes({ toggle: newval })}\n \/>\n ...<\/code><\/pre>\n__()<\/code>y _e()<\/code>. Si ha seguido este tutorial paso a paso, no deber\u00eda tener ning\u00fan caso en el que necesite usar _e()<\/code>. Cuando haya terminado, vuelva a compilar el Javascript y nos alejaremos de Javascript.<\/p>\nConfiguraci\u00f3n de archivos po y\/o pot<\/h2>\n
Mi tema o complemento ya tiene un archivo po(t)<\/h3>\n
load_theme_textdomain()<\/code>, load_child_theme_textdomain()<\/code>o load_plugin_textdomain()<\/code>en alg\u00fan lugar de su c\u00f3digo. Aseg\u00farese de que el dominio registrado sea el mismo que ha utilizado en sus archivos Javascript.<\/p>\nNo tengo ning\u00fan archivo de traducci\u00f3n.<\/h3>\n
__<\/code>, _e<\/code>, etc.).<\/p>\nResultado final<\/h3>\n
theme\/assets\/lang\/<\/code>. Agregu\u00e9 una traducci\u00f3n al noruego para mi tema, llamada nb_NO.po<\/code>, que contiene las cadenas traducidas de nuestro archivo Javascript de bloque personalizado.<\/p>\nGeneraci\u00f3n de archivos JSON desde el archivo po<\/h2>\n
nb_NO.po<\/code>archivo listo).<\/p>\nwp i18n make-json nb_NO.po --no-purge<\/code><\/pre>\n--no-purge<\/code>bandera.<\/p>\nCambiar el nombre del archivo JSON y cargarlo en PHP<\/h2>\n
![\"Crear](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153240-61e50a824a365.png\")
<\/a><\/p>\n![\"Crear](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153240-61e50a83bedae.png\")
<\/a><\/p>\n