mandx's ramblings

Imagina que tienes un blog. Que lo tienes montado con WordPress (http://en NULL.wikipedia NULL.org/wiki/Wordpress). Que encontraste el tema perfecto para que tu blogcillo se vea súper coooool. Y a la larga, a medida que vas bloggeando, el tema perfecto ya no es tan perfecto.

Dicen (a mí no me crean) que en las relaciones lo que importa son los pequeños detalles. En esto de los temas también. Siempre es un margencito de más o de menos, el color del link en la esquina más recóndita de la página no me gusta, se ve feo el plugin que instalé (al menos no como el screenshot original), las imágenes aparecen pegadas a los párrafos…

Los que me conocen un poco y piensan que estoy escapao, podrán pensar: “¿Pero cuál es el problema? Entras al código, lo modificas a tu gusto, !y ya!”. Pero los que están escapaos de verdad, (y BTW (http://en NULL.wiktionary NULL.org/wiki/BTW) saben que yo no estoy tan escapaos como ellos), saben que eso es súper engorroso:

• Me estoy metiendo en código ajeno. No es que me acusen de allanamiento, es que hay una organización previa (si la hay) que el creador del tema tiene en su código, y debería seguirla. Si no hay tal organización, es peor todavía.
• Si el tema es actualizado (¡sí, al igual que los plugins!) cuando se ejecute la actualización, es necesario tener cuidado de no perder los cambios hechos por mí, las personalizaciones. O copiarlas aparte, y luego de actualizar, volverlas a aplicar.

En fin, todo un drama…

Y… entonces?

Bueno, no tendría mucho sentido un post sólo para quejarme del problema. Por lo general, la motivación para escribir de esto en mi blog es precisamente compartir cómo resolví el problema .

Y es ahora cuando se supone que el título cobre significado. Pues la solución no es mía original ni nada de eso, lo que tampoco se usa mucho (debería). La idea es simple, “temas hijos”, los cuales heredan las plantillas del tema padre, pero no los estilos (este es un detalle importante que veremos más adelante).

El tema hijo más sencillo: en el directorio de los temas de WordPress, se crea un subdirectorio con el nombre del nuevo tema, preferiblemente en minúsculas. Luego en él se crea el único archivo requerido para que valide como un tema, con las directivas apropiadas para que valide como tal, donde además, se especifica cuál es el tema padre:

/*
 * Theme Name: Current (parent: zBench)
 * Description: Current theme, child for the zBench theme
 * Author: Mandx
 * Template: zbench
 * */

@import url("../zbench/style.css");

div. entry div.img {
    margin-bottom: 18px;
}

li#recently-on-twitter.widget { }

li#recently-on-twitter.widget ul#recentlyOnTwitterListDisplayContainer {
    padding-top: 0;
}

li#recently-on-twitter.widget li.recentlyOnTwitterListItem div {
    border: none;
    padding: 0;
}

li#recently-on-twitter.widget li.recentlyOnTwitterListItem div a {
    text-decoration: underline;
}

Esto se guarda con el nombre styles.css y ya. Este es mi tema hijo. Al principio hay unas directivas dentro de comentarios CSS (http://en NULL.wikipedia NULL.org/wiki/CSS) (todo lo que está dentro de /* y */) que indican a WordPress que este es un tema hijo del tema zBench (cuando dice * Template: zbench), le pongo un nombre para identificarlo en la administración, una descripción (pa dar un poco e’ muela) y mi nombre como el autor (pa la autoestima).

Como vimos antes, decía que el tema hijo no hereda la hoja de estilos (http://en NULL.wikipedia NULL.org/wiki/CSS) del padre, sino que la reemplaza por completo. Pero CSS incluye una directiva para importar estilos de un archivo externo, y eso es lo que viene justo después: @import url("../zbench/style.css");, donde le digo que chupe todos los estilos del tema original.

Después de eso, todas las personalizaciones que se le ocurran a uno. En mi caso, corregí el margen inferior de las imágenes, que aparecían pegadas al párrafo siguiente (¡qué molesto!). Luego unos cuantos detalles más relacionados al plugin que muestra mis tweets (http://twitter NULL.com/mandx_ramblings) en la barra lateral.

Por supuesto, estas son correcciones menores, la idea de la herencia de temas en WordPress es mucho más amplia y sirve para muchas más cosas, pero ya en eso no me he metido. La idea es crear una forma de ajustar un tema a situaciones concretas que el diseñador no previó (vamos, que no puede preverlas todas), sin tener que ensuciarme las manos en código ajeno ni perder la opción de actualización del tema. Digamos, una solución “elegante”.

Referencias

Pero no me crean a mí, créanle a los tigres rayados de verdad. Hagan como los niños decentes que se leen la documentación antes de meter los cascos en el teclado y que se acuestan a las 8:00 pm con la calabacita (si existe). Aquí es de donde saqué la información necesaria para resolver mi problema y donde seguro que la hay para hacer cosas más locas con esta funcionalidad de WordPress.

Traben:

• Child Themes « WordPress Codex (http://codex NULL.wordpress NULL.org/Child_Themes) – Documentación oficial (empieza por acá).
• How to Modify WordPress Themes the Smart Way (http://themeshaper NULL.com/modify-wordpress-themes/) – Serie de cuatro posts sobre temas hijos en WordPress.
• How to make a child theme for WordPress: A pictorial introduction for beginners (http://op111 NULL.net/53) – Introducción ilustrada a temas hijos.
• Introducing Thirty Ten (http://aaron NULL.jorb NULL.in/blog/2010/04/05/introducing-thirty-ten/) – Guía sobre cómo crear un tema hijo del tema oficial de WordPress 3.0 “Twenty Ten”.