Necesito una manera rápida de envolver ciertas palabras de mi web en un <span> con un atributo que le diga a los navegadores que no debería de traducirlas.
Hay términos de los tutoriales de mi web que no se tienen que traducir literalmente. ¿Cuantas veces has traducido tutoriales de WordPress y la palabra plugin la traduce a enchufe? Vamos a solucionar esto de una manera fácil y útil.
Pocos conocen de la existencia de los atributos para controlar los idiomas de una web. Tenemos lang, dir y translate.
Lang => Se utiliza en la etiqueta HTLM y sirve para indicar el idioma principal del documento.
dir => Para indicar la dirección del texto con 2 opciones rtl | ltr (right to left y left to right). En algunos paises se lee de derecha a izquierda.
Translate => Para indicar si una etiqueta se tiene que traducir o no.
Ahora que ya sabemos como utilizarlas, vamos a desarrollar e integrar un botón en la barra de herramientas de los bloques de WordPress para que nos ayude a envolver estas palabras que necesitamos y que no se traduzcan.
Por defecto esta barra de herramientas tiene todas estas opciones de formato.
Código Javascript
Lo primero creamos un archivo llamado no-translate-gutenberg-button.js en la raíz de nuestro tema hijo. En el que colocaremos el siguiente código:
Es una función que se autoejecuta para crear un elemento nuevo. Gracias a las dependencias con las que disponemos en WordPress, identificamos primero del editor de bloques y luego la barra de herramientas para extender sus propiedades (props).
En mi caso el icono, un titulo para localizarlo y le añado directamente el atributo translate="no".
Lo siguiente que hace es registrar el formato para este elemento al que hemos llamado «mi-plugin/sin-traduccion». Además del titulo nos interesa envolver las palabras seleccionadas con una etiqueta <span> utilizando el argumento tagName. Por último le he añadido una clase específica para si fuese necesario darle estilo a estás palabras.
functions.php
Por último vamos a encolar el archivo no-translate-gutenberg-button.js. ¡Ojo! le estamos indicando aquí las dependencias que vamos a necesita en nuestra función de Javascript. Son dependencias que nos facilita WordPress para extender los bloques del editor. Puedes pegar este código en el archivo functions.php del tema hijo o plugin de personalizaciones.
Ahora ya puedes probarlo añadiendo un texto, selecciónalo y busca la nueva opción creada en la barra de herramientas.
El resultado es el siguiente, como puedes ver ahora tenemos una opción nueva llamada «Sin traducir». ¡Pruébalo!
Cuando inspeccionas el elemento podrás ver como se ha añadido todo lo que necesitábamos.
Espero que esto te sirva de ayuda para crear tus propios formatos o para reutilizar mi botón. No dudes en preguntar cualquier cosa si lo necesitas.
¡Gracias!
