• iborra
    borde slide
    DESCUBRE A TRAVÉS DE
    borde slide
    NUESTRO BLOG
    Artículos de interés sobre diseño web

Cómo crear y modificar un child theme en Wordpress

child theme wordpress

Wordpress nos ofrece un montón de posibilidades para la creación de webs, entre ellas la posibilidad de crear temas hijos, más conocidos como child themes.

Los temas hijos (child themes) en Wordpress, son aquellos que heredan las características de otro tema padre (parent theme) del que dependen. La utilidad de los child themes reside en poder personalizar un sitio sin tener que crear un tema desde cero, ya que lo que no se defina en el child theme, éste lo heredará del tema padre.

Cada vez es más común encontrar en páginas como Themeforest, temas que incluyen un child theme dentro de la plantilla de Wordpress, facilitándonos así realizar temas hijos.

Ventajas de crear un Child Theme

Sin duda, una de las ventajas principales, es que al hacer las actualizaciones del tema padre no perderemos los cambios que hayamos hecho en nuestro tema hijo, así que podemos modificar el child theme sin miedo a perder esas modificaciones actualizando el tema padre.

Lógicamente, crear un child theme es una manera mucho más rápida de crear un tema para tu Wordpress que hacerlo desde cero, aprovechando todas las características que nos interesan del tema padre, escribiendo únicamente el código nuevo de las modificaciones.

Desventajas de crear un Child Theme

Como un child theme realiza una llamada a otro tema del que obtiene la mayoría de su código, esto puede ralentizar un poco nuestro sitio web.

Aunque crear un child theme, es relativamente sencillo, es necesario un desarrollador web para no destrozar el código y afectar así el aspecto de la web.

Pasos para crear y modificar un Child Theme

Si has comprado una plantilla es muy posible que encuentres dentro comprimido un archivo llamado nombredeltema-child.zip. Sólo tienes que descomprimirlo dentro de la carpeta themes de tu plantilla y prestar atención a los siguientes pasos que vamos a explicar.

  1. En caso de no tener previamente un child theme, lo primero que haremos es crear una carpeta dentro de /wp-content/themes/ llamándola parecida al tema padre. Por ejemplo, si vuestro tema padre se llama miplantilla a la carpeta la llamaremos miplantilla-child.
  2. Si nuestra plantilla ya venía con un child theme, veremos dentro una hoja de estillos llamada style.css y sólo tendremos que poner el código css a continuación de lo escrito dentro del archivo, así de fácil. En caso contrario, creamos la hoja de estilos, un archivo style.css dentro de nuestra carpeta miplantilla-child. Abrimos el archivo, a continuación copiamos y pegamos la siguiente estructura:
  3. /*
    Theme Name: Miplantilla Child
    Theme URI: http://iborra.es
    Author: Iborra Web Design
    Author URI: http://iborra.es
    Description: Child Theme de Miplantilla para hacer modificaciones sin miedo.
    Version: 1.0
    License: Commercial
    Template: miplantilla
    */
    
    @import url("../miplantilla/style.css");
    
    /*************** ADD YOUR CUSTOM CSS HERE  ***************/
    

    Las líneas importantes son Theme Name, aquí va el nombre que le pusimos a la carpeta antes creada; Template, pondremos el nombre del tema padre sino no funcionará; y @import url(xxxx), usando la estructura del ejemplo, aquí es donde le decimos al tema hijo de donde heredar la hoja de estilos original, de modo que al activarlo funcione todo.

    Después de estas líneas es donde empezamos a modificar todos los estilos de nuestro sitio web, estos cambios no se verán afectados cuando actualicemos el tema padre.

  4. Activamos nuestro child theme miplantilla-child como cualquier otro tema dentro de la administración de Wordpress.
  5. Añadimos estilos a nuestro child theme en el archivo style.css. El tema hijo, ya activo, hereda el CSS de la hoja de estilos original, salvo que añadamos clases personalizadas, en cuyo caso tomará primero las del tema hijo, aplicando el resto de la hoja de estilos del tema padre. Un ejemplo a continuación personalizando los enlaces para ver lo sencillo que es.
  6. /*
    Theme Name: Miplantilla Child
    Theme URI: http://iborra.es
    Author: Iborra Web Design
    Author URI: http://iborra.es
    Description: Child Theme de Miplantilla para hacer modificaciones sin miedo.
    Version: 1.0
    License: Commercial
    Template: miplantilla
    */
    
    @import url("../miplantilla/style.css");
    
    /*************** ADD YOUR CUSTOM CSS HERE  ***************/
    
    a { color: rgb(24, 105, 99); }
    a:hover { color: rgb(31, 126, 120); text-decoration: none; }
    
  7. También podemos personalizar los ficheros del tema, es decir, los archivos .php o crear unos nuevos. Por ejemplo, imaginemos que queremos cambiar el archivo single-product-reviews.php, copiamos este archivo del tema padre y lo pegamos a la carpeta de nuestro child theme para hacer las modificaciones correspondientes. Es importante tener en cuenta aquí que debemos seguir la estructura de carpetas del tema padre. Si el archivo original en el tema padre esta en en la ruta /miplantilla/woocommerce/single-product-reviews.php, en el tema hijo debe seguir esta misma estructura, la ruta sería /miplantilla-child/woocommerce/single-product-reviews.php. Así de fácil.
  8. El archivo functions.php funciona de forma diferente. WordPress prioriza el archivo functions.php del tema hijo sobre el del tema padre, pero no lo sobreescribe sino que solo tendrá en cuenta las modificaciones o funciones añadidas del tema hijo, por lo tanto no hace falta copiar entero el fichero functions.php del tema padre.
  9. Si nuestra plantilla comprada ya venía con un child theme, veremos dentro el archivo functions.php y escribimos cualquier función debajo del encabezado del archivo. Si de lo contario, no disponemos de este archivo, dentro de la carpeta miplantilla-child crearemos el archivo functions.php. Luego abrimos el archivo, copiamos y pegamos el encabezado siguiente que pongo. Aunque antes ya hemos enlazado el CSS, este es el método correcto de hacerlo y una buena práctica ya que tardará menos en cargar la hoja de estilos:

    <?php
    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
    function theme_enqueue_styles() {    
         wp_enqueue_style( 'tema-padre', get_template_directory_uri() . '/style.css' ); 
    }
    ?>
    

    Donde dice "tema-padre" tenemos que poner el nombre del directorio que contiene la plantilla "padre". Si el tema hijo tiene más de un archivo .css, entonces tendremos que asegurarnos de mantener todas las dependencias del tema padre.

    Es posible que el fichero de estilos del tema hijo se cargue automáticamente, pero si ese no es el caso, debemos sustituir el código anterior por el siguiente:

    <?php
    function theme_enqueue_styles() {
    
        $parent_style = 'tema-padre';
    
        wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
        wp_enqueue_style( 'tema-hijo',
            get_stylesheet_directory_uri() . '/style.css',
            array( $parent_style )
        );
    }
    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
    ?>
    

    Igual que en el caso anterior, cambiar "tema-padre" y "tema-hijo" por el nombre del directorio correspondiente. Tenéis más información en Wordpress Child Themes.

Con estos pasos ya tendremos listo nuestro child theme y estaremos preparados para modificar nuestra plantilla sin miedo a futuras actualizaciones. Para los que no son programadores y no quieren meterse con tanto código o la plantilla comprada carece de un child theme, se puede utilizar el plugin Child Theme Configurator.

Si tenéis alguna consulta, comentarlo más abajo para solucionar dudas. Espero que os pueda servir esta guía.

Comenta y comparte este post!

¿Tienes alguna sugerencia, idea, consejo, duda, pregunta, agradecimiento, encuentras algún error o este post no está actualizado? Entonces esperamos tu comentario.

También puedes recomendar y compartir este post. Estamos muy agradecidos por tu apoyo!

Comentarios (0)

No hay Comentarios todavía en este post. Podrías ser el primero!

Deja un comentario

Este blog se nutre de los comentarios de los visitantes! Así que vamos, únete a nosotros!

Por favor esperamos que entiendas que se eliminarán aquellos comentarios que no tengan nada que ver con el contenido de este post o siempre que se utilicen palabras ofensivas.

COMENTARIO PARA ESTE POST

Imagen mínimo: 300x300 - Formato: jpg o png - Tamaño máximo: 10Mb

CAPTCHA code