Los enlaces desnudos en el área de contenido no responden en el móvil, lo que provoca un desbordamiento. Descubre la solución para desbordamiento en WordPress.
¿Qué es el desbordamiento de contenido?
El “desbordamiento de contenido” en WordPress es un problema común que se produce cuando se utilizan enlaces desnudos, es decir, enlaces que se escriben directamente en el contenido de la página en lugar de utilizar la opción de enlace del editor de WordPress. Para reparar este problema, debes buscar y reemplazar manualmente los enlaces desnudos en tu contenido. Para ello, puedes utilizar un editor de texto que admita la función de búsqueda y reemplazo, como Notepad++ o Sublime Text. Busca los enlaces desnudos y reemplázalos con la etiqueta de enlace HTML adecuada. También es importante que, en el futuro, utilices siempre la opción de enlace del editor de WordPress para evitar el desbordamiento de contenido y otros problemas relacionados con los enlaces desnudos.
Ejemplo
Un ejemplo de un enlace desnudo sería escribir “Visita mi sitio web en www.ejemplo.com” directamente en el contenido de una página de WordPress. En lugar de eso, debes utilizar la opción de enlace del editor de WordPress para crear un enlace HTML válido, como por ejemplo “<a href=”https://www.ejemplo.com”>Visita mi sitio web</a>”. Al hacerlo, evitarás problemas como el desbordamiento de contenido y garantizarás que los enlaces funcionen correctamente en tu sitio.
Trabajando en un tema personalizado he notado que si colocamos un enlace largo en el área de contenido dentro de un bloque, este no se adapta a los dispositivos móviles, lo que causa un desbordamiento. Buscando información en la web, llego a la página oficial de WordPress, y veo que este problema es un bug en la versión 6.1.
Solución
Había que encontrar una solución temporaria hasta que el equipo de WordPress tenga una solución.
Basándome igual en la página que mencione anteriormente, existe una solución fácil que es agregando una línea de CSS.
p, body {
word-wrap:break-word !important;
}Este código lo podemos incrustar en el nuestro archivo principal CSS o en mi caso decidí incrustarlo directamente en el templete. Dependiendo de cada proyecto, el desarrollador o diseñador sabrá donde es mejor colocar esta línea de código.