logoCoderhouse.png
Ë
By Ximena Vinitzca • December 4, 2015

La importancia de los ChildThemes

En Wordpress, los hijos también son lo más importante. Aprende a crear ChildThemes con este mini tutorial para Wordpress.

Soy Ximena Vinitzca, desarrolladora y profe de Coderhouse. Hoy, en mi primer post, les voy a contar que son los Childthemes y como crearlos.

Como dice mi madre, para entender a los chicos, primero hay que mirar a los padres.
Para empezar, Wordpress es un CMS (Content Management System) que utiliza plantillas o templates como estructura básica y en este sistema se les llaman themes. Un theme es un conjunto de archivos con estructura, funciones y diseño, que nos permiten darle forma y personalidad a nuestro sitio web. Estos themes podemos comprarlos en sitios como ThemeForest o crearlos nosotros mismos. En cualquiera de los casos, a esta estructura que vamos a utilizar de base, se la llama “Parent-Theme” (Plantilla padre).

Un Child-theme, es una plantilla (hijo) que hereda todas las funcionalidades y estilos del padre. Este (hijo) nos permite realizar, en sus archivos, todas las modificaciones que necesitemos sin tener que preocuparnos por las actualizaciones del Parent-theme.

Vamos a verlo con un ejemplo:

Supongamos que descargamos una plantilla gratuita que nos gusta, pero quisiéramos hacerle algunos cambios en su estructura o diseño. Para comenzar, buscaremos en sus archivos, aquello que queremos modificar. Pero, ¿Qué pasa cuando este theme que descargamos tiene una actualización? Cuando implementemos esta actualización, todas las modificaciones que realizamos, desaparecerán. Esto sucede debido a que estos archivos, reemplazan los anteriores.

Por el contrario, si antes de comenzar a trabajar crearon un child-theme y las modificaciones las hicieron sobre esos archivos, cuando actualicen el Parent-theme, todo estará en su lugar.

 

¿Cómo hacer para crear un child-theme?

  1. Primero debemos crear una carpeta dentro del directorio wp-content/themes. Esta carpeta debe tener un nombre sin espacios y fácil de reconocer. Lo que se suele utilizar es el nombre del padre más la palabra child. Por ejemplo, si queremos crear un child theme del “Twentyfifteen”, el nombre debería ser “twentyfifteen-child”.
  2. Dentro de la carpeta del Child-theme, debemos crear un archivo que se llame style.css. Al comienzo de dicho archivo, debemos escribir las siguientes líneas:

 

Captura de pantalla 2015-11-23 21.02.26

/*

Theme Name:   Twenty Fifteen Child
Theme URI:    http://example.com/twenty-fifteen-child/
Description:  Twenty Fifteen Child Theme
Author:       El nombre de uds
Author URI:   http://example.com
Template:     twentyfifteen
Version:      1.0.0

*/

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

/* =Aquí empieza la personalización de tu tema

-------------------------------------------------------------- */

 

Leámos en detalle cada una de estas líneas:

Theme Name: Es el nombre del Child-theme
Theme URI:  Es la URL donde va a estar alojado el sitio que estamos trabajando
Description: Es una pequeña descripción de nuestro child theme
Author: Es el nombre de uds o de la empresa creadora del child
Author URI: Es la URL de uds o de su empresa
Template:  Esta es la línea más importante, debe ir el nombre del Parent-theme.
Versión: Es la versión del child que estamos creando

@import url: Aquí es donde le estamos diciendo que éste child, debe heredar todos los estilos del Parent-theme.

 

Debajo de “Aquí empieza la personalización de tu tema”, es donde debemos comenzar a escribir los estilos que queramos agregar o modificar.

Para que todo funcione bien, debemos ingresar al panel de control de Wordpress. En Apariencia > Temas, vamos a ver que ahora aparece el child theme que acabamos de crear.

Captura de pantalla 2015-11-23 21.17.59

Finalmente, debemos activarlo para que este comience a ser nuestro theme principal.

Captura de pantalla 2015-11-23 21.18.17

Ahora podemos comenzar a trabajar sin preocupaciones.
¡Manos a la obra!