Hace tiempo partí este sitio con un theme que compré en Envato Market place, pero con el tiempo empecé a tener problemas, así que decidí hacerme yo un theme desde cero, el código se me iba a hacer más mantenible y podría hacer lo que quisiera. En este post comparto algunas cosas que aprendí haciendo este theme.

El resultado: Sentimientos encontrados

Mi objetivo era hacer un sitio simple, enfocado en el contenido, liviano de carga, pensando en mobile first y que el estilo reflejara mi personalidad. Lo que resultó no me tiene muy contento la verdad, porque en mobile se ve bien, pero me enfoqué tanto en la simpleza que en desktop queda demasiado espacio. No se me ocurre qué más ponerle, pero por otra parte no estoy seguro de que quiera añadirle más elementos ¿Han entrado a un sitio de noticias? Tienen 10 mil widgets por todos lados ¿Cuántos de esos realmente generarán una conversión? Si tienes alguna recomendación al respecto, o quieres decirme que hice un sitio de mierda, déjate llevar en los comentarios. En el peor de los casos, si lo hice muy mal, todavía puedo aprender.

Framework de Diseño: Fucking PureCss

Estoy acostumbrado a trabajar con Bootstrap así que esta vez para variar decidí usar PureCss había leído que es super rápido para cargar y me gusta que prácticamente no tenga apariencia ¿Entonces por qué “Fucking PureCss”? Al principio pillé un bug que se daba sólo en ciertos navegadores de tablet, así que no le dí mucha importancia. La grid del layout se desarmaba haciendo que las páginas perdieran todo el sentido. Luego me di cuenta que también pasaba en Firefox, y ahí me entré a molestar. Después de investigar un poco y tratar de solucionarlo no hubo caso así que quedé en un punto bien malo ¿Cómo le arreglo la diagramación de forma rápida, mantengo lo liviano y no tengo que rehacer todo el css? Me acordé que PureCss una de las ventajas que tiene es que juega bien con otras librerías, y que Bootstrap se puede descargar por partes, así que sólo descargué la grid de Bootstrap reemplacé esa parte de la diagramación. Creo que la carga sigue liviana, fue rápido y no tuve que rehacer la apariencia. No tengo muchas ganas en el futuro de usar Bootstrap, porque entre más lo uso más lento de carga lo encuentro.

Librerías jQuery para Todos

Como es de esperarse quería respetar las convenciones de desarrollo en WordPress, así que partí por encolar los estilos y scripts en el functions.php como lo indica el codex. Por si ese código les parece muy oscuro acá hay un tutorial bien bueno. El asunto es que mientras lo hacía me di cuenta de que no quería que cargara las librerías jQuery en páginas en donde no se usan, así que opté por usar la vieja usanza y puse las librerías con un condicional en el header.php. Por ejemplo usar is_page_template( 'teamplate-mytemplate.php' ) y dentro tirarle los tag script con la url así "<?php bloginfo('template_url'); ?>/myfolder/mylibrary.js". Funciona bien, el problema es que eso tampoco está correcto, porque hay que poner los condiciontales en el functions.php cuando se registran los estilos y librerías ¿Entonces por qué hice eso? Porque cuando lo estaba haciendo no vi que hubiera un parametro condicional en la función y los viejos hábitos me entregaron una solución, pero se puede, acá hay un ejemplo .

opra_meme_jquery_library

 

¿Adivinaron? Sí, me fui en la vola de la pasta y hasta raspe la pipa con las librerías jQuery, prácticamente hay 2 paginas que no tienen, el blog y el contacto. Y tal vez en el futuro le agregue algo para agrandar las imágenes. Les cuento cuáles usé:

  • Home: Amo esta librería se llama fullpage.js está hecha para hacer paginas en full width, ya sea con scroll horizontal o vertical. Cualquier cosa queda en 1 tamaño de la pantalla alto y ancho, de forma mágica. Pero yo lo usé de slider. Si les interesan las cosas así revisen los otros trabajos de ese autor que ha hecho varias bien interesantes.
  • Portfolio: Acá usé Masonry.desandro. No es la más fácil de implementar, de hecho primero traté con otra que se llama Isotope. Era más fácil de implementar y tiene unos ejemplos de cómo hacer filtros bien buenos, pero tenía problemas y no los logré solucionar. Por otra parte, Masonry.desandro tampoco es plug and play. Hay que usar Imagesloaded en conjunto porque de lo contrario no sabe cuándo las imágenes están cargadas y se sobreponen. Lo bueno es que eso está super bien explicado en la documentación. Lo malo es que cuando cambié a Bootstrap surgieron un par de bugs, en la versión móvil la barra de navegación de abajo se empuja fuera de la pantalla y se genera un espacio al lado izquierdo de las imágenes. Otra cosa que arreglar.
  • Archive: Quería hacer un template sencillo que mostrará todos los post de la forma más liviana posible, así que simplemente decidí ir por una tabla. El problema era que quería que las tablas se pudieran ordenar, pero no quería meterle Boostrap, así que terminé usando Tablesorter.js
  • About Me: Encontré una librería bien buena para hacer que los elementos html tengan animaciones, se llama Scrollme. Es genialmente sencilla de implementar, lo único que hay que hacer tenerla en el head, a los elementos html se les pasa una clase junto con un par de atributos y listo, no hay que hacer ninguna función en .js. El problema es que no sé si hice algo mal (pareciera que no) porque en móvil se corre hacia la derecha el menu de navegación, le escribí al autor preguntándole, a la fecha no hay respuesta, de ahí les cuento. Una cosa que hice para mejorar la usabilidad fue que la librería sólo funciona en móvil. Si el tamaño de la pantalla es mediano, remuevo las clases que usa la librería de los elementos html con jQuery y así en desktop no se carga.

Los comentarios: Disqus es mejor

Cuando empecé con el theme traté de manejar yo los comentarios con los templates que corresponden, pero después me pasé a Disques. Manejar los comentarios es un poco cacho porque dejarles la apariencia con la que vienen es poner un formulario más feo que el F29 del SII en tu página. Está la alternativa de hacer un template para eso, el problema ahí es que ese formulario maneja ciertos parámetros al hacer el POST que si no los ponen no funciona. Por otra parte tratar de customizarla obliga a pasar por una función que no es completamente personalizable. Y luego de hacer esto, se viene otro problema, que es que está listo el formulario, pero ahora falta poner los comentarios anteriores, que los usuarios se puedan responder entre ellos, que los comentarios se muestren completos, etc. Es suma y sigue el problema.

Lo que decidí finalmente fue usar Disqus, no tengo para que inventar la rueda de nuevo, me preocupa el spam, pero por el momento este no es un blog con millones de visitas, así que el Cutiko del futuro lo resuelva. Ahora, les advierto que la documentación de Disqus para integrarlo en WordPress es una mierda, así que ni el link para demostrarlo les dejo, pero sí les dejo este tutorial con el que lo hice, funciona peferct y es hasta elegante porque lo hace como una función en el functions.php. Una sola cosa que no está bien explicada, en el tutorial crean la función con un parámetro $parametro, cuando llaman a la función en su template cambiénlo por el shortname que tiene su blog en Disgus.

is_mobile es la luz… una luz tenue, pero luz

¿Cómo llegué a is_mobile? La verdad fue de pura suerte, les cuento. Quería optimizar el tamaño de las imágenes de acuerdo al tamaño de la pantalla del usuario. Cuando se obtiene una imagen se hace con php, entonces no podemos usar jQuery directamente para obtener el tamaño de la pantalla, habría que guardar la variable. Esa sería una buena solución pero algo larga. Luego encontré una librería que obtiene los tamaños de las pantallas con lujo de detalle y está hecha en php, se llama 51Degrees. El problema es que a pesar que la logré incluir nunca me arrojó ningún parámetro y la documentación es media escueta. Así que seguí buscando por otra librería que hiciera lo mismo, y en una respuesta número 80 de Stackoverflow alguien recomendaba is_mobile. is_mobile no es para nada perfecto, hay tantos tamaños de pantallas que es imposible que siempre obtenga el resultado. Es decir, no es confiable para hacer un layout basado en esa respuesta, pero yo no la quería para eso. Lo único que quería hacer era cambiar el tamaño de la imagen, en mobile un tamaño más apropiado y por lo mismo más liviano para que el 3g no se vaya a las pailas. Si eso falla, filo, no importa, te da una imagen más grande, sólo eso. También se podría usar para cambiar la cantidad de post por mostrar. En fin, siempre y cuando la diagramación del sitio no se base en is_mobile estaría bien. Una cosa que me trajo un par de charlas con Austral es que se supone que funciona por el user agent, pero php se ejecuta en el lado del servidor, lo raro es que hasta el momento me ha funcionado perfect. Así que si saben más acerca de cómo funciona el user agent y me quieren contar, se los agradecería.
masonry y scrollme