 |
| Un child theme es un tema derivado del tema principal Foto por Charles Chan on Flikr |
En Wordpress se llama Child Theme a un tipo de plantilla secundaria que se deriva de la plantilla principal. Es decir, del tema (theme) que tenemos instalado. No todos los temas admiten un child theme.
1.- Abrimos la carpeta wp-admin
2.- Abrimos la carpeta themes
5.- Ahora creamos el archivo style.css para esta carpeta que acabamos de abrir. Para ello iremos al menú de arriba y clicaremos en "nuevo archivo". Es muy importante que este archivo le llamemos style.css
6.- Nos posicionamos en el archivo que acabamos de crear (style.css), lo seleccionamos y abrimos el Editor de Código, que está en el menú de arriba. Antes de empezar a introducir nada, vamos a ver qué información es necesaria y qué información es optativa:
La idea de tener un child theme es que podremos modificar ciertas características del diseño de la plantilla en un directorio aparte, sin que se vea alterado el código de la plantilla madre. Cuando Wordpress nos avise que hay una nueva versión del tema principal, podremos actualizar el tema sin miedo a perder grandes cambios en el diseño de la
plantilla. Esto es porque estarán guardados en el Child Theme.
plantilla. Esto es porque estarán guardados en el Child Theme.
¿Cómo es posible todo ésto?: archivos style.css y functions.php
Los child themes solo requieren obligatoriamente un archivo style.css para funcionar. Todos los demás archivos que se puedan permitir son optativos. Uno de los archivos interesantes (y optativo) es el archivo functions.php. Veamos las diferencias entre estos 2:
- Archivo style.css: Precisamente es en este archivo donde se trabaja más el estilo y diseño de un tema. Otro aspecto muy importante es que en los Child Theme, todo lo que se edite en el archivo style.css sustituirá a la hoja de estilos del tema principal.
- Archivo functions.php: A diferencia del anterior, si añadimos un archivo functions.php en nuestro Child Theme, todo lo que añadamos en él será complementario al archivo functions.php principal, es decir no lo sustituirá. Así que una vez creado un Child Theme es interesante crear el archivo functions.php y realizar todos los retoques de la plantilla desde el Child.
También podemos añadir los Archivos de Plantilla (Templates) que se comportan del mismo modo que el archivo style.css, es decir sustituyendo o anulando los archivos del tema principal.
¿Cómo crear un Child Theme básico?
El Tema Twenty Twelve de Wordpress es un tema que soporta Child Themes. Vamos a hacer un Child Theme básico agregando sólo el archivo obligatorio style.css. Para empezar, entraremos en el panel de control que utilicemos para gestionar nuestro dominio. En este ejemplo nos vamos a CPanel, y al administrador de archivos. Entonces:
 |
| Pasos a seguir en el administrador de archivos de CPanel |
1.- Abrimos la carpeta wp-admin
2.- Abrimos la carpeta themes
3.- Creamos una nueva carpeta. Para esto nos iremos al menú de arriba y clicaremos en crear un nuevo directorio. Le daremos un nombre. En el ejemplo de la foto el nombre es twenty11babe. Clicaremos en "create a new folder" y veremos que se nos ha añadido.
4.- Clicamos en la carpeta que acabamos de crear. En el ejemplo, es en la carpeta twenty11babe. Veremos que está vacía.
6.- Nos posicionamos en el archivo que acabamos de crear (style.css), lo seleccionamos y abrimos el Editor de Código, que está en el menú de arriba. Antes de empezar a introducir nada, vamos a ver qué información es necesaria y qué información es optativa:
- Theme Name: Campo Obligatorio. Aquí pondremos el nombre exacto que hemos elegido para bautizar nuestro child theme.
- Theme URI: Optativo. Indica la web en la que usaremos el child theme.
- Description: Optativo. Podemos poner lo que queramos, por ejemplo que es nuestro primer child theme.
- Author URI: Opcional. Hace referencia a la web del autor del child theme. Podríamos poner nuestro blogfolio.
- Author: Opcional. Indicamos el nombre del autor del child theme.
- Template: Campo Obligatorio. Indicamos el nombre de la plantilla padre. En este caso al estar modificando la plantilla oficial de Wordpress Twenty Eleven, tendremos que escribir twentyeleven, porque así es tal y como se llama en el directorio. Si no, no funcionará.
- Version: Optativo. Indicamos el nombre de nuestra versión de child theme que estamos creando. Por ejemplo 1.0.
 |
| Ejemplo de código a introducir en el archivo style.css |
Tal y como podemos ver en la imagen de la izquierda y teniendo en cuenta estos parámetros, en nuestro ejemplo hemos editado el archivo style.css introduciendo el siguiente código:
/*
Theme Name: Twenty11babe
Theme URL: http://www.lawebtanaindiscreta.blogspot.com
Description: un child theme de Twenty Eleven creado por la Webtana Indiscreta
Author: Teresa
Template: twentyeleven
*/
@import url('../twentyeleven/style.css');
La referencia a @import indica que se importe el archivo style.css del tema principal (en este caso twentyeleven). Esta instrucción es obligatoria hacerla. Una vez editado el código le damos a "salvar cambios".
7.- Ya tenemos nuestro child theme creado. Ahora podremos ir a Wordpress y activar el tema. En un principio será idéntico al que teníamos, pues es a partir de ahora donde podemos empezar a jugar con el diseño y hacer que se diferencie mucho del tema principal. A los niños les gusta jugar.
Dejo el enlace a un vídeo de kimmimebaby donde podremos ver que estos pasos que acabo de explicar no son tan complicados como parecen.
Para ampliar información:
Hola, excelente post.
ResponderEliminarTengo dos dudas importantes:
En el tema hijo de la plantilla Customizr, debo insertar el siguiente código dentro de mi nuevo style.css o debo invocar el archivo blue.css, que es el que maneja todos los aspectos de estilo dentro de mi tema?
Tal como está propuesto, mi archivo style.css debería contener este código:
/*
Theme Name: customizr-child
Theme URI: plasticabariatrica.com/wp-content/themes/customizr-child
Description: Child Theme de Customizr para Plasticabariatrica.com
Author: Maria Silvia Cemborain
Author URI: tecnologiasos.com
Template: customizr
Version: 0.1
*/
@import url("../customizr/style.css");
Mi pregunta es, ¿si el archivo que tiene todo el código de estilos de mi sitio es más bien este:
wp-content/themes/customizr/inc/css/blue.css
No debería crear más bien un nuevo syle.css con el siguiente código?
/*
Theme Name: customizr-child
Theme URI: plasticabariatrica.com/wp-content/themes/customizr-child
Description: Child Theme de Customizr para Plasticabariatrica.com
Author: Maria Silvia Cemborain
Author URI: tecnologiasos.com
Template: customizr
Version: 0.1
*/
@import url("../customizr/inc/css/blue.css");
Otra pregunta:
¿Cómo hago si yo ya modifiqué algunos archivos de mi tema original (antes de crear el tema hijo), y no recuerdo exactamente cuáles modifiqué o si lo recuerdo, no se cuales líneas modifiqué con exactitud? debo copiar todos los archivos de mi plantilla al nuevo tema hijo?
Saludos y muchas gracias!
María Silvia