Cómo agregar soporte RTL a su tema personalizado de WordPress

Alrededor del 75% de Internet habla un idioma que no sea inglés. Algunos de estos otros idiomas leen de derecho a izquierda (RTL), que puede destruir por completo la apariencia de muchos modelos en inglés. Afortunadamente, tener un tema que fluye bien para los idiomas RTL (como el árabe) es en gran medida una cuestión de actualizar su CSS. Con algunas consideraciones de diseño y cambios de estilo, puede adaptar cualquier tema de WordPress para que funcione con los idiomas RTL. En este artículo, descubrirá cómo funcionan los idiomas RTL en el navegador y cómo trabajar con ellos en hojas de estilo. Sin embargo, en primer lugar, veamos por qué debe agregar asistencia primero.
¿Por qué vale la pena agregar soporte RTL a su tema?

La traducción de un sitio web a otro idioma puede ser una tarea onerosa, aunque relativamente simplificada con complementos. Sin embargo, aunque muchos idiomas leen de izquierda a derecha (como el inglés, por supuesto), hay muchos idiomas que se leen de derecha a izquierda. La mera traducción de estos sitios no será suficiente: el diseño del sitio debe actualizarse para que se ajuste. Un ejemplo de un idioma hablado de derecha a izquierda es el árabe. Es el sexto idioma más hablado del mundo, con más de 420 millones de hablantes, y alrededor del 40% de ellos tienen acceso a Internet. Este es un gran nicho de mercado a considerar. Tenga en cuenta que este es solo uno de los pocos idiomas popularmente hablados de derecha a izquierda.
Abrir el tema para aceptar todos los estilos de idiomas, independientemente de la dirección en la que leo, hace que el tema esté listo para la traducción para cada situación. Afortunadamente, actualizar el tema para aceptar idiomas de derecha a izquierda es relativamente simple. Cómo agregar soporte RTL a su tema personalizado personalizado de WordPress (en 3 pasos), porque en esencia diseña un tema, asumiremos que desarrolla localmente en su computadora. Si no lo es, definitivamente debería serlo. Además, antes de hacer cualquier cambio, cree una copia de seguridad de su sitio para asegurarse de que pueda recuperar todo si algo no va bien. Cuando estés listo, hundamos! Paso 1: Crea RTL CSS para tu tema
Un convertidor CSS RTL es probablemente la ruta más directa a los idiomas RTL más fáciles de implementar. El primer paso es crear el CSS para mostrar correctamente los idiomas RTL en su sitio web. Hay dos maneras de hacer esto. El primero es simplemente ingresar a la hoja de estilo existente en un generador CSS RTL. Esta herramienta examinará su CSS e intentará hacer una copia, pero cambiando todas las alineaciones izquierda y derecha. Esto efectivamente crea una versión espejo de su sitio web. Aquí hay dos sitios que recomendamos:

RTLCSS: este marco tiene un conjunto muy detallado de instrucciones, y la escritura actual también es la prueba beta de una herramienta de conversión en vivo.
CSSJANUS: esta herramienta es la simplicidad en sí misma: ingrese el CSS de izquierda a derecha (LTR) en el panel izquierdo, haga clic en el botón Enviar y vea su CSS RTL a la derecha.
Este es, con mucho, el camino más sencillo. Después de generar el nuevo CSS, guarde los estilos resultantes en un archivo llamado style-rtl.css, listo para usar más tarde. El segundo método es un poco más aburrido, porque implica una hoja de estilo “anulación”. En esta versión, viajará cada línea del CSS y moverá manualmente todos los elementos de posicionamiento horizontal en un archivo separado llamado RTL.CSS y los reflejará. Esto lleva a un archivo más pequeño, pero al final requiere mucho más trabajo para mantenerse al día, especialmente a medida que continúa haciendo nuevas actualizaciones y cambios para hacer esto, primero agregue el siguiente código en la parte superior de su archivo RTL.CSS : Corp {
Dirección: RTL;
Unicode-bidi: incorporado;
} Entonces, para el resto de sus selectores, asegúrese de cambiar cada posición hacia la izquierda o hacia la derecha hacia lo contrario. Busque el texto de texto, alinee, flote y claro en particular. Sin embargo, los selectores exactos que cambie confiarán en sus necesidades (y su cliente). Si tiene imágenes de fondo que indican una dirección específica, deberá proporcionar una versión invertida y actualizar la referencia y en la hoja de estilo RTL.CSS. Mientras tanto, todos estos atributos deben ser “poner a cero” para la imagen original, antes de establecer un nuevo valor:
el borde
recubrimiento
fronteras
posición de fondo
posición derecha e izquierda
Finalmente, cualquier botón fuera de la pantalla utilizando hendiduras de texto negativas debe cambiarse a positivo. Esto le asegura que su funcionalidad permanece en su lugar, independientemente del dispositivo.
Después de hacer estos cambios, guarde el nuevo archivo como rtl.css en el mismo directorio que style.css. Ahora puede continuar asegurándose de que WordPress pueda cargar su archivo cuando sea necesario. Paso 2: Asegúrese de que los estilos RTL de WordPress “Ver” si usa una herramienta de generación CSS, ahora tendrá que colocar la nueva hoja de estilo Style-RTL.CSS para que WordPress pueda cargarla en el momento adecuado. Esto es solo una cuestión de agregar un fragmento al archivo Functions.php del tema: function enqueue_theme_files () {
wp_enqueue_style (‘thmislug-style’, get_stylesheet ());

wp_style_add_data (‘themeslug-style’, ‘rtl’, ‘reemplazar’);
}
add_action (‘wp_enqueue_scripts’, ‘enquue_theme_files’); Esto le dice a WordPress que cargue la hoja de estilo correcta cuando el sitio web está configurado en un idioma RTL. Suponiendo que ya está usando correctamente para cargar en los estilos de estilo habituales. Sin embargo, cuando use una hoja de estilo de anulación dedicada, no tendrá que cobrar ninguna característica especial. WordPress simplemente cargará el archivo rtl.css después del style.css regular, lo que sobrescribirá las indicaciones direccionales utilizando el archivo secundario.
Una vez que el método elegido está listo para el funcionamiento, es hora de probar si todo funciona o no correctamente en WordPress. Echemos un vistazo a cómo puede probar su nuevo diseño de tema aceptado por RTL. Si lo ve en acción, le permitirá asegurarse de que todo parezca que espera y considere los remedios manuales necesarios. Paso 3: Pruebe sus estilos RTL en WordPressave algunas opciones para probar RTL en su instalación de WordPress. El primero es simplemente cambiar de WordPress a un idioma RTL. Para hacer esto, vaya a la página de configuración> General desde el tablero de WordPress. Luego seleccione el primer lenguaje de script que ve en el cassette del idioma:
Después del rescate, verá que todo es ahora de derecha a izquierda. Sin embargo, si no es bilingüe, por supuesto, tendrá dificultades para comprender cualquier texto. Para resolver esto, puede usar herramientas de desarrollador para activar los estilos RTL, al tiempo que conserva el inglés como idioma principal. Hay dos complementos que podrían ser adecuados aquí. En primer lugar, está el probador RTL del complemento general. Una vez instalado y activado, esto se activa esencialmente, el cambio en todo el sitio web, diciéndoles que carguen todos los estilos RTL específicos. En segundo lugar, hay WP-RTL, que le permite cambiar entre diferentes idiomas direccionales en una sola publicación.
Aunque la funcionalidad de estos complementos es buena, tenga en cuenta que no se han actualizado recientemente. Dada su funcionalidad simple y esotérica, esto es comprensible. De todos modos, probablemente tendrá que asegurarse de que cualquier adición funcione con su instalación actual de WordPress, aunque probablemente serán excedentes a los requisitos cuando presione el sitio en vivo. Entre estos dos complementos, debería poder probar rápidamente cómo se ven los diferentes aspectos con un contenido RTL o LTR diferente. Finalmente, recomendamos usar pruebas de unidad temáticas de WordPress para asegurarse de cubrir cada permutación de texto y estilos de formato al agregar estilos RTL. Conclusión Al menos 200 millones de usuarios de Internet hablan un idioma escrito de derecha a izquierda. Ofrecer estilos RTL sobre los temas abre su diseño para que estos mercados puedan usarlo. Sin ellos, esta es una buena parte de las personas que actualmente pierden sus productos y servicios (o sus clientes). En este artículo, aprendiste la importancia de los estilos RTL y por qué no debes pasar por alto. A continuación, le enseñé cómo agregarlos a su tema en tres pasos: crear CSS RTL para su tema.
Asegúrese de que WordPress vea los estilos RTL.

Pruebe sus estilos RTL para asegurarse de que todo se vea correcto.

¿Qué preguntas tienes sobre los estilos de WordPress RTL? ¡Háganos saber en la sección de comentarios! Crédito de la imagen: Christine Roy.