Crear y usar un tema hijo en Storefront (todo lo que necesitas saber)

Si quieres modificar el diseño de tu tienda online, la mejor opción es crear un tema hijo y así mantener los estilos tras las futuras actualizaciones del tema.

En el artículo crear un tema hijo encontrarás una guía detallada sobre como crear un tema hijo en WordPress. Pero si tu tienda online esta creada con Storefront —el tema más popular para crear una tienda online— es importante saber que el método de crear temas hijo funciona de forma diferente.

Crear un tema hijo para Storefront

Para crear un tema hijo básico de Storefront basta con crear una carpeta en wp-content/themes y añadir los ficheros:

• style.css que al igual que otros temas hijo tendrá una sección de comentarios formada por varias etiquetas que lo definen. Por ejemplo:

  /*
  Theme Name: Storefront tema hijo
  Template: storefront
  Author: superadmin.es
  Description: Tema hijo para storefront.
  */
  
  // Aquí tu personalización CSS

  
  Las etiquetas Template y Theme Name son las imprescindibles. Template indica que el tema padre es Storefront y Theme Name el nombre del nuevo tema.
• functions.php que puede ser un fichero vacío y sirve para añadir nuevas funcionalidades al tema.

Para finalizar basta con activar el tema desde el menú Apariencia > Temas.

Es importante saber que el funcionamiento de un tema hijo de Storefront es diferente al de otros: no necesitas importar los estilos del tema padre a través del fichero functions.php. Si lo haces cometerás un error, ya que duplicarás la carga de los estilos. Aunque es posible desactivar la carga de estilos desde el tema padre de Storefront como te enseño adelante.

Una vez creado el tema hijo de Storefront puedes:

Personalizar los estilos

El fichero style.css te permite sobrescribir los estilos CSS de Storefront. Por ejemplo, añade estas líneas para cambiar el color del titulo:

.site-branding h1 a {
   color: black; 
}

Modificar las plantillas

Al igual que cualquier tema hijo, Storefront permite modificar las plantillas del tema que son los ficheros que conforman cada página web (header.php, footer.php, sidebar.php…).

Basta con copiar el fichero de plantilla a modificar desde tema padre al hijo para luego hacer las modificaciones deseadas.

Funciones plugables

Storefront esta compuesto por funciones plugables que pueden ser sobrecargadas con una nueva funcionalidad en el tema hijo.

Una función plugable del tema padre tiene este aspecto:

<?php
// wp-content/themes/storefront/functions.php
if (!function_exists("tema_padre_funcion")) {
  tema_padre_funcion() {
    ...
  } 
}

Mira como funciona. La sentencia if cargará la función del tema padre si no la cargo previamente. Las funciones plugables funcionan gracias a que los temas hijos ejecutan el functions.php propio antes que el del padre.

Así para modificar el funcionamiento de esta función basta con declararla en el tema hijo y añadir las modificaciones deseadas.

<?php
// wp-content/themes/storefront-hijo/functions.php
  tema_padre_funcion() {
    ...
  } 
}

Gestión avanzada de estilos en Storefront

Si tienes experiencia con el uso de temas hijo, sabrás que es necesario importar los estilos CSS del tema padre antes de empezar a trabajar.

En este aspecto Storefront funciona de forma diferente. Storefront carga siempre sus propias hojas de estilo CSS, ya que —según Automattic el creador de Storefront— es una técnica más eficiente que importarlas desde el tema hijo.

Quizá sea más eficiente, pero se pierde la principal ventaja de usar temas hijo: Actualizaciones sencillas y sin problemas, y además te obliga a sobrescribir sus estilos.

Por eso, es posible que no quieras cargar las hojas de estilo de Storefront y partir de un diseño completamente en blanco.

Desactivar la carga de CSS en Storefront

La forma de conseguirlo es deshabilitar la carga de las hojas de estilo CSS de Storefront añadiendo este código al functions.php del tema hijo:

<?php
// wp-content/themes/storefront-hijo/functions.php
// Inhabilitar la carga de estilos CSS de Storefront.
function tema_hijo_dequeue_style() {
    wp_dequeue_style( 'storefront-style' );
    wp_dequeue_style( 'storefront-woocommerce-style' );
}
add_action( 'wp_enqueue_scripts', 'tema_hijo_dequeue_style', 999 );

Cargar los estilos de Storefront en el child theme

Ahora el tema hijo de Storefront funciona como cualquier otro tema hijo y quizás no quieras partir de un diseño completamente en blanco. Tienes dos opciones: Puedes importar las hojas de estilo del padre o realizar una copia de las mismas en tu propio tema hijo e importarlas. Así te aseguras que futuras actualizaciones de Storefront no rompen el diseño del tema hijo.

Estos son los pasos:

• Copia los ficheros de las hojas de estilo desde la carpeta wp-content/themes/storefront a la del tema hijo.
• Añade este código al fichero functions.php

  <?php
  // wp-content/themes/storefront-hijo/functions.php
  // Inhabilitar la carga de estilos CSS de Storefront.
  function tema_hijo_dequeue_style() {
      wp_dequeue_style( 'storefront-style' );
      wp_dequeue_style( 'storefront-woocommerce-style' );
  }
  add_action( 'wp_enqueue_scripts', 'tema_hijo_dequeue_style', 999 );
  
  
  // Enqueue estilos CSS (primero el padre, luego los del hijo)
  function tema_hijo_cargar_estilos() {	
    // cargar los estilos copiados de Storefront.
    wp_enqueue_style( 
      'hijo-storefront-woocommerce-style', 
      get_stylesheet_directory_uri() . '/css/woocommerce.css', 
      array( 'hijo-storefront-style' ) 
    );
    wp_enqueue_style( 
      'hijo-storefront-style', 
      get_stylesheet_directory_uri() . '/css/style.css' 
    );
      
    // cargar nuestra personalización.
    wp_enqueue_style( 
      'hijo', 
      get_stylesheet_directory_uri() . '/css/main.css', 
      array( 'hijo-storefront-woocommerce-style' ) 
    );
  
  }
  add_action( 'wp_enqueue_scripts', 'tema_hijo_cargar_estilos' );

El primer bloque de código inhabilita la carga de estilos del tema padre (como viste en el punto anterior). El segundo bloque importa los estilos en este orden: primero los estilos de storefront, luego los estilos personalizados.

En este artículo puedes ver las diferencias en el uso de las funciones get_template_directory() y get_stylesheet_directory()

En Superadmin somos expertos en Wordpress y nuestros alojamientos tienen optimizaciones específicas para WooCommerce, como reglas de caché que permiten mejorar la velocidad del sitio y así mejorar la conversión y ventas.