WordPress

Qué son los child themes y por qué son importantes en WordPress

Nueva entrada en el blog para saber qué es un child theme y para aprender cómo crearlos a la hora de desarrollar en WP.

Completo análisis de los Child Theme de WordPress

Antes de entrar en materia os recomiendo estos interesantes post sobre WordPress:

¿Qué es un child theme en WordPress?

Los child theme son también conocidos como ‘tema hijo‘, es decir que dependen de un tema padre del cual usarán todas las funcionalidades que no modifiquemos en este. Se entiende que el theme padre del que se parte siempre está instalado en nuestro servidor.

¿Para qué sirve un theme child?

Cuando desarollas una nueva funcionalidad que no viene por defecto en el theme puede llegar a desaparecer cuando se actualiza el theme, de esta manera podemos modificar, añadir o eliminar funcionalidades a nuestro antojo sin perder los cambios cuando se actualiza dicho theme padre.

Explicación de la web oficial:

Un tema hijo es la forma más segura y fácil de modificar un tema existente, tanto si se quiere hacer pequeños cambios como otros más amplios. En lugar de modificar los archivos del tema directamente, es posible crear un tema hijo y hacerlo prevalecer sobre el tema padre.

¿Se tiene que actualizar?

La respuesta es no, para eso su ventaja y utilidad. Por mucho que se hagan actualizaciones sobre un padre… el theme hijo permanece sin modificación alguna. La única actualización es la que hagamos nosotros.

¿Puede contener un tema hijo un theme que he comprado?

Cada vez más son los themes que traen por defecto su theme child, sobre todo los de pago.

Cómo crear un tema hijo

Para crear un child theme hay que seguir rigurosamente estos pasos:

  • Creamos una carpeta dentro del directorio de themes de nuestro servidor /wp-content/themes/+nombre-carpeta/.
  • A poder ser para un fácil mantenimiento podemos ponerle el nombre del theme padre + ‘-child’, opr ejemplo quedaría así: /wp-content/themes/theme-padre-child/.
  • En esta carpeta creamos un fichero que se llame ‘style.css‘.

El código que debe tener este fichero es el siguiente:

/*
 Theme Name:   Twenty Fourteen Child
 Theme URI:    http://example.com/twenty-fourteen-child/
 Description:  Twenty Fourteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfourteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-fourteen-child
*//* =Aquí empieza la personalización de tu tema
-------------------------------------------------------------- */

Repasamos cada punto del código:

  • Theme URI: En caso de que el theme tenga una web oficial ponemos la URL, si no la nuestra.
  • Description: Descripción del theme.
  • Theme Name: Nombre que le queremos dar al theme  –> Nombre Theme Padre Child.
  • Theme URI: URL oficial del theme.
  • Description: Una descripción corta del theme.
  • Author: Nombre Autor.
  • Author URI: URL de la web del autor.
  • Template: Nombre de la plantilla padre.
  • Version: Número de versión.
  • License: Tipo de licencia.
  • URI: URL de la licencia.
  • Tags: Tags descriptivos del theme.
  • Text Domain: nombre-theme-padre-child.

Y a partir de donde empieza la personalización podemos meter las modificciones CSS que necesitemos, además podemos sustituir más ficheros del theme, los pasos a continuación:

  • Por ejemplo si queremos realizar una nueva versión del header.php solo tendremos que copiar dicho fichero a nuestra carpeta y personalizarlo como queramos. Y así con lo que queramos o necesitemos modificar.

Es importante saber que el fichero functions.php no se puede sustituir o modificar, podremos crear uno en nuestro directorio del theme child, pero el código que escribamos en él se interpretará como si estuviese al final del fichero functions del theme padre.

compartir
Publicado por
Aner Barrena