WordPress nos ofrece una potente herramienta. Permite crear un child theme o tema hijo que dependa de otro theme o tema (denominado tema padre). De esta manera podemos realizar modificaciones en el tema hijo que permanecerán aun cuando se actualice el tema padre.

Para no liarnos, debemos tener en cuenta que lo que habitualmente conocemos como plantilla WordPress, en realidad deberíamos llamarlo como tema o theme.

Por ejemplo, DIVI es un tema o theme y NO una plantilla. Dicho tema está compuesto por un conjunto de plantillas (archivos php) como el header.php, footer.php, page.php, sidebar.php, etc. Por esta razón no hablamos con propiedad cuando nos referimos a plantillas WordPress. En realidad deberíamos decir temas o themes para WordPress.

 

DESCUENTO DIVI

 

 

1.- ¿QUÉ ES UN CHILD THEME O TEMA HIJO PARA WORDPRESS Y PARA QUÉ SIRVE?

 

¿Qué es un tema hijo o child theme?

 

Un WordPress child theme o tema hijo es un tema que hereda las características de otro tema del que depende. Este último denominado tema padre.

Es decir, el tema hijo depende del tema padre. Si no existe el tema padre, el tema hijo no puede funcionar.

Un tema hijo está compuesto, por lo menos, por una carpeta o directorio con el nombre del child theme y un archivo style.css incluido en su interior.

 

 

Para qué sirve un child theme WordPress

 

Los child theme WordPress o temas hijo permiten añadir o modificar funcionalidades del tema padre. Un tema hijo es la forma más fácil y segura de modificar una plantilla.

En vez de modificar directamente el código, creamos un tema hijo con las modificaciones. Con ello nos ahorraremos tener que volver a realizar las modificaciones al actualizar la plantilla.

 

Te explico más detenidamente para qué sirve un child theme o tema hijo:

 

Seguro que te habrá ocurrido alguna vez. Estás trabajando en una web WordPress con una determinada plantilla y descubres que no hay ninguna opción en el panel de administración para poder realizar una determinada cosa. Para realizar dicha modificación tienes que tocar el código del tema.

 

Trabajando sin temas hijo: si no estamos trabajando con un child theme o tema hijo realizaremos las modificaciones directamente en la plantilla. No hay problema, conseguimos los cambios que queríamos. Pero, cuando actualicemos la plantilla dichas modificaciones se pierden y tenemos que volver a realizarlas.

Si hemos hecho pocas modificaciones no hay mucho problema, ¿pero que ocurre si hemos realizado muchas modificaciones?

Si, pues que es un follón.

 

Trabajando con temas hijo: si trabajamos con un child theme realizaremos las modificaciones en éste. Al contrario de lo que ocurría cunado trabajábamos sin temas hijo, ahora al actualizar la plantilla padre no se perderán los cambios (ya que éstos están en el tema hijo), por lo que no tendremos que volver a realizar las modificaciones.

 

 

2.- CÓMO FUNCIONA UN CHILD THEME WORDPRESS

 

En general podemos decir que WordPress prioriza el contenido del tema hijo frente al contenido del tema padre. El contenido del tema padre sirve para completar lo que no está en el tema hijo. Pero no es exactamente así. Según sea el tipo de archivo el funcionamiento es diferente.

 

Wordpress child theme - tema hijo wordpress

Tema hijo WordPress

 

Vamos a verlo:

 

Hojas de estilo

 

WordPress tomará primero los estilos CSS incluidos en el tema hijo a los que dará preferencia y seguidamente utilizará los estilos del tema padre no incluidos en el hijo.

El archivo style.css del tema hijo invalida el archivo del tema padre por lo que se debe realizar una importación, como veremos en el apartado de creación de un child theme. No te asustes, ya verás que es muy fácil.

 

Plantillas del tema

 

Si queremos modificar alguna plantilla del tema, por ejemplo el: footer.php, header.php, etc. debemos añadir una copia del original al tema hijo y ahí realizar las modificaciones. Estos archivos anulan los del tema padre. Es decir, WordPress carga los archivos de plantillas del tema hijo y los que no tenga definidos en el tema hijo los cargará del padre.

Esto se usa habitualmente para modificar el texto de pie de página (footer) que incluyen muchas plantillas y que no permiten modificar. Este texto habitualmente está incluido en el archivo footer.php. La operación habitual es copiar este archivo en el tema hijo y modificar en éste el texto de pie de página. De esta manera no tendremos que volver a realizar la modificación tras actualizar la plantilla.

 

Funciones, el archivo functions.php

 

WordPress leerá primero el archivo functions.php del tema hijo (si lo hubiera) y a continuación cargará el archivo functions.php del tema padre.

WordPress no sobreescribe el archivo functions.php del tema padre, dará preferencia a las modificaciones realizadas en el tema hijo.

Por lo tanto no hay que copiar el archivo functions.php en el tema hijo. Hay que crear un archivo vacío con la apertura php y con el nombre functions.php. En este archivo añadiremos las funciones que queramos para no perderlas cuando se actualice la plantilla.

 

 

3.- CÓMO CREAR UN TEMA HIJO WORDPRESS O CHILD THEME

 

Un tema hijo o child theme está formado como mínimo por una carpeta con el nombre del child theme y un archivo style.css en su interior.

 

 

Carpeta del child theme o tema hijo

 

La forma habitual de nombrar a la carpeta o directorio del child theme es la siguiente (aunque le puedes poner el nombre que quieras):

“nombretemapadre-child”

Es decir, si estamos utilizando la plantilla Divi, podemos nombrar a la carpeta del tema hijo como:

Divi-child

 

Estructura de un child theme o tema hijo

Ejemplo de estructura de un tema hijo: style.css, footer.php, functions.php y screenshot.png

 

Archivo Style.css

 

Para crea el archivo style.css accede a tu editor de texto (yo utilizo notepad++), crea un archivo nuevo y cuando vayas a guardarlo ponle el nombre “style” y elige guardar como: “Cascade Style Sheets File (*.css)”

 

Una vez creado el archivo vamos a darle contenido. Te pongo a continuación un texto genérico para hacer un child theme de la plantilla Divi:

/*
Theme Name: Divi hijo
Theme URI: http://www.horizonweb.es
Author: Joaquin Barbera
Author URI: http://www.horizonweb.es
Description: Child Theme del tema Divi
Version: 1.0
Template: Divi
*/
 
@import url("../Divi/style.css");

 

Voy a explicarte cada una de las partes del código:

 

*/ apertura de etiqueta de comentarios

Theme Name: nombre del tema que estás creando. Habitualmente se pone el nombre de la plantilla padre + hijo o child. Por ejemplo: Divi hijo

Theme URI: se refiere a la URL de la página web del tema. Puedes poner la URL de tu sitio web. Por ejemplo: http://www.horizonweb.es

Author: Nombre del autor del child theme. Por ejemplo: Joaquin Barbera

Author URI: Aquí iría la URL del autor. Puedes poner otra vez la URL de tu página web. Por ejemplo: http://www.horizonweb.es

Description: Aquí iría una descripción del tema hijo. Por ejemplo: Child Theme del tema Divi para configurar características personalizadas.

Version: Versión del tema hijo. La primera versión sería la 1.0

Template: Mucho ojo con este punto. Aquí hay que poner el nombre de la carpeta del tema padre. En el caso de la plantilla DIVI deberemos poner: “Divi”. Si ponemos aquí un nombre diferente al de la carpeta de la plantilla padre, el tema hijo no funcionará.

Nota: para saber el nombre de la carpeta de la plantilla padre puedes acceder a WordPress vía FTP o a través del administrador de archivos del hosting. La carpeta de la plantilla padre estará en la ruta:

wp-content/themes

*/ cierre de etiqueta de comentarios

 

Ahora debemos hacer un import para importar la hoja de estilos de la plantilla padre. Para ello debemos poner la siguiente instrucción:

@import url(«../Divi/style.css»);

Nota: La instrucción anterior sería para crear un child theme de DIVI. En caso de querer hacer un child theme de otra plantilla diferente donde pone “Divi” debemos sustituirlo por el nombre de la carpeta de la plantilla padre.

 

 

4.- DIVI CHILD THEME

 

Si utilizas Divi o Extra te dejo aquí unos child theme ya creados preparados para que te los descargues. Los archivos te los dejo comprimidos y preparados para instalarlos en tu wordpress.

En el siguiente punto te indico como instalar la plantilla hijo.

 

Descarga Child Theme DIVI

 

Descarga child theme EXTRA

 

 

 

5.- COMO INSTALAR UN TEMA HIJO WORDPRESS O CHILD THEME

 

Es muy importante tener una cosa en cuenta. El orden de instalación del tema padre y el tema hijo es indiferente. Pero, cuando activemos el tema hijo, el tema padre debe estar instalado.

Para no equivocarnos seguiremos el siguiente procedimiento:

 

 

Instalar el tema padre pero no activarlo

 

En primer lugar procederemos a instalar el tema padre. Lo más sencillo es utilizar el procedimiento tradicional realizado desde el panel de administración.

Para ello iremos a: “panel de administración > Apariencia > Temas”. Ahora haremos clic en el botón de situado de la parte superior: “Añadir nuevo”.

Ahora haremos clic en el botón situado en la parte superior: “Subir tema”, elegiremos la plantilla (que ha de estar comprimida) y la instalaremos.

Una vez instalada la plantilla NO LA ACTIVAREMOS.

 

 

Instalar tema hijo y Activarlo

 

De la misma manera que hemos instalado la plantilla padre podemos proceder a instalar el child theme o tema hijo. Recuerda que para instalarla siguiendo el procedimiento anterior el child theme ha de estar comprimido.

 

Otra forma de instalar el tema hijo sería colocando la carpeta o directorio del child theme (esta vez sin comprimir) en la ruta:

wp-content/themes

El tema hijo quedaría al mismo nivel que el tema padre.

Una vez instalado el child theme SI DEBEMOS proceder a ACTIVARLO.

Es decir, el tema padre quedará instalado pero no activado. Mientras que el tema hijo quedará instalado y activado.

 

Compártelo ya!!

ACCEDE A TODOS MIS CURSOS POR SOLO 10€/MES

1.- CURSO WORDPRESS (44 Clases)
2.- CURSO DIVI (33 Clases)
3.- CURSO BLOOM + MAILCHIMP (7 Clases)
4.- CURSO SEO (19 Clases)
5.- CURSO BLOG WORDPRESS (32 Clases)
6.- CURSO WOOCOMMERCE (39 Clases)
7.- CURSO FLATSOME WORDPRESS (36 Clases)
8.- CURSO COLORES WEB (9 Clases)
9.- CURSO ANALYTICS (10 Clases)
10.- CURSO GESTIÓN IMÁGENES WEB (15 Clases)
11.- CURSO SEO PARA TIENDAS ONLINE (12 Clases)
12.- ETC. ETC.
*** ADEMÁS TIENES MI SOPORTE VÍA EMAIL***

IR A LOS CURSOS

Vé a tu buzón de correo y confirma la suscripción. Si no encuentras el correo de confirmación mira en la carpeta de SPAM.