"El diseño es el embajador silencioso de tu marca"
- Paul Brand

Temas hijos en WordPress

Los temas hijos en WordPress son indispensables para personalizar tu tema de WordPress.

Actualmente para usar WordPress puedes hacer dos cosas, o bien usas un tema creado por un tercero (sea gratuito o de pago) o te creas tu propio tema.

Crear un tema de WordPress es una tarea compleja que requiere además de conocimientos amplios de programación en distintos lenguajes, un conocimiento también profundo de como funciona WordPress.

Es por ello, que la amplia mayoría de los WordPress  que vemos montados en la actualidad están basados en los temas que trae la plataforma por defecto, o por temas que podemos encontrar en su buscador o comprar en sitios como Themeforest, Template Monster, Elegant Themes…

La problemática que presenta usar estos temas es que en muchos casos ya tenemos una página web y queremos que el blog se adapte a su identidad y no que al contrario, algo que solo integrando los colores corporativos desde el panel de administración no sirve.

Otra faena es que si pretendemos usar un tema bastante conocido, nuestra página va a parecer un clon de otras tantas que también lo usan.

En estos casos lo que muchos hacen es editar el tema, es decir, irse a la carpeta y empezar a modificar el código para personalizarla y hacerla parecida a su web.

Esto está muy bien pero presenta un problema muy grande y es que nos tenemos que atar a esa versión del tema o perder los cambios, ya que actualizar el tema implica sobreescribir todos los ficheros.

Ni es bueno que nos quedemos desfasados, ni es mantenible tener que rehacer todos los cambios cada vez que actualizamos, por eso tenemos que usar los temas hijos en WordPress!

Ventajas de los temas hijos en WordPress

La principal ventaja es que es un tema independiente que extiende del tema que nosotros le digamos.

El concepto de extender esta muy relacionado con la herencia, si no eres programador o no tienes muy claro el concepto, cuando en programación orientada a objetos se habla de ella se dice:

Es el mecanismo más utilizado para alcanzar algunos de los objetivos más preciados en el desarrollo de software como lo son la reutilización y la extensibilidad.

La herencia facilita la creación de objetos a partir de otros ya existentes e implica que una subclase obtiene todo el comportamiento (métodos) y eventualmente los atributos (variables) de su superclase.

Si este concepto lo extrapolamos a un tema, que extienda o que herede de un tema padre implica que va a usar todo lo que nos proporciona ese tema (será como si lo hubieramos seleccionado) y a mayores aumentará su funcionalidad con lo que contenga el tema hijo.

Y al igual que sucede con la herencia clásica de clases, si el hijo define un elemento del padre este será sobreescrito y de esta manera es como se hacen modificaciones.

Por tanto las ventajas de todo esto son:

  • Tenemos un tema reutilizable propio basado en otro de un tercero con lo que estamos modularizando nuestro código y desacoplandolo.
  • Es más seguro, pues al ser un tema distinto, las actualizaciones del tema padre no machacan nuestras evoluciones.
  • Al estar desacoplado y tener siempre nuestro código localizado, el desarrollo debería ser más rápido pues es más mantenible.

Siendo justos tambien tiene alguna desventaja respecto a los temas normales, como podría ser que al estar sobreescribiendo estilos y funcionalidades realmente se están cargando ambas.

Este tipo de dualidad:

  • Penaliza el rendimiento un poco por tener que cargar más ficheros.
  • Puede provocar conflictos si no tenemos ciertas nociones de programación, por ejemplo, una regla css no tiene porque aplicarse solo por ser cargada después.

De todas formas el impacto es muy pequeño y un programador no debería de tener problemas para integrarlos, por lo que a mi juicio el uso de temas hijos esta más que justificado y es muy necesario.

Como creo temas hijos en WordPress

La realidad es que crearlos es tan sencillo que el proceso se puede llevar a cabo en un minuto, me explico…

* Si quieres complementar este post con la información oficial pulsa este enlace.

 

En primer lugar ubica de que tema quieres que extienda (un tema hijo obviamente necesita que tengamos instalado el tema padre).

Para hacerlo sencillo, vamos a pensar en que queremos extender un tema que viene por defecto, como el ‘Twenty Seventeen’.

 

Para crear un tema hijo vamos a crear una nueva carpeta y nombrarla como ‘tema-personal’.

Dentro de esa carpeta tenemos que tener dos archivos al menos para que esto funciones, se llaman style.css y el functions.php.

El style.css tiene que tener esta estructura.

Esta hoja de estilos se carga al final y por lo tanto si lo hacemos bien podemos sobreescribir los estilos originales, incluir nuevas fuentes, añadir imagenes, etc…

Como nota el Theme Name es el nombre de nuestro tema, el que despues veremos cuando desde el panel de administración lo seleccionemos.

El Template es el tema padre, cuidado con esto, tenemos que poner el nombre de la carpeta donde esta alojado. Y si además nuestro entorno es Linux (como será en la mayoría de los casos, al menos en producción) recuerda que este es un sistema case sensitive, así que cuidado con las mayúsculas y las minúsculas.

Luego tenemos el functions.php, que no tiene el propósito de sobreescribir el functions.php del tema padre, sino que se añade a él (se concatena antes por decirlo así).

No hace falta que copies todo el contenido de functions.php del tema padre en functions.php del tema hijo.

Lo que si que tenemos que hacer desde este archivo es llamar a esta hoja de estilos que acabamos de definir, el código sería este…

Conclusiones

Esto que acabamos de explicar es lo básico, puedes probar con los pasos de arriba a modificar cualquier tema, lo importante es que las posibilidades que esta manera de trabajar nos ofrece son muy grandes.

No dudes la proxima vez que quieras modificar un tema de un tercero y usa sin miedo los temas hijos en WordPress.

The following two tabs change content below.
Especialista en diseño web responsive, programador html5, css3, jquery, php y java.

Latest posts by Óscar Lijó (see all)