El siguiente artículo no está pensado para ser leído por informáticos sino por no-informáticos. De todas formas, se agradece la lectura por parte de informáticos y sus comentarios para mejorarlo. El texto es una adaptación de un correo electrónico que le envié a un amigo luego de solucionar un problema que tenía con su blog alojado en wordpress.com.
Suele pasar, y esto lo se de leer tantas veces consultas en foros especializados, que sin aparente causa algunos blogs hechos con WordPress de repente se ven mal: la disposición (layout) de los elementos se rompe, cambia el color de fondo, la barra lateral aparece abajo de todo. ¿Cuál es la razón? Este "efecto indeseable" puede ser provocado de distintas maneras, pero una suele ser la causa en la mayoría de los casos: un error al crear entradas (o posts) para el sitio. Otro dato a tener en cuenta es que el error se suele manifestar cuando se utiliza la etiqueta especial 'more' (seguir leyendo).
En forma particular el problema se suele dar cuando el código HTML que conforma una entrada no es correcto; hay etiquetas (o 'tags') que abren pero no cierra o que están mal anidados. Se dice que un tag "abre" cuando es de la forma <NOMBRE> y "cierra" cuando es de la forma </NOMBRE>. Lo que está en el medio de esas marcas es su contenido.
<NOMBRE>Contenido</NOMBRE>
Estas etiquetas se utilizan para definir todo lo que se ve (y no se ve) en una página web. Un ejemplo sencillo: la etiqueta 'b' sirve para mostrar un texto (el contenido) en negrita (o bold). <b>esto aparece en negrita</b> es mostrado por un navegador así: esto aparece en negrita. De la misma forma existen etiquetas para mostrar texto en itálica, poner colores, insertar imágenes y muchísimas cosas más.
Si te interesa aprender HTML podés leer este tutorial. Seguimos.
El siguiente es un ejemplo de tags mal anidados:
<div>
texto
<p>
texto
</div>
texto
</p>
En uno de los posts del sitio que revisé había un párrafo de esta forma:
<div>
palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras palabras
</p>
Se abría un tag 'div' y se cerraba uno 'p'. Este error era el que causaba el problema en este sitio en particular. Fue solucionado cambiando <div> por <p>. Puede ocurrir que el error no sea tan trivial, pero en la mayoría de los casos será de la misma familia, aunque esté más oculto.
La siguiente lista enumera 3 reglas para tener en cuenta como forma de prevensión de estos errores.
Reglas prácticas para no tener problemas al publicar en WordPress:
1) Antes de publicar, pasar de la vista Visual a la vista HTML y ver que no haya problemas como el que describí arriba con las etiquetas.
2) Insertar la etiqueta 'more' la vista HTML para asegurarse de que no sea insertada dentro de otras etiquetas:
<div>
texto
<!--more-->
</div>
está mal.
<div>
texto
</div>
<!--more-->
está bien.
3) Es una fuente de errores de este estilo copiar y pegar texto desde otras páginas web o documentos de Word (ya que traen atachadas muchas etiquetas de formato). Una práctica para estar seguros de que no traemos de esas marcas es pasar el texto por el bloc de notas antes de pegarlo en el editor de WordPress. Luego en el editor mismo podemos darle formato (negrita, itálica, etc...)