3 maneras de permitir que los usuarios cambien el tamaño del texto en WordPress
WordPress es muy flexible, pero no trae una función predeterminada para permitir que los usuarios cambien el tamaño del texto.
Aunque tu sitio tenga un tamaño de texto que acomode a la mayoría, siempre habrá personas que prefieran tamaños más grandes o más pequeños. Además, algunas personas tienen visión limitada y requieren la opción de aumentar el tamaño de la fuente sin necesariamente agrandar toda la interfaz del sitio.
En este artículo, vamos a explorar 3 métodos sin código para permitir que los usuarios cambien el tamaño del texto mientras utilizan tu sitio de WordPress.
Puntos Clave
- Permitir que los usuarios cambien el tamaño del texto es importante para la accesibilidad y la legibilidad.
- Puedes agregar funciones para cambiar el tamaño del texto con varios plugins.
- Algunos plugins requieren agregar un widget, lo que limita los temas que pueden usarlos. Sin embargo, otros plugins funcionan independientemente del tema que estés usando.
Por Qué Permitir que los Usuarios Cambien el Tamaño del Texto en WordPress
Las principales razones para proporcionar una función de cambio de tamaño de texto son la accesibilidad y la legibilidad.
Las personas tienen diferentes preferencias de tamaño de texto, por lo que ofrecerles alternativas es positivo. Además, algunas personas tienen visión limitada y necesitan tamaños de fuente más grandes para leer tu contenido con mayor comodidad.
Agregar una función que permita a los usuarios cambiar el tamaño de la fuente hace que tu sitio sea más accesible y acomoda diferentes preferencias y capacidades.
3 Métodos para Permitir que los Usuarios Cambien el Tamaño del Texto en WordPress
Método 1: Usar el Plugin Zeno Font Resizer
La primera opción es utilizar el plugin Zeno Font Resizer. Sin embargo, ten en cuenta que este plugin solo funciona en temas que soportan widgets. Esto significa que no funcionará si estás usando un tema predeterminado de WordPress como la línea Twenty Twenty.
Además, considera que no todos los temas no predeterminados soportan widgets, por lo que deberías asegurarte que tu tema los soporte primero explorando el menú de Apariencia en tu administrador de WordPress.
Si no ves una opción de Widgets en el menú, tu tema no soporta widgets.
Dicho esto, exploremos cómo utilizar este plugin.
Paso 1: Instalar el Plugin
Ir a Plugins > Agregar Nuevo Plugin. En la barra de búsqueda, escribir “Zeno Font Resizer” y hacer clic en Instalar Ahora. Una vez instalado, haz clic en Activar.
Paso 2: Configurar el Plugin
Como se mencionó, este plugin agrega un nuevo widget a tu tema de WordPress. Para configurarlo, ve a Configuraciones > Zeno Font Resizer. Verás varias configuraciones para ajustar.
Entonces, ¿cómo se configura? Podrías dejarlo tal cual, y debería funcionar permitiendo que los usuarios cambien el tamaño de las fuentes de todo tu sitio.
Sin embargo, si solo te interesa cambiar el tamaño del contenido principal de tus publicaciones y páginas, deberías seleccionar la siguiente opción en la sección de Elemento HTML: Resize whole content in body element (<body>Toda el contenido de tu sitio</body>).
Además, recomendamos que cambies el cuadro de Pasos de Redimensionamiento de 1.6px a 3px. 3px ofrece una diferencia más significativa y observable cuando el usuario aumenta o disminuye el tamaño de la fuente.
Puedes cambiar el resto de las opciones como mejor te parezca o según las necesidades de tus usuarios.
Paso 3: Colocar el Widget de Redimensionamiento de Fuente en Tu Sitio
Este plugin agrega un widget a tu sitio, por lo que necesitarás colocar este widget en un lugar específico para que tus usuarios puedan acceder.
Primero, ve a Apariencia > Widgets. Recuerda que no todos los temas soportan widgets, así que es posible que tu tema no tenga esta opción.
Verás las distintas secciones donde puedes colocar tus widgets (encabezado, pie de página, barra lateral, etc.).
En este ejemplo, lo colocaremos en la Barra Lateral Predeterminada, que está en el lado derecho de la interfaz del sitio. Podés colocarlo donde quieras, pero considerá qué tan fácil será encontrarlo para tus usuarios.
Hacé clic en la sección seleccionada para expandirla.
Poné el mouse por encima o por debajo de un bloque existente para hacer aparecer el botón Agregar bloque. Hacé clic en él.
Ahora, buscá el bloque “Zeno Font Resizer”. Hacé clic en él.
Tu widget de redimensionamiento de fuente ya está configurado. Haz clic en Actualizar en la esquina derecha para guardar los cambios.
Paso 4: Probar la Función de Redimensionamiento de Fuente
Finalmente, ve a cualquier parte de tu sitio que presente la sección donde agregaste el widget.
En nuestro caso, vamos a ir a una entrada de blog y verificar si la barra lateral contiene el widget Font Resizer.
Aquí está.
La “A” pequeña disminuye el tamaño del texto, la “A” del medio lo regresa al tamaño predeterminado y la “A” grande lo aumenta.
Recuerda que el tamaño del aumento o disminución está determinado por la opción Pasos de Redimensionamiento en la configuración del plugin (Configuraciones > Zeno Font Resizer).
Finalmente, recuerda también que aunque tu tema tenga soporte para widgets, puede que no tenga las secciones específicas mostradas en nuestro ejemplo (usamos el tema OceanWP en nuestro ejemplo).
Por ejemplo, si tu tema no tiene una barra lateral, necesitarás crear una antes de colocar un widget en ella. O podés colocar el widget en otras secciones de tu sitio.
Método 2: Usar el Plugin Accessibility Widget
Una alternativa al método anterior es usar el plugin Accessibility Widget. Es similar al que ya mencionamos, pero puede ser un poco más amigable ya que te ofrece más opciones desde los Widgets en lugar de desde una página dedicada en el panel de administración.
Al igual que el plugin anterior, no funciona en temas predeterminados de WordPress ni en temas que no soporten widgets, así que tenelo en cuenta.
Paso 1: Instalar el Plugin
Ve a Plugins > Agregar Nuevo Plugin. Inserta “Accessibility Widget” en la barra de búsqueda y haz clic en Instalar Ahora. Una vez instalado, haz clic en Activar.
Paso 2: Colocar el Widget en Tu Sitio
Como se mencionó, este plugin agrega un nuevo widget a tu sitio, por lo que necesitarás colocarlo en un lugar específico para que tus usuarios puedan acceder.
Primero, ve a Apariencia > Widgets. Recuerda que no todos los temas soportan widgets, así que es posible que tu tema no tenga esta opción.
Verás las distintas secciones donde puedes colocar tus widgets (encabezado, pie de página, barra lateral, etc.).
Para este ejemplo, coloquémoslo en la Barra Lateral Predeterminada. Si tu tema no tiene una barra lateral, tendrás que crear una o colocar este widget en otra sección de tu sitio.
Para agregar el widget, hacé clic en el botón Agregar bloque. Buscá el bloque “Accessibility Widget” y hacé clic en él. Verás varias opciones de configuración.
Primero, dale un nombre al bloque como “Font Resizer.”
Además, quizás desees seleccionar los tags HTML o CSS específicos que se verán afectados por este plugin en la opción Redimensionar las siguientes etiquetas HTML/CSS.
Las etiquetas habilitadas por defecto son body, párrafo, elementos de lista y celdas de tabla. Podés probar el plugin con estas opciones predeterminadas y modificar según tus necesidades.
Además, podés editar los aumentos o disminuciones de tamaño específicos. Las opciones predeterminadas son 90%, 100%, 125% y 150%, pero podés editar todas según sea necesario.
También podés cambiar el texto del control, que es el texto que verán los usuarios en el widget. Puede ser independiente de los porcentajes reales y podés usarlo para mostrar letras en lugar de puntos porcentuales.
Finalmente, podés establecer el texto del tooltip que aparece cuando los usuarios ponen el mouse sobre cada opción de redimensionamiento. Este texto debería corresponder a los aumentos porcentuales reales para cada paso.
Cuando termines de configurar el widget, haz clic en Actualizar.
Paso 3: Probar la Función de Redimensionamiento de Fuente
Finalmente, ve a cualquier parte de tu sitio que presente la sección donde agregaste el widget.
En nuestro caso, vamos a ir a una entrada de blog y verificar si la barra lateral contiene el widget Font Resizer.
Método 3: Usar el Plugin WP Accessibility
Este último método utiliza el plugin WP Accessibility.
Es quizás incluso más fácil de configurar que los anteriores y funciona en cualquier tema, no solo en temas con soporte para widgets. Vamos a verlo.
Paso 1: Instalar el Plugin
Ve a Plugins > Agregar Nuevo Plugin. Introduce “WP Accessibility” en la barra de búsqueda y haz clic en Instalar Ahora. Una vez instalado, haz clic en Activar.
Paso 2: Configurar WP Accessibility
Ve a WP Accessibility desde tu panel de administración de WordPress.
Marca la casilla Activar barra de herramientas de accesibilidad. Aparecerán varias opciones abajo. Si solo te interesa el redimensionador de fuente, marca la casilla Incluir botón de tamaño de fuente. Cuando termines de editar las configuraciones, haz clic en Actualizar Configuraciones de la Barra de Herramientas.
Paso 3: Probar la Función de Redimensionamiento de Fuente
Visita tu sitio en vivo, y deberías ver un nuevo botón a la izquierda de tu contenido.
Al hacer clic en él, aumenta el tamaño de la mayoría de elementos de texto de tu sitio.
Hacé que Tu Sitio de WordPress Sea Más Legible y Accesible
Agregar una función que permita a los usuarios cambiar el tamaño de fuente de tu sitio de WordPress no requiere conocimientos de programación. Podés ofrecer esta importante accesibilidad utilizando plugins existentes de WordPress.
Exploramos 3 plugins que podés usar para incluir esta función. Esperamos que esta variedad te ofrezca suficientes opciones para elegir la solución que mejor se adapte a tus necesidades y tema de WordPress.
Si encontraste útil esta publicación, leé nuestro blog y recursos para desarrolladores para obtener más ideas y guías.
📬 Recibe actualizaciones de WordPress en tu correo
¡Suscríbete a las actualizaciones del Blog de WC y no te pierdas ninguna publicación!
Artículos relacionados
¿Podés integrar formularios de Systeme.io en WordPress?
Mi experiencia mejorando la accesibilidad de la barra de navegación en un proyecto de WordPress
Mejores prácticas para obtener datos en Next.js
Cómo las Animaciones Interactivas Mejoran la Experiencia del Usuario en un Sitio de WordPress Usando Framer Motion y React
