WordPress header dentro de body


Hace unos días, en la oficina llegaron a mi con un sitio desarrollado en WordPress que supuestamente tras ser actualizado a la versión mas reciente (al momento de escribir esta entrada, 3.9.1), dejó de funcionar correctamente, y el crossbrowsing dejó de funcionar; hasta la fecha solo damos soporte para IE9, IE10 e IE11.

Todo fue bastante raro, el primer error que detecté fue que el sitio tenía un infinite scrolling, el cual no funcionaba de manera normal, es decir, cargaba todos los posts de trancazo (alrededor de 400), lo cual afecta el performance del sitio.

Comencé a revisar el código y me topé con algo bastante extraño, el contenido que normalmente va dentro de <head></head>, como son scripts, meta tags y hojas de estilos, se encontraban justo después de abrir la etiqueta <body>, algo muy similar a la siguiente imagen:

code

Empecé a comentar lineas de código del template para ver que era lo que sucedía, pero desafortunadamente, no podía dar con el error. Estuve un día y medio buscando en Internet si alguien se había encontrado con el mismo problema que yo, y bueno al parecer, a muchos developers les ha pasado lo mismo.

El error reside en que los archivos tienen una codificación distinta a UTF-8, muchos mencionaban un UTF-8 with BOM.

Desde que comencé a trabajar con WordPress, nunca me había topado con algo así, ya que me comentaban que el sitio funcionaba perfectamente, pero se me hacía muy raro que en IE9 se rompiera todo el diseño, como si no se hubiera planeado, y en IE10 el infinite scroll no funcionara.

En fin, lo único que hice fue guardar los archivos del theme con encoding UTF-8 y el sitio volvió a funcionar correctamente, los scripts, meta tags y hojas de estilos se posisionaron dentro de head, el sitio se compuso automáticamente en IE9 y el infinite scrolling volvió a funcionar en IE9 e IE10.

Anuncios
Esta entrada fue publicada el 16 junio, 2014 a las 23:05. Se guardó como Tech y etiquetado como , , , , , , . Añadir a marcadores el enlace permanente. Sigue todos los comentarios aquí gracias a la fuente RSS para esta entrada.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: