Tema Hijo o Child Theme

Tema Hijo o Child Theme

5.0
01

¿Qué no sabes que es un tema hijo?¿Que Child Theme no significa Tema Hijo?¿Que por qué empiezo con preguntas?, pues tendrás las respuestas a muchas cosas pero no a todas aquí.

¿Qué es un Child Theme o Tema Hijo?

Bien, para explicarlo de manera sencilla y que nos enteremos, es el tema que cuelga del tema que tenemos principal, que utilizamos para hacer modificaciones de manera segura y que no afecten al tema principal.

Te voy a decir un ejemplo haciendo Spam de valor pero creo que con este ejemplo lo vas a entender mucho mejor.

Yo tengo por ejemplo el Orbital famoso de Romuald Fons que ahora está con su actualización en Orbital theme 2.0 y claro no todo quiero que sea como viene de manera estándar, muy lícito no digo que no y Romuald una vez que hayas pagado tampoco lo dirá.

Quieres que tu tema tenga cada vez que aparezca el nombre de Acelgas en verde y lo quieres modificar por código CSS y no haces el curso de www.javilazaro.es sobre código CSS y puedes equivocarte y romper todo, ¿Qué haces para poder modificarlo y si te equivocas borras y vuelves a empezar y todos tan contentos? pues si un Child Theme.

¿Cómo hago eso yo en mi WP?

Es bastante fácil y si quieres y me mandais un email puedo hacer videos explicando como se hace y se lleva acabo desde el principio hasta el final, incluso os puedo decir como poner la foto.

Pero explicado de manera muy sencilla hay que meterse por FTP a nuestro WP y crear la carpeta child de nuestro tema, en este caso, hemos hablado de Orbital (puede ser cualquier otro tema), y crear dentro de el functions.php y style.css.

Dentro de cada carpeta guardas el código que te suelen dar los fabricantes para que coja la información principal del tema padre y tu solo modifiques los puntos que te interesen, guardes y se vea reflejado en tu web.

Programa tu primer tema hijo

Pues voy a hacerlo con Twenty Fourteen de WP (también explicamos como hacer el de woocommerce aquí mismo), y voy a explicartelo paso a paso, esta informacion la he cogido de la página de WP, pero son más sosos explicando que yo.

style.css

Bien tienes creado una carpeta que se llama twenty-fourteen-child/ en este caso y dentro has creado los dos archivos el functions.php y el style.css, pues esto lo escribes en style.css


/*
 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
-------------------------------------------------------------- */

Si, así a capón es como lo tienes que meter, ya te lo suelen dar hecho para no pensar.

functions.php

Ahora nos metemos con functions, en el que tenemos que meter el codigo tambien, y hay dos cosas que tenemos que tener en cuenta aquí.

  1. Viene bien esto porque así si modificamos algo en el código cuando haya una actualización no tendremos que reescribir ya que permanecerá este cambio
  2. Si no nos gusta el cambio o da algún error podemos borrarlo sin problemas, ya que no afectará a nuestra página principal.
<?php //Etiqueta PHP de inicio

// Funcion a nuestro gusto que queramos incluir
function favicon_link() {
    echo '<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />' . "\n";
}
add_action( 'wp_head', 'favicon_link' );

?> //Etiqueta PHP de cierre

En WP te aconsejan si eres desarrollador de temas que functions.php del tema hijo se cargue primero y con esto te dice que puedes conseguir que las funciones de su tema sean conectables, es decir, sustituir los del tema padre por los del tema hijo siempre y cuando lo anuncies con un código condicional.

if ( ! function_exists( 'theme_special_nav' ) ) {
    function theme_special_nav() {
        //  Hacer algo.
    }
}

tienes muchas más ventajas que puedes utilizar pero son para páginas multilenguaje que no se utilizan tan habitualmente, pero estos dos si que está bien tener en tu tema de WP.

Conclusion

Si quereis un video que os lo explique mejor yo os lo hago a cambio de feedback…

Si nada es gratis completamente, ahora bien, sin darme trabajo, es algo que debería ser obligatorio tener, ya que nos puede evitar muchos problemas en un futuro o incluso tener que rehacer una configuración de una pagina por que por la actualizacion se nos haya borrado todo lo que teníamos programado, así que por favor, por un Child Theme en tu vida.

3 comentarios en “Tema Hijo o Child Theme”

Deja un comentario