Creando un child theme estilo Boing Boing en WordPress

La semana pasada estuve trasteando con WordPress y como resultado he empezado a crear un `child theme´ propio a partir del tema Twenty Thirteen. Lo que voy haciendo lo estoy compartiendo en un repositorio de Github asi que le podéis echar un vistazo si queréis, aunque todavía no está del todo a punto para usarse en otros blogs.

El objetivo principal de mi child theme era darle más protagonismo a las imágenes y también corregir algunos cosas que no me gustaban de la forma de visualización del tema Twenty Thirteen en el iPad.

Potenciando las imágenes al estilo Boing Boing

Descubrí que el mítico blog americano BoingBoing había migrado a mediados del 2011 de Movable Type a WordPress y me encantó lo que hacían en alguno de sus post especiales. Como se puede ver encabezan las entradas con una imagen gigantes de 500 pixels de alto que ocupa toda la pantalla horizontalmente y que se va adaptando según modificas la ventana del navegador.

Lo vi y me dije: ¡yo eso lo quiero en mi blog! y con un poco de empeño lo he conseguido:

En el camino tuve que aprender varias cosas que para un principiante como yo en WordPress fueron toda una novedad: crearme un child theme, estilos personalizados, un fichero functions.php, header.php y content.php modificados.

Aun pecando de soberbio creo que en algunos aspectos he conseguido mejorar el diseño original en algunos aspectos, por ejemplo con un poco de Responsive Design he configurado los estilos para que a partir de 640 píxels la imagen enorme se retire de la cabecera y se sustituya por una imagen estándar:

Asi es como se ve en una pantalla algo más pequeña:

Este comportamiento sólo se tiene que producir cuando te encuentras dentro de una entrada y no cuando estás en la portada, por lo que también tuve que aprender como se asigna un nombre especial de clase a the_post_thumbnail() dependiendo de si se muestra dentro de un entrada o fuera de ella.

Algo similar hice en la home para dispositivos móviles, eliminando la cabecera y sustituyéndola por el logotipo… ya que no es conveniente a un usuario que probablemente está usando un plan de datos móvil obligarle a descargar una imagen de 1600×230 pixels, que además no va a poder disfrutar.

Mejoras en la versión para iPad

Aunque el término mejora es subjetivo, soy de la opinión de que a un iPad hay que mostrarle tu página tal y como se vería en un navegador de escritorio, sobre todo cuando está en posición horizontal, no me gustan las webs que me redirigen a versiones especiales adaptadas a tableta y menos aun las que te obligan a descargarte un App para poder entrar desde una tableta.

Era muy extraño en el tema Twenty Thirteen por defecto la página `escalaba´ y en lugar de aprovechar los 1024×768 pixels  de los que dispone un iPad2 o mini-iPad sin pantalla retina (1024×624 si descontamos el espacio que se pierde por el interface del propio Safari)… la resolución equivalente aprovechable se veía reducida a lo que calculé serían unos 768×488 pixels.

La solución es bien  fácil, modificar en el header.php el meta viewport:

Ahora se ve tal que así en posición horizontal (emulación hecha en ipadpeek.com):

En posición vertical desaparece la barra de menú lateral, que es lo mismo que pasa si en un ordenador de escritorio reducimos en el navegador la ventana a 768 pixels:

Logotipo flotante

Con respecto al nuevo logotipo de mi blog, cortesía de nuestro Faro el Sr. Pablo Moya, todavía no está del todo terminado pero será muy parecido a este. Usando la letra Avengeance Heroic Avenger encontrada en la excelente web dafont.com:

Otras pequeñas mejoras

• Para añadir el logotipo al blog primero lo hice a pelo, modificando el header.php y metiéndolo la URL de la imagen que previamente había subido por FTP. Esta solución no me gustaba porque era un poco chapucera. Así que me instalé el plugin Website Logo, que te permite subir un logotipo desde Apariencia al que luego puedes llamar a través de código. Aunque ahora el funcionamiento del child-theme depende de la instalación de ese plugin (si es que quieres tener logotipo flotante) me parece una solución más acertada.
• La cabecera de Twenty Thirteen (que aun mantengo en todo lo que no son posts que disponen de imagen destacada) ahora se estira más allá de los 1600 pixeles que antes tenía de top.

Mejoras pendientes que tengo en mente

• Algunos ajustes estéticos a nivel de colores y modificar la navegación en la home que me parece bastante hortera con esas súper flecha para ir hacia atrás y adelante.
• Mejorar aun más el Responsive Design asegurándome sobre todo que sirvo las imágenes más optimizadas posibles a cada dispositivo.
• Más allá del `child theme´ hay cosas de WordPress que todavía no domino, por ejemplo aunque he conseguido montar una versión de mi blog en local para hacer todas estas pruebas sin miedo a romper nada en `producción´… es un auténtico leñazo mantenerla sincronizada, porque entre otra cosas me veo obligado a tener una copia de la base de datos en localhost para disponer de una versión de wp_options que apunte a la URL local. Pablo planteaba es su blog una solución para emular URLs reales desde local con Apache, pero no tengo del todo claro que sea la solución más adecuada para mi.
• También tengo que darle una vuelta a la optimización de la velocidad, algo de lo que todavía no me he preocupado. Probé a usar W3 Total Cache, pero lo tuve que quitar porque no soportaba las infinitas carpetas que crea… supongo que no me voy a poder librar de cachear pero necesito un plugin que no sea tan agresivo.

En definitiva mucho por hacer, pero con esta primera fase me voy acercando más a la imagen que en mi mente quería darle a mi blog y lo más importante estoy aprendiendo un montón a base de trastear.