¿Qué es un tema hijo o child theme?
Un tema hijo es un tema que depende y está basado en otro que podríamos llamar el tema Padre. Es decir, que un tema hijo tiene todas las características y funcinalidades del tema padre desde un comienzo y luego nosostros/as podemos modificar estas características y funcionalidades a nuestro gusto sin que afecte para nada al tema padre.
¿Por qué debemos utilizar themas hijo?
Como acabo de comentar, al utilizar temas hijo no modificamos nada del tema padre por lo que si algo sale mal, siempre podemos volver al tema padre hasta que solucionemos el problema del tema hijo.
Muchas veces tenemos que cambiar el código del tema para cambiar alguna característica, algo de css, html, etc… Pero si en lugar de hacerlo sobre el código del tema padre lo hacemos en el tema hijo, esto no afectará para nada al tema original. Código más limpio.
Empezando por el principio.
En este artículo vamos a crear un tema hijo (child theme) del tema DIVI, el famoso tema de Elegant Themes.
Como siempre que creamos un tema, creamos un directorio con el nombre del nuevo tema como por ejemplo: «apinco-divi», por ponerle un nombre.
Ahora, dentro de este directorio creamos un fichero con el nombre «style.css» e incluímos el siguiente código al principo del fichero:
/* Theme Name: Aprende Informática Conmigo DIVI Child Theme Theme URI: https://www.aprendeinformaticaconmigo.com Version: 1.0 Description: Un tema hijo de DIVI para realizar una prueba y ver cómo podemos hacer un child theme de DIVI. Author: Oscar Abad Folgueira Author URI: http://www.oscarabadfolgueira.com Template: Divi */
No tiene mucha explicación el código anterior, es simplemente seguir esta estructura.
Eso si, hay que hacer una mención especial a la última línea: «Template: Divi» ya que a través de esta línea le estamos diciendo a WordPress que este tema deriva, se basa y es hijo del tema divi que estará en el directorio «Divi» del directorio «wp-content/themes«.
¿Hay que hacer algo más?
Pues si, porque si lo habilitamos así, como está, no cargará los css del tema padre por lo que tenemos que decirle que importe los estilos del tema padre.
Podemos hacerlo de dos formas:
Primera forma: Esto lo incluímos en el mismo fichero «style.css» que acabamos de crear.
@import url("../Divi/style.css");
Ahora bien, a mi me gusta más utilizar lo siguiente y para ello debemos crear un nuevo fichero con el nombre «functions.php» e incluir el siguiente código:
<?php
add_action( 'wp_enqueue_scripts', 'agregar_hoja_estilos' );
function agregar_hoja_estilos() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
?>
Con la segunda forma no tenemos que indicar el nombre del directorio del tema padre. Es más, este mismo código nos vale para todos los temas hijo por lo que podemos copiar y pegar.
¿Lo probamos?
Pues claro que si. Ahora subimos el directorio que acabamos de crear con sus dos ficheros dentro, activamos el nuevo tema en el panel de administración de nuestro WordPress.
¿Y la imagen del tema en Apariencia –> Temas?
Si, esto es interesante porque queda muy bien. Podemos copiar simplemente la imagen del tema divi (tema padre). El fichero que corresponde es: «screenshot.jpg».
Ahora bien, nunca está de más y queda más profesional crear una imagen específica para nuestro tema. El tamaño recomendado para esta imagen es de 880 X 660.
¿Ya está?
Pues si, ya está, ya lo tenemos.
Fácil, ¿Verdad?
¿Qué más se puede hacer?
Podemos hacer muchísimas cosas. Podemos configurar totalmente a nuestro gusto este tema hijo. Podremos crear nuevas páginas, funciones, etc..
Pero este es otro tema y lo veremos en otro post.
Saludos.
Programador WordPress freelance