Cómo crear un child theme de wordpress

A veces (muchas veces, de hecho) cuando estamos utilizando una plantilla , ya sea del repositorio o de pago, descubrimos que de alguna forma necesitamos hacerle cambios, por ejemplo para insertar el código del plugin wp-page-navi (para la paginación). Una de las opciones (la menos recomendada) es modificar el theme que tengamos instalado. Por qué no es una opción recomendada? Pues sencillamente porque cuando el theme sea actualizado, perderemos los cambios realizados. Para evitar perder esos cambios, podemos hacer 2 cosas, o cambiarle el nombre al theme (con lo que ya no se volverá a actualizar y si tiene alguna falla de seguridad o alguna función que quede obsoleta nuestro theme quedará inservible o al menos vulnerable) o crear lo que se viene llamando un Child Theme, un tema hijo.

Crear un theme de este tipo es realmente muy sencillo.

elementos basicos de un child themeEl primer paso es crear una carpeta para nuestro theme (si va a ser “hijo” , por ejemplo, del twentyfifteen, pues lo podemos llamar “my_twentyfifteen_child”). Dentro pondremos 2 archivos (de momento en blanco): style.css y functions.php. Esos 2 archivos son lo mínimo imprescindible para que nuestro child theme funcione.

Ahora con un editor de textos plano (bloc de notas, por ejemplo) abrimos style.css y al principio del todo escribimos lo siguiente:

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/my_twentyfifteen_child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfifteen
 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:   my_twentyfifteen_child
*/

Vamos a ver para qué es todo esto, pero antes, te voy a pedir que compartas este tutorial en las redes sociales, para que le llegue a la mayor cantidad posible de bloggueros:[sociallocker]

  • Theme name: es el nombre del nuestro theme, puede ser el que queramos
  • Theme URI: es la url donde se puede encontrar nuestro theme, esto es por si lo vamos a compartir con alguien. Si es solo para nosotros, se puede quitar esta linea o dejarla así mismo
  • Description: pues una breve descripción
  • Author: tu nombre, esto es como lo de la uri de antes (y la siguiente) por si lo vamos a querer compartir
  • Author uri: la url de tu blog
  • Template (esto es muy importante) la carpeta del theme del que va a ser hijo. Asegúrate de que esta escrito exactamente igual, incluidas mayúsculas y minúsculas
  • Version: otro más para cuando compartas tus themes. Déjalo como en el ejemplo.
  • License, y License Uri: déjalos como en el ejemplo
  • Tags: otro campo por si lo compartes en el repositorio. Si no lo vas a hacer, déjalo en blanco o quita esta linea
  • Text domain: la carpeta de tu child theme. Es por si vas a poner ficheros de idioma (de esto ya hablaremos en otro post más adelante, hoy vamos con lo básico).

Una vez rellenados estos datos, guarda y cierra.

Ahora vamos con functions.php. Abres el fichero (igual, con el bloc de notas) y pones lo siguiente

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

Con esto lo que estamos haciendo es importar las reglas de estilo del theme original. Antes se hacia importándolo en el mismo archivo css, pero esta forma es mas correcta y es la que hoy día se considera optima.

Y con esto ya tenemos un child theme! Uno que no cambia en absoluto el theme original, claro, porque no hemos añadido nada. Pero hemos establecido el marco para hacer nuestros cambios con seguridad.

Ahora, cualquier archivo que vayamos a necesitar cambiar del theme original, lo único que tenemos que hacer es copiarlo a nuestro child theme y ejecutar dichos cambios ahí. Recuerda copiar solo los archivos que vayas a cambiar, no todos. Solo los que necesites cambiar.

Nota importante:

En functions.php podemos definir nuevas funciones, pero asegúrate de no re-utilizar ningún nombre de función ya utilizado en el theme principal, o tu sitio arrojará errores.

[/sociallocker]

Si te ha quedado alguna duda, pues a qué esperas? aquí debajo puedes dejar un comentario con tus preguntas.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *