Storefront: crear un tema hijo o child theme

En una tienda online creada sobre WordPress con el plugin WooCommerce y el tema Storefront es prácticamente imprescindible, si queremos cambiar estilos CSS y/o añadir nuevas funcionalidades, crear un tema hijo (Child theme) para Storefront. De esta manera, cuando actualicemos Storefront, no se perderán los cambios que se hayan realizado.

En la entrada Crear un tema hijo en WordPress ya vimos la forma general de crear un tema hijo en WordPress, sin embargo, con el tema Storefrot el método es distinto ya que no es necesario, ni correcto, poner en cola las hojas de estilos en el archivo functions.php del tema hijo, porque es el propio Storefront el que pone automáticamente en cola el archivo style.css de su tema hijo activo asignándole el id storefront-child-syle. Por tanto, no solo es innecesario poner en cola la hoja de estilos, si no que es incorrecto porque si lo hacemos, el archivo style.css del tema hijo se cargará dos veces.

Como consecuencia de lo anterior, crear un tema hijo para Storefront es tan sencillo como crear una carpeta (la carpeta del tema hijo) que ubicaremos en wp-content/themes e incluir en ella el archivo (hoja de estilo) style.css. No obstante, si vamos a añadir funciones propias también deberemos crear un archivo functions.php.

De esta manera, el primer paso es crear la carpeta del tema hijo que se colocará en wp-content/themes. En este ejemplo, como nuestro tema se llamará Storefront Child nombraremos esta carpeta storefront-child.

El siguiente paso es crear la hoja de estilo del tema hijo (style.css). La hoja de estilo debe contener, como mínimo, el siguiente encabezado:

/*
Theme Name: Storefront Child
Template: storefront
*/

/* Aquí tus reglas CSS */

El último paso, si vamos a dotar de funciones propias al tema hijo de Storefront, es crear el archivo de funciones (functions.php) donde las añadiremos:

<?php
/**
 * Storefront child functions.
 */

/* Aquí tus funciones personales */
?>

Y esto es todo, ya has creado un child theme para Storefront que puedes activar desde el panel Apariencia > Temas de tu sitio WordPress.

Leave a Reply

Your email address will not be published. Required fields are marked *