Introducción al child-theme
Muchos usuarios de WordPress que se atreven a modificar cualquier plantilla web, lo hacen desconociendo por completo qué son los child themes o lo que es lo mismo, las plantillas hijo de la plantilla principal. El gran problema del cual se enfrentan, es que al modificar la plantilla principal, si ésta es actualizada por el autor y al realizar la actualización, elimina los cambios o modificaciones realizadas dejando la plantilla en estado puro nuevamente.
Para evitar perder las modificaciones realizadas, la solución es la plantilla hijo (child theme), que es un tema que hereda la funcionalidad de otro tema principal llamado «tema padre». Con los temas hijos podemos modificar y añadir nuevas funcionalidades del tema principal. O sea, en vez de modificar el tema principal, creamos un tema hijo que prevalecerá sobre el tema principal. Además, cada vez que se actualice el tema padre, el hijo adquiere nuevas características sin perder las modificaciones.
Primeros pasos con un child-theme
En este tutorial vamos a proceder a la creación de un tema hijo partiendo de nuestra plantilla web TopSEO. Para ello, si no tienes la plantilla padre TopSEO, la puedes adquirir suscribiéndote desde nuestra tienda en: https://ibermega.com/shop-services/ y la instalas en el directorio de tu wordpress en la ubicación: /wp-content/themes/ desde el instalador de temas en Apariencia del menú de administración. Si tienes otros temas en este directorio y si accedes por FTP para verlos, puedes comprobar que tendrás una estructura más o menos como mostramos a continuación y con el tema TopSEO ya instalado:
/wp-content/themes/ twentyeleven twentyfourteen topseo
Crea la carpeta “prueba-child”
Simplemente en ese directorio añadiremos una nueva carpeta que llamaremos prueba-child y que será nuestra plantilla web hijo de la plantilla principal TopSEO. Además, incluiremos dentro una hoja de estilo con el nombre de style.css. Ojo, si nombras la hoja de estilo por otro cualquiera, simplemente no funcionará el tema hijo:
/wp-content/themes/ twentyeleven twentyfourteen topseo prueba-child/ style.css
Utiliza Visual Studio Code para editar
Con Visual Studio Code, editamos style.css e insertamos las siguientes líneas y lo subimos por FTP dentro de la carpeta prueba-child. Las líneas Template: topseo y Text Domain: prueba-child nunca deben de ser modificadas puesto que, Template nos dice cual es el tema padre y Text Domain se refiere a la carpeta del tema hijo. Todos los demás podrá editarlos a tu gusto respetando la primera palabra en el idioma inglés tal y como está, puesto que WordPress se fijará ahí para reconocer a la nueva plantilla hijo y sus referencias.
//Copia y pega dentro de style.css
/*
Theme Name: Prueba Child
Theme URI: http://www.ibermega.com/themes/topseo
Description: Este es mi primer tema hijo de TopSEO
Author: Mi nombre completo
Author URI: http://ejemplo.com
Template: topseo
Version: 1.0.0
Tags: two-columns, custom-background, custom-header, threaded-comments, sticky-post, translation-ready
Text Domain: prueba-child
*/
@import url("../topseo/style.css");
/* =Aquí podemos personalizar tu nuevo tema
-------------------------------------------------------------- */
Si has seguido todos los pasos señalados, enhorabuena! ya tienes tu primera plantilla web hijo del tema principal TopSEO. Para comprobarlo, entra en Apariencia -> Temas -> y ahí tendrás Prueba Child para activar. La verás sin ninguna imagen de captura de pantalla ya que solo hemos puesto dentro del directorio prueba-child la hoja de estilo.
Personaliza tu propia web
Era muy necesario mostrar el concepto básico de un child-theme para poder, a partir de aquí, personalizar tu propia web con nuestra plantilla preconfigurada: TopSEO Child que puedes descargar desde tu cuenta de cliente.
