Pasos para localizar una plantilla de WordPress (Guía completa con aplicación práctica)
Por Admin
Es bien sabido que WordPress es uno de los sistemas de gestión de contenidos más utilizados y populares en el mundo. El equipo oficial de desarrollo de WordPress ha traducido el sistema base de WordPress del inglés a 169 idiomas diferentes.
De estos, 55 idiomas están sujetos a actualizaciones periódicas, y uno de estos idiomas es el árabe por supuesto, para permitir a los usuarios de WordPress administrar y crear sitios web en sus idiomas locales.
Sin embargo, esto no se aplica a
Las plantillas y complementos de WordPress, ya que la tarea de traducirlos suele ser responsabilidad de los desarrolladores que crearon estas plantillas y complementos. Sin embargo, también puedes hacerlo tú mismo si posees algunas habilidades básicas, como te explicaremos en el contexto de este artículo completo. Para poder crear un sitio WordPress en árabe, por supuesto necesitas usar una plantilla de WordPress árabe adecuada para tu sitio. Puedes encontrar muchas plantillas árabes listas para usar y usarlas directamente en tu sitio, o como alternativa puedes localizar una plantilla de WordPress existente tú mismo, como te explicaremos en nuestros párrafos siguientes con pasos detallados.
Localización de plantilla de WordPress Contenidos del artículo
¿Cuándo necesitas localizar una plantilla de WordPress?
Antes de comenzar a localizar la plantilla Paso 1: traducir las frases de la plantilla al árabe ¿Qué es una plantilla lista para traducir? ¿Cómo sé si una plantilla de WordPress está lista para traducir? 1.
Leer las especificaciones de la plantilla 2. Verificar la existencia de un archivo de plantilla de traducción 3.
Inspeccionar el código del archivo functions.php Métodos de traducción de plantillas de WordPress 1. Traducir la plantilla usando el programa POEdit 2. Traducir la plantilla usando el complemento Loco Translate 3.
Traducir la plantilla desde los archivos de origen de la plantilla Consejos para traducir la plantilla de manera óptima Paso 2: Soporte de dirección de derecha a izquierda ¿Cómo verifico si una plantilla de WordPress admite RTL?
¿Cómo hago que una plantilla de WordPress admita RTL correctamente?
1. Crear un archivo de estilo CSS que admita dirección RTL para la plantilla de WordPress Escenario 1: Conversión automática del archivo de estilos de la plantilla (style-rtl.css) Escenario 2: Edición manual del archivo de estilos de la plantilla (rtl.css) Escenario 3: Es posible que no necesites hacer ninguna modificación en el archivo (style.css) 2- Hacer que tu plantilla vea el nuevo archivo de estilos que admite dirección RTL 3- Probar el archivo de estilos RTL ¿Cuál es la importancia de localizar la plantilla dentro de una plantilla secundaria? Aplicación práctica: Localización de la plantilla eLearning Education 1.
Traducir las frases de la plantilla 2. Modificar el formato RTL Conclusión
¿Cuándo necesitas localizar una plantilla de WordPress?
Primero, debemos señalar que hay muchas plantillas de WordPress que están completamente localizadas, es decir, que están traducidas al árabe y admiten la dirección de derecha a izquierda automáticamente. No necesitas tomar ninguna medida antes de usarlas. Todo lo que necesitas hacer es buscar (plantillas de WordPress gratuitas localizadas o plantillas de WordPress profesionales localizadas) en sitios confiables especializados en plantillas de WordPress, como el sitio oficial de WordPress, ThemeForest, Themify u otros, y activarlas en tu sitio para que funcione correctamente sin problemas.
Hacemos énfasis aquí en la necesidad de confiar en una fuente confiable para descargar la plantilla y subirla a tu computadora, evitando plantillas pirateadas y plantillas de origen desconocido en general. Sin embargo, como propietario de un sitio WordPress, puedes encontrar una plantilla de WordPress gratuita o de pago que te guste y se adapte a los requisitos de tu sitio, pero que no tenga soporte para el idioma árabe.
En este caso, puedes trabajar en la localización de esta plantilla para que funcione correctamente en tu sitio. Por otro lado, como desarrollador de plantillas de WordPress, es posible que necesites diseñar una plantilla de WordPress que funcione eficientemente en sitios árabes o multidireccionales, lo que sin duda aumentará la proporción de ventas de la plantilla, porque los idiomas que se leen de derecha a izquierda, incluido el árabe, los utilizan más de mil millones de personas en todo el mundo, y estos necesitan plantillas que admitan estos idiomas.
Entonces, ya seas usuario o desarrollador de WordPress, este artículo te proporcionará una guía completa para aprender a ofrecer un servicio de localización de plantillas de WordPress fácilmente y con pasos detallados. Concluiremos el artículo con una aplicación práctica en la que localizaremos una plantilla de WordPress gratuita de las plantillas oficiales de WordPress.
Lee también: ¿Cómo obtener una plantilla de WordPress localizada?
Y determinar la mejor opción para ti
La mejor manera de obtener una plantilla de WordPress: ¿contratar a un desarrollador, comprar una plantilla lista o localizar una plantilla? Antes de comenzar a localizar la plantilla, hay una serie de puntos que debes considerar antes de tomar el paso de localizar una plantilla de WordPress, que son los siguientes:
1- Algunos pasos de localización requieren cambios en el código de la plantilla y necesitan que tengas conocimientos básicos de lenguajes de diseño web como HTML y CSS. Por lo tanto, si no tienes las habilidades suficientes para esto, lo mejor en este caso es que solicites la localización de la plantilla a un desarrollador de plantillas especializado. Encontrarás en sitios de trabajo independiente como Fiverr y Upwork muchos desarrolladores y programadores que te ofrecen el servicio de localización de una plantilla de WordPress específica al precio más económico. Lee también: ¿Cómo contratar a un profesional independiente que te ayude a desarrollar tu sitio WordPress?
2- También puedes obtener una plantilla localizada y lista sin pasar por todos los pasos que explicaremos en los párrafos siguientes, sin correr el riesgo de modificar el código de manera incorrecta que podría causar que tu sitio se bloquee, especialmente si no tienes las habilidades técnicas necesarias para hacer esta tarea sin problemas. Me gustaría señalar aquí la tienda Baykalika, que ofrece los mejores productos digitales árabes.
Busca en el sitio una plantilla de WordPress adecuada para tu negocio que sea totalmente compatible con el idioma árabe. También puedes comunicarte directamente con el desarrollador de la plantilla a través del sitio para obtener soporte técnico y realizar cualquier modificación personalizada que desees en la plantilla a precios muy razonables. Tienda Baykalika 3- El proceso de localización de una plantilla de WordPress en general requiere dos pasos principales: el primero es traducir las frases de la plantilla al árabe, lo que se conoce como (Localización) o (Traducción), y el segundo es cambiar la dirección de los elementos del sitio para que se dirijan de derecha a izquierda para que coincida con la dirección de lectura del idioma árabe, lo que se conoce como (Compatibilidad RTL) de la plantilla. 4- La tarea de localizar plantillas varía en dificultad de una plantilla a otra, algunas plantillas están listas para traducir (Listas para traducción) y algunas están directamente habilitadas para cambiar la dirección de derecha a izquierda (Compatible con RTL), y algunas no lo están. Por lo tanto, debes verificar qué tan lista está la plantilla para localizarse e inspeccionarla bien antes de comenzar los pasos para determinar tu capacidad de completar la tarea con éxito.
Paso 1: Traducir las frases de la plantilla al árabe El propósito de traducir la plantilla es traducir las frases fijas que muestra la plantilla, ya sea como cadenas de texto en la interfaz frontal como (Buscar, Nada encontrado, Siguiente, Anterior, Leer más, Dejar un comentario, Comentarios) o como textos y frases en la interfaz trasera como (Comparte tu primer publicación, Número de publicaciones) este paso será simple y puedes implementarlo a través de herramientas y complementos listos si la plantilla está lista para traducir.
Todo lo que tienes que hacer es traducir las frases de la plantilla del inglés al árabe usando estas herramientas como te explicaremos en un párrafo posterior. Sin embargo, debes estar atento a que los desarrolladores de plantillas no siempre crean sus plantillas para que estén listas para traducir. Por lo tanto, cuando obtengas una plantilla gratuita o de pago, debes asegurarte de que la plantilla esté lista para traducir, porque preparar la plantilla para traducir es confuso para ti si eres principiante y generalmente requiere un desarrollador de plantillas.
Traducir las frases de la plantilla al árabe Nota: En cuanto a la traducción del contenido del sitio (artículos, páginas y publicaciones personalizadas), se traduce de otra manera, ya que no se almacenan en archivos de traducción sino que se almacenan en tablas dentro de la base de datos.
¿Qué es una plantilla lista para traducir? Técnicamente, una plantilla traducible es aquella en la que el desarrollador de la plantilla trabaja en envolver las cadenas de texto utilizadas en la plantilla (dentro de los archivos de código fuente de la plantilla) dentro de funciones de programación especiales llamadas funciones de traducción como __() o __e() o _n() esc_html __() y otras. Por ejemplo, en lugar de usar una cadena de texto ordinaria directamente dentro del código, usa la cadena dentro de una función de traducción de la siguiente manera: hay una gran cantidad de funciones de traducción que utilizan los desarrolladores en el código de la plantilla, y difieren ligeramente en su modo de operación, pero funcionan básicamente para devolver la traducción de las cadenas de texto que se les pasan al idioma actual de tu sitio si está disponible. Y si la traducción no está disponible, se devuelve la misma cadena de texto.
¿Cómo sé si una plantilla de WordPress está lista para traducir?
Para saber qué tan lista está una plantilla de WordPress específica para traducir a cualquier idioma local, debes inspeccionar varios aspectos en esa plantilla: 1.
Leer las especificaciones de la plantilla
Antes de comenzar a traducir el texto de una plantilla al árabe (o cualquier otro idioma), debes asegurarte de que el texto de esa plantilla sea traducible o esté listo para traducir en primer lugar. Debes comenzar leyendo las especificaciones de la plantilla y buscar si es traducible, ya que esta información generalmente se proporciona en las especificaciones de la plantilla de WordPress. También puedes buscar plantillas listas para traducir en las plantillas oficiales de WordPress seleccionando la opción Listo para traducir (Listo para traducción) durante la búsqueda de una plantilla adecuada para tu sitio.
2. Verificar la existencia de un archivo de plantilla de traducción También debes inspeccionar los archivos y carpetas de la plantilla después de descargarla y buscar la existencia de una carpeta llamada languages o lang dentro de ella.
Si esta carpeta existe, debes encontrar dentro de ella un archivo con la extensión .pot, que es una abreviatura de Plantilla de objeto portátil.
Este archivo contiene las cadenas de texto originales de la plantilla disponibles para traducción a otros idiomas y generalmente se denomina con el nombre de la plantilla. El propósito de este archivo es facilitar el proceso de traducción posteriormente, por lo que independientemente del idioma utilizado para desarrollar la plantilla, cualquier persona que use esta plantilla posteriormente puede traducirla fácilmente a cualquier idioma que necesite sin necesidad de ninguna modificación en el código de la plantilla. Por lo tanto, para traducir tu plantilla a cualquier idioma local, debes traducir este archivo al idioma que desees, y la traducción resulta en los dos archivos siguientes:
Un archivo con la extensión .po, que es una abreviatura de Objeto portátil. Este archivo de texto almacena las cadenas originales y traducidas de la plantilla lado a lado. Este archivo se nombra de acuerdo con el código de idioma y país al que estés traduciendo el texto, por ejemplo ar_SA para traducir al árabe_Arabia Saudita.
También puedes nombrarlo con solo el código de idioma sin agregar el nombre del país ar.po solamente.
Un archivo con la extensión .mo, que es una abreviatura de Objeto de máquina, y es un archivo que resulta de convertir el archivo de traducción po a un formato más pequeño y legible automáticamente para permitir un acceso rápido a los textos traducidos automáticamente al activar la plantilla en un sitio WordPress en árabe. Por lo tanto, recuerda: la carpeta languages de la plantilla traducida al árabe debe contener los tres archivos siguientes:
Themename.pot que resulta del análisis del código de programación de la plantilla y la extracción de cadenas de texto traducibles y su almacenamiento en un archivo de texto con la extensión POT, por lo que este archivo contiene todos los textos disponibles para traducción y todo lo que debes hacer como usuario de la plantilla es traducir estos textos. ar.po que contiene las cadenas de texto originales y sus traducciones al árabe. Se produce cuando traduces los textos de la plantilla almacenados en el archivo POT al árabe y guardas el resultado de tu traducción.
ar.mo que contiene los archivos de traducción compilados, y se genera automáticamente después de convertir el archivo PO a un archivo binario para su lectura automática. Por lo tanto, el primer paso para traducir la plantilla es traducir los textos de la plantilla al árabe y asegurarte de proporcionar los tres archivos de traducción anteriores dentro de los archivos de la plantilla (es preferible guardarlos en una carpeta de idiomas dedicada si aún no lo has hecho para facilitar la organización). 3.
Inspeccionar el código del archivo functions.php El archivo functions.php existe en cada una de las plantillas de WordPress, y se conoce como el archivo de funciones de la plantilla y se utiliza para agregar nuevas funciones a la plantilla o modificar la forma en que funcionan las funciones predeterminadas de la plantilla. Debes inspeccionar el código fuente de este archivo y asegurarte de que llame a la función load_theme_textdomain desde dentro de la función de configuración setup() para que pueda cargar el dominio de texto y entender los archivos de traducción y reconocerlos y traducir la plantilla con éxito.
Y si este código no existe, debes agregarlo al archivo tú mismo. load_theme_textdomain( 'yourthemename', get_template_directory() . '/languages' ); Nota: Si la plantilla que estás traduciendo es una plantilla secundaria de una plantilla principal, el código debe ser de la siguiente manera: load_child_theme_textdomain( 'yourthemename', get_template_directory() . '/languages' ); donde 'yourthemename' es el nombre de la carpeta de tu plantilla e languages es el nombre de la carpeta que contiene los archivos de traducción.
Advertencia: Antes de modificar cualquier código en el archivo functions.php, guarda una copia de seguridad de la plantilla o de tu sitio completo para poder restaurarla en caso de que ocurra un error en la modificación del código. Métodos de traducción de plantillas de WordPress Hay varios métodos y herramientas a través de los cuales puedes crear archivos de traducción, pero el resultado final es siempre el mismo.
Obtendrás como explicamos dos archivos de traducción que son el archivo po y el archivo mo, y aquí están los métodos más populares utilizados para traducir junto con una declaración de sus ventajas y desventajas: 1. Traducir la plantilla usando el programa POEdit
Poedit es una herramienta gratuita con una interfaz gráfica fácil de usar que te permite agregar y editar archivos de traducción fácilmente desde dentro de tu sistema operativo. Sin embargo, traducir la plantilla de esta manera requiere que el archivo de plantilla de traducción POT esté presente en la plantilla.
Después de eso, todo lo que tienes que hacer es abrir este archivo en la aplicación POEdit y hacer clic en el botón +Crear nueva traducción como se muestra en la siguiente imagen. Te aparecerá una lista desplegable para seleccionar el idioma al que deseas traducir el archivo, elige el idioma árabe para que se cree un archivo de traducción llamado ar.po y un archivo de traducción compilado ar.mo
Después de eso, debes hacer la traducción seleccionando cada cadena del texto fuente y agregando su traducción en la sección de traducción, y es preferible mantener los símbolos especiales en la cadena original, por ejemplo traducimos Page %s como Página %s y después de terminar de traducir todos los textos, guarda el archivo traducido en la misma ruta que el archivo de plantilla de traducción
nota. Nota: Conserva una copia de tus archivos de traducción (ar.po y ar.mo) fuera de los archivos de plantilla en tu computadora local en un lugar seguro, ya que los necesitarás reutilizar en caso de que la plantilla se actualice automáticamente. En ese caso, puedes usar el programa Poedit para actualizar fácilmente las traducciones cuando se actualice la plantilla abriendo el archivo de traducción, seleccionando el comando Actualizar desde archivo de traducción en el menú Traducción, y especificando el archivo Pot de la plantilla actualizada.
Luego se mostrarán solo las nuevas cadenas modificadas para agregar sus traducciones. 2. Traducción de plantilla usando el complemento Loco Translate
Este complemento te proporciona un traductor integrado que te permite traducir fácilmente plantillas y complementos de WordPress editando archivos de traducción desde el panel de control de tu sitio WordPress. Lo que distingue a este complemento es que te permite traducir
textos de plantilla incluso cuando no hay un archivo de plantilla de traducción pot disponible para la plantilla, ya que el complemento crea el archivo automáticamente e incluye los textos de plantilla traducibles para que luego agregues su traducción en el idioma que desees. Por supuesto, este archivo no tendrá la misma calidad que el creado por el desarrollador de la plantilla, pero te ayuda mucho a traducir frases de plantilla. En la sección de aplicación práctica de localización de plantillas de WordPress, usaremos este complemento para traducir las frases de nuestra plantilla y explicaremos su uso con pasos detallados.
Lee también el siguiente artículo sobre cómo traducir tu sitio y todos sus elementos usando Loco Translate 3.
Traducción de plantilla desde dentro de los archivos fuente de la plantilla Algunos pueden recurrir a otro método para traducir la plantilla buscando cadenas de texto dentro de los archivos fuente de la plantilla php directamente en lugar de crear archivos de traducción separados como se muestra en la siguiente imagen. Sin embargo, no se recomienda usar este método, ya que perderás todas las traducciones que hayas agregado si actualizas la plantilla.
Además, no te permitirá usar la plantilla en un sitio bilingüe o multilingüe y las frases de la plantilla aparecerán solo en árabe en este caso. Consejos para traducir la plantilla de la mejor manera Aquí hay algunos consejos que debes considerar cuando traduces textos de plantillas de WordPress o cualquier otro texto de tu sitio del inglés al árabe:
No traduzcas palabras de manera literal o automática, sino tradúcelas de manera expresiva y apropiada para las reglas y fundamentos del idioma árabe. Usa un árabe simple y claro para que lo entienda cualquier persona común que use esta plantilla. No uses términos coloquiales o populares y mantén un nivel uniforme de
formalidad en la traducción de frases y oraciones. Lee traducciones de otros programas en tu idioma; si tienes problemas traduciendo frases o palabras específicas, intenta ver cómo se han traducido en otras plantillas localizadas para elegir la traducción más apropiada. Al llegar a esta etapa, habrás completado el primer paso de la localización de la plantilla.
Todo lo que tienes que hacer es cambiar el idioma de tu sitio WordPress yendo al panel de control < Configuración < General <
Idioma del sitio < Árabe y luego guarda los cambios.
Después, navega por tu sitio y asegúrate de que todas las frases de la plantilla se muestren traducidas de la manera que especificaste. Ahora estás listo para pasar al segundo paso, que es hacer que tu sitio admita cambiar la dirección de los elementos del sitio de derecha a izquierda (RTL) para que se adapte a la dirección de lectura y escritura del idioma árabe. Paso 2: Soporte de dirección de derecha a izquierda
Soporte RTL En esta sección explicaremos en detalle cómo hacer que una plantilla de WordPress cambie de dirección de derecha a izquierda (RTL), ya que este paso es necesario en sitios en idioma árabe.
Como mencionamos al principio del artículo, la plantilla puede tener soporte previo para la función RTL, ya que la mayoría de las plantillas de WordPress disponibles ya incluyen soporte de alineación RTL y no necesitas hacer ningún cambio para lograrlo. Sin embargo, si tu plantilla no admite RTL y deseas que lo haga, deberás realizar algunos cambios para agregar soporte de cambio de dirección de derecha a izquierda a tu plantilla de WordPress.
Así que sigue los siguientes párrafos y aplícalos con precisión. ¿Cómo verifico si una plantilla de WordPress admite RTL? En principio, para verificar si una plantilla de WordPress admite cambio automático de dirección de derecha a izquierda cuando cambias el idioma del sitio al árabe, debes leer las especificaciones de la plantilla y buscar esta función en la documentación de la plantilla, ya que la mayoría de las plantillas de WordPress indican que admiten RTL al mostrar características de la plantilla.
En realidad, este paso por sí solo no es suficiente; también debes inspeccionar los archivos de la plantilla y buscar un archivo llamado rtl.css o style-rtl.css. Si tienes archivos como estos, tu plantilla probablemente admita RTL.
¿Por qué probablemente? Porque aún necesitas verificar el código escrito en estos archivos. Abre los archivos anteriores en cualquier editor de texto y asegúrate de que el desarrollador de la plantilla no haya creado archivos css vacíos, ya que esto es posible en algunas plantillas, y en ese caso tendrías que escribir el código en los archivos tú mismo.
Finalmente, debes probar el rendimiento de la plantilla por ti mismo activando la plantilla en tu sitio después de cambiar el idioma del sitio al árabe y verificar que todos los elementos del sitio cambien de dirección de derecha a izquierda correctamente. Puedes usar el complemento RTL Tester en tu sitio en lugar de cambiar el idioma del sitio al árabe.
Después de instalar y activar el complemento en tu sitio, verás un botón nuevo con su nombre en la barra superior del panel de control del sitio. Al hacer clic en él, cambia los elementos del sitio de derecha a izquierda (RTL), lo que te permite navegar por el sitio y probar el rendimiento de tu plantilla. El enlace de tu sitio cuando se habilita RTL será el siguiente.
http://yourdomain/?d=rtl ¿Cómo hago que una plantilla de WordPress admita RTL correctamente? Ahora, si probaste la plantilla en tu sitio y viste que no admite cambio de dirección RTL (de derecha a izquierda) correctamente en todos los elementos y componentes del sitio, puedes seguir
los siguientes pasos: 1. Crear un archivo de estilo CSS que admita dirección RTL para una plantilla de WordPress Hay varios escenarios que se pueden seguir para modificar los estilos de la plantilla para admitir la dirección RTL:
Escenario 1: Conversión automática del archivo de estilos de la plantilla (style-rtl.css) En este escenario, se utilizan herramientas para modificar el archivo style.css y crear una nueva versión del mismo style-rtl.css donde se invierten o intercambian todas las direcciones de los elementos horizontales haciendo que la izquierda sea derecha y la derecha sea izquierda en todo el archivo. Esto efectivamente crea una versión invertida de tu sitio web.
Hay varias herramientas que te ayudan a hacer esto conocidas como (CSS RTL generator) y las más destacadas son: Herramienta CSSJanus: Esta herramienta es muy simple; puedes escribir el código del archivo de estilos de la plantilla style.css para tu plantilla que admite la dirección (LTR) en el panel derecho input de la herramienta y hacer clic en el botón Enviar para obtener código CSS modificado en la sección output que admite (RTL).
Todo lo que tienes que hacer es copiar el código de estilo resultante y pegarlo en un archivo nuevo llamado style-rtl.css y guardarlo junto a tu archivo de estilo de plantilla principal style.css.
CSSJanus Herramienta RTLCSS: Esta herramienta funciona de manera similar a la herramienta anterior y convierte el código de estilos para admitir la dirección (RTL).
Pero lo que distingue a esta herramienta de la anterior es que proporciona la capacidad de aclarar los cambios realizados en el código con colores distintivos al hacer clic en el botón Compare en la parte superior. RTLCSS Escenario 2: Modificación manual del archivo de estilos de la plantilla (rtl.css)
Este método es un poco más difícil y lleva más tiempo, y requiere conocimiento básico de CSS, pero es más efectivo y produce código más limpio y ligero para tu plantilla en lugar de convertir automáticamente todo el archivo de estilos style.css. En este método, debes crear un archivo de estilo rtl.css cuya función es anular parcialmente el archivo de estilos principal style.css cuando sea necesario, y mostrar los elementos del sitio de derecha a izquierda. Aquí hay algunos puntos clave que te ayudarán a crear este archivo de la mejor manera. 1-Este archivo se crea como un archivo separado llamado rtl.css
y se guarda en el mismo directorio que style.css. Agregar el siguiente código al principio puede ayudarte a resolver muchos problemas de formato de derecha a izquierda en la plantilla. body { direction: rtl;
unicode-bidi: embed; } La primera línea de este código hace que la dirección de los elementos dentro del cuerpo de la página sea de derecha a izquierda. La segunda línea ayuda al navegador a determinar la dirección en la que se mostrarán los textos automáticamente según el idioma del navegador, la propiedad lang de los elementos y las fuentes utilizadas para mostrarlos correctamente según LTR o RTL.
2-Luego, mientras revisas cada línea del archivo style.css, copia cada línea que contenga una propiedad de dirección horizontal (como la propiedad float, position y text-align) y pégala en el archivo rtl.css y cambia el valor de la propiedad al opuesto (derecha se convierte en izquierda e izquierda se convierte en derecha). También debes prestar atención a los valores de margin y padding y modificarlos apropiadamente para el idioma árabe. Puedes ignorar todas las demás propiedades como colores, ancho, altura, etc. 3-También puede que necesites cambiar algunos selectores adicionales revisando el sitio y modificando su diseño para que se adapte a la dirección del idioma árabe.
Si encuentras un elemento que no se adapta a la dirección RTL, puedes inspeccionar el código de tu sitio usando la herramienta de inspección de elementos del navegador (Inspect Element) para saber qué selector CSS afecta a cada elemento de la página y modificar el estilo de ese elemento según sea necesario. 4-También debes prestar atención a cualquier imagen en el sitio que indique una dirección específica
como imágenes de flechas que apunten hacia la derecha o izquierda para expresar siguiente y anterior, ya que necesitarás proporcionar una versión invertida de esas imágenes y actualizar el enlace al que apuntan en el archivo rtl.css. 5-Finalmente, con respecto a las fuentes, puede que necesites elegir fuentes personalizadas para formato RTL ya que los idiomas que van de derecha a izquierda puede que no tengan las mismas fuentes.
Por lo tanto, puede que necesites usar fuentes alternativas apropiadas para el idioma árabe. Porque si no lo haces, el navegador intentará usar una fuente predeterminada que puede no encajar con el diseño de tu sitio, así que puedes especificar las fuentes alternativas que desees tú mismo.
Estos pasos resultarán en un archivo considerablemente más pequeño que el archivo de estilos principal style.css, pero requiere mucho esfuerzo y tiempo al final para obtener un resultado satisfactorio, especialmente cuando continúas haciendo actualizaciones y cambios nuevos en tu plantilla. Escenario 3: Puede que no necesites hacer ninguna modificación en el archivo (style.css) Puede que pruebes la plantilla en el sitio y notes que cambia todas las direcciones de derecha a izquierda cuando estableces el idioma del sitio en árabe, y las cambia de nuevo de izquierda a derecha cuando regresas el idioma del sitio al inglés, aunque los archivos de la plantilla no contengan ningún archivo de estilo personalizado para árabe, ni rtl.css ni style-rtl.css. ¿Cómo sucedió esto?
La respuesta es que el desarrollador en este caso construyó el archivo de estilo principal de la plantilla style.css basándose en propiedades lógicas (Logical properties) y valores lógicos (Logical values) que existen en CSS. Si estás creando un sitio web en múltiples idiomas, las propiedades y valores lógicos serán muy útiles para ti para establecer direcciones diferentes para el contenido de manera contextual en lugar de establecerlas de manera física o material. Las propiedades lógicas en CSS se basan en espacios y diseño según el modo de escritura y dirección.
Por ejemplo, en lugar de usar izquierda o derecha como (margin-left, margin-right) usamos inicio (margin-inline-start) que es el lugar desde donde comenzará la lectura y cambia según el idioma utilizado (representa izquierda en inglés y derecha en árabe). Por lo tanto, una plantilla que se basa en propiedades lógicas cambiarla según el contexto y te proporciona un cambio de direcciones de plantilla según el idioma del sitio dependiendo solo del archivo de estilo principal style.css. ¡Qué genial!
Puedes visitar el siguiente enlace para obtener más información sobre propiedades lógicas y físicas en CSS, pero cabe señalar aquí que algunos desarrolladores todavía prefieren usar propiedades físicas en lugar de sus contrapartes lógicas a pesar de su flexibilidad en sitios multilingües porque aún no son compatibles con algunos tipos de navegadores.
2- Haz que tu plantilla vea el nuevo archivo de estilos que admite dirección RTL Si estás usando conversión automática del archivo de estilos (style-rtl.css), necesitas hacer que WordPress pueda cargar la plantilla correctamente agregando el siguiente código al archivo de funciones de tu plantilla functions.php. function enqueue_theme_files() { wp_enqueue_style( 'themeslug-style', get_stylesheet_uri() ); wp_style_add_data( 'themeslug-style', 'rtl', 'replace' ); } add_action( 'wp_enqueue_scripts', 'enqueue_theme_files' ); Pero si estás usando el método manual para anular los estilos de la plantilla (rtl.css), no necesitarás el código anterior ya que WordPress cargará automáticamente el archivo rtl.css en sitios en árabe después de cargar el archivo de estilos principal styles.css, y ajustará las direcciones de los elementos del sitio según sea apropiado.
3- Prueba el archivo de estilos RTL Todo lo que tienes que hacer ahora es navegar por tu sitio web después de cambiar el idioma del sitio al árabe o usar el complemento RTL Tester para verificar que
los estilos RTL funcionan correctamente en tu sitio. Para aplicar este paso correctamente, debes probar la plantilla en un sitio con contenido real completo, o importar el contenido de demostración de la plantilla (Theme Demo Content) si está disponible con la plantilla para asegurar que estés aplicando todos los cambios de estilo correctamente.
¿Cuál es la importancia de localizar la plantilla dentro de una plantilla secundaria? Puedes crear una plantilla secundaria child-theme
de la plantilla principal que deseas localizar. Esta plantilla secundaria heredará las propiedades de la plantilla principal y agregará la función de localización y soporte de formato RTL como explicamos en los pasos anteriores. El beneficio más importante de este paso es que cuando actualices la plantilla principal, no perderás ninguna modificación que hayas agregado durante el proceso de localización sin necesidad de ninguna acción después de actualizar la plantilla.
Lee más: Cómo crear una plantilla secundaria (Child theme) en WordPress para disfrutar de sus beneficios Hasta aquí hemos completado todos los pasos necesarios para localizar una plantilla de WordPress de la mejor manera. Pero antes de pasar a la aplicación práctica, revisemos los pasos más importantes que mencionamos en los párrafos anteriores en el siguiente diagrama integral que te recomendamos guardar e imprimir como referencia rápida al localizar cualquier plantilla de WordPress.
Diagrama de localización de plantillas Aplicación práctica: Localización de la plantilla eLearning Education Te explicaremos en esta sección cómo aplicar los pasos de localización de la plantilla eLearning Education
que se encuentra en el sitio web oficial de WordPress de manera práctica. Al principio, si leemos las características y especificaciones de la plantilla, notaremos que admite la traducción al árabe y es compatible con la dirección RTL. Para verificar esto, cargamos la plantilla en el hosting de nuestro sitio web e inspeccionamos sus archivos. Notamos que el desarrollador de la plantilla no incluyó el archivo de plantilla de traducción elearning-education.pot, que nos ayudaría a traducir las frases de la plantilla.
Por lo tanto, nos basaremos en el complemento Loco Translate para la traducción, ya que nos ayuda a crear este archivo como se explicó anteriormente. También notamos que la plantilla incluye un archivo de estilos style.css y un archivo rtl.css, lo que significa que admite la conversión de dirección de derecha a izquierda. Para confirmar cómo funciona el archivo rtl.css, ahora activaremos la plantilla en un sitio de WordPress real y veremos que el sitio aparecerá de la siguiente manera si el idioma del sitio es inglés:
Y al cambiar el idioma del sitio al árabe, el sitio aparece como se muestra en la siguiente imagen, donde se ha invertido correctamente la dirección del menú principal, el logo del sitio y el cuadro de búsqueda. Sin embargo, la plantilla aún necesita un mejor soporte de RTL, como cambiar la alineación de títulos y párrafos de derecha a izquierda, además de traducir sus textos y frases al árabe.
1. Traducción de las frases de la plantilla Dado que el archivo de plantilla de traducción elearning-education.pot no está disponible, nos basaremos en el complemento Loco Translate
para crear los archivos de traducción requeridos. Instalamos y activamos el complemento en el sitio, luego hacemos clic en la pestaña que apareció con el nombre del complemento en el panel de control y seleccionamos Themes como se muestra en la siguiente imagen:
Después, seleccionamos el nombre de la plantilla que deseamos traducir, que es eLearning Education. Nos aparecerá un mensaje indicando que la plantilla eLearning Education no contiene traducciones en ningún idioma.
Para poder agregar la traducción, primero necesitamos hacer clic en Create template para crear el archivo de plantilla de traducción pot. Esta acción hará que el complemento inspeccione los archivos fuente de la plantilla y cree el archivo de plantilla de traducción para nosotros extrayendo todas las cadenas traducibles de estos archivos (se extrajeron 161 cadenas en nuestra plantilla actual) y guardando la plantilla directamente en la carpeta de la plantilla. Después, puede comenzar la traducción haciendo clic en New language
y seleccionando Arabic (Árabe) de la lista desplegable del idioma de WordPress, e indicando dónde guardar los archivos de traducción (seleccionaremos Author). La traducción se guardará en un archivo llamado ar.po en la misma ruta de la plantilla y también se creará un archivo ar.mo
automáticamente. El último paso es escribir las traducciones al árabe para todas las cadenas extraídas (o al menos para las cadenas del sitio frontal) y guardar las traducciones en los archivos de traducción. Nota
Dado que los archivos de traducción se guardaron directamente en la carpeta de la plantilla, crearemos manualmente una carpeta llamada languages dentro de la carpeta de la plantilla y los moveremos allí para facilitar la organización y mantenerlos separados del código fuente de la plantilla. Ahora, si revisamos el sitio, notaremos que las traducciones aún no se han aplicado a las frases, lo que significa que la plantilla no reconoció los archivos de traducción. Inspeccionamos el código fuente del archivo de funciones de la plantilla functions.php y notamos la ausencia de la función
load_theme_textdomain dentro de ella, por lo que escribimos el siguiente código dentro de la función elearning_education_setup() para permitir que la plantilla reconozca los archivos de traducción que creamos. load_theme_textdomain( 'elearning_education', get_template_directory() . '/languages' );
Ahora, al revisar el sitio, las traducciones deberían aparecer correctamente: 2. Modificación del formato RTL Ahora pasamos al siguiente paso, que es soportar la dirección RTL correctamente para todos los elementos del sitio.
Aunque la plantilla incluye un archivo rtl.css, algunos elementos de la plantilla, como vimos, aún necesitan modificación, especialmente los títulos y párrafos dentro de las publicaciones. Por ejemplo, al inspeccionar los títulos en el navegador, encontramos que su selector es .page-box h4, por lo que agregamos el siguiente código (text-align:right) al archivo de estilos rtl.css para alinear los títulos de derecha a izquierda
E igualmente, al inspeccionar los párrafos, encontramos que el selector CSS es .page-box p, por lo que también agregamos al archivo el código para modificar la alineación de párrafos hacia la derecha: Ahora, después de revisar el sitio, notaremos que el sitio aparece de la siguiente manera: De la misma manera, inspeccionamos todos los elementos del sitio para asegurarnos de que todos los elementos aparezcan correctamente de derecha a izquierda de acuerdo con el idioma árabe.
Nota: Es posible que necesites asignar diferentes fuentes (font-family) apropiadas para el idioma árabe, o cambiar el tamaño de la fuente (font-size) de la plantilla localizada si consideras que la fuente utilizada no es adecuada al mostrar el sitio en árabe. Por ejemplo, puedes cambiar la fuente escrita en árabe a la fuente
Cairo agregando el siguiente código al archivo rtl.css: /*-------------------------------------------------- =>> font family changing to Cairo --------------------------------------------------*/ @font-face {
font-family: 'Cairo'; font-style: normal; font-weight: 400;
src: url(https://fonts.gstatic.com/s/cairo/v17/SLXVc1nY6HkvangtZmpcWmhzfH5lWWgcQyyS4J0.woff2) format('woff2'); unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC; } Conclusión Al llegar a este punto, has llegado al final de nuestro artículo completo en el que explicamos los pasos detallados completos y los diferentes casos que podrías encontrar durante el proceso de localización de plantillas de WordPress.
Esperamos que este artículo te haya ayudado a completarlo correctamente y sin errores. También te hemos explicado las mejores prácticas que te recomendamos seguir al localizar tu plantilla para que tu esfuerzo no se pierda en caso de que la plantilla se actualice. Todo lo que tienes que hacer ahora es probar estos pasos en la localización de una plantilla de WordPress real, ya que la práctica es la mejor forma que tienes para descubrir cómo funcionan las cosas.
Y nos encantaría que compartieras tu experiencia en la localización de tu plantilla. Si encuentras algún problema, ya sea en la traducción de la plantilla o en hacer que los elementos del sitio se dirijan de derecha a izquierda, no dudes en plantear tu problema en los comentarios. Leer más: Localización de plantillas de WordPress para desarrolladores
DROPIDEA
Esperamos que este artículo te haya aportado valor real. En DROPIDEA, siempre nos esforzamos por ofrecer contenido de alta calidad que te ayude a crecer y evolucionar en el espacio digital. Síguenos para más artículos y guías útiles.
Admin
DROPIDEA
Últimos artículos
¿Aprovechó Musk el lanzamiento de «Dots» de OpenAI a través del dominio dot.com?
Peak XV eleva el límite de sus inversiones semilla a 5 millones de dólares
Esperada cena entre el CEO de Anthropic y Donald Trump en medio de desacuerdos sobre la seguridad de la inteligencia artificial
Google prueba las compras directas de Flipkart a través de Gemini en la India