Diseños funcionales y estéticos

Diseños de páginas web efectivos
Aprende más

Cómo crear un tema hijo o child theme

por | Abr 12, 2016 | Diseño web, Divi, Wordpress

crear_tema_hijo

¿Un hijo de quién?

¿Para que sirve un tema-hijo? o child-theme, en Inglés. Sirve para realizar cambios de código en el tema que estás utilizando y guardarlos en un sitio donde no se van a perder por las actualizaciones del tema. Cada vez que un tema se actualiza,corres el riesgo de perder cambios en el código que haz implementado ya que pueden reescribirse algunos archivos, Quizás has implementado o quieres implementar cambios en el archivo footer.php, o en el functions.php o en la hoja de estilos style.css. Para no perderlos, una buena opción es crear un child theme y aquí te explico cómo.

Es preferible realizar la prueba de activación de un tema hijo en una copia del sitio wordpress en localhost. Si no lo saben realizar, realizaré unos tutoriales para instalar wordpress en localhost pronto. Lo ideal es realizar el tema hijo comenzando con una instalación nueva de wordpress. En todo caso, si ya tienes wordpress funcionando con contenido, primero hay que realizar un backup de todo el sitio, incluyendo la base de datos. Si no te funciona, puedes restaurar el sitio utilizando el backup que tienes.

Los pasos para crear y activar un child-theme son:

1. Crear un archivo para el Tema-hijo o child theme

El primer paso es crear un archivo que lleve el nombre del tema orginal al cual vamos a enlazar este tema hijo, más la palabra “child” o “hijo”, sin dejar ningún espacio entre las dos palabras. En mi caso, voy a escoger el tema Divi, por lo que lo llamaré Divi-child (da igual si está en Inglés o en Español), que va a estar dentro de la carpeta de temas, llamada Themes, de WordPress. La carpeta Themes está dentro de la carpeta wp-content. Por ahora solo la creamos en nuestro ordenador.

wordpress > wp-content > Themes > Divi-child

Por el moemento creamos este directorio en nuestro ordenador porque luego lo subiremos a nuestro sitio web (Paso 5).

2. Crear el documento style.css

Crear el documento style.css y guardarlo en la carpeta Divi-child. Abrir un editor de textos sencillo, como el block de notas, y se crea un documento llamado style.css con el siguiente código:

/*
Theme Name: Divi
Theme URI: http://www.elegantthemes.com/gallery/Divi/
Description: Divi Child Theme
Author: Gaby Diaz
Author URI: http://www.gabydiaz.com
Template: Divi
Version: 1.0.0
Tags: responsive-layout, one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, custom-background, custom-colors, featured-images, full-width-template, post-formats, rtl-language-support, theme-options
*/
/* Here starts the customizing of your theme */

Donde cada quien llena la información que se pide con la suya propia. Da igual si se equivocan, esta información no afecta al código. Eso sí, no quiten los símbolos de barra asterisco: */    /* con los que comienza y termina, porque esos símbolos especifican que se trata de un comentario y no de un código.

3. Crear el documento functions.php

Crear el archivo functions.php y guardarlo en la carpeta Divi-hijo. El documento se crea en un editor simple de texto, tal como el bloc de notas de Windows. Se coloca este código en el documento:

<?php
function theme_enqueue_styles() {

    $parent_style = 'parent-style';

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style )
    );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
?>

4. Crear un icono para el tema-hijo o child theme

Para crear un icono para el child theme, se crea una imagen de fondo que mida 1200x900 px ó 600x450px y se guarda con el nombre screenshot.png en la carpeta de Divi-child, junto con los dos documentos anteriores.

wp-content > Themes > Divi-hijo > screenshot.png

Así, tenemos tres documentos en la carpeta Divi-child: style.css, functions.php y screenshot.png

5. Subir los archivos del tema hijo o child theme

Se pueden subir de dos maneras. A través de WordPress. Hay que comprimir la carpeta Divi-child en formato .zip. Esto se hace haciendo click con el mouse derecho y seleccionando “Enviar a” y luego “carpeta comprimida(en zip)”. Una vez que tengas la carpeta zipeada, entras en el Escritorio de WordPress y vas a Apariencia, y  busca un enlace que se encuentra en la parte superior: “añadir nuevo”. Te aparece otra ventana y seleccionas “Subir tema”. Haces click en “Examinar” y seleccionas el archivo .zip y lo subes. Luego de le das a “Instalar”.

O a través de ftp al servidor. Hay que subir la carpeta completa Divi-child sin comprimir, dentro de la carpeta Themes. Se busca la instalación de wordpress y dentro de wp-content está la carpeta Themes. Así:

Worpress > wp-content > Themes > Divi-child

6. Activar el tema hijo o child theme

Entrar en el escritorio o dashboard de tu wordpress y selecciona Apariencia. Allí verás la imagen que subiste para tu tema y le das a “Activar”. Esto hace que se active el tema hijo, que a su vez llama al tema Divi. Eso es todo. Confirma que todo funciona bien en el sitio web. Si hay algún error, revisa que no haya ningún error en los dos documentos que has subido.

Ya tienes listo tu WordPress para poder editar cualquier cambio en el child-theme en vez del tema original. Con esto, tus cambios no se perderán cada vez que actualices el tema original.

A veces es necesario volver a guardar los menus (Appearance > Menus, or Appearance > Customize > Menus )y las opciones del tema (incluyendo el fondo y las imágenes de la cabezera), después de activar el tema hijo o child theme.

De ahora en adelante, cualquier cambio que requiera realizar en el tema padre, puede crear un nuevo documento que se llame igual, que incluya los nuevos cambios, eso si, asegurándose de mantener las mismas dependencias que el original. Esto quiere decir, que si el documento está dentro de una carpeta, tiene que crear una carpeta con el mismo nombre en el tema hijo.

Para más información revisa el Códidgo WordPress.

Share This