Cómo crear un tema infantil de WooCommerce Storefront [Guía completa]

Publicado: 2022-01-05

Cómo crear un tema infantil de escaparate de WooCommerce En este artículo, veremos cómo puede crear un tema secundario de WooCommerce Storefront en solo cuatro simples pasos. El tema Storefront WooCommerce es una de las principales razones por las que WooCommerce tiene éxito, ya que es gratuito y fácil de usar para crear una tienda única con un mínimo esfuerzo.

Además, Woocommerce ofrece posibilidades de personalización casi infinitas, que es otro factor importante que contribuye al éxito de WooCommerce. Esto significa que, cuando se combina con el tema correcto, le ofrecerá mucha flexibilidad de diseño.

Tema infantil de escaparate de WooCommerce

Para una apariencia profesional, el tema Storefront es una excelente opción. Ahora que su tienda WooCommerce está en funcionamiento, es posible que aún desee personalizar la apariencia de su tienda para que coincida exactamente con su visión.

Después de instalar el tema del escaparate de WooCommerce, el siguiente paso es crear el tema secundario del escaparate de WooCommerce que le permitirá realizar cambios en el tema principal de su escaparate sin editar el código del tema principal directamente.

Esto facilita la personalización de la apariencia de su tienda y elimina el riesgo potencial para su tema y tienda, especialmente el riesgo de perder la personalización que ha agregado cuando se actualiza el tema WooCommerce Storefront.

Crear un tema secundario para la tienda de WooCommerce

¿Por qué crear un tema infantil de escaparate de WooCommerce?

Si ha dedicado mucho tiempo a leer en WordPress, es posible que haya encontrado temas secundarios antes. En términos simples, el tema secundario es una copia de otro tema, a menudo denominado "tema principal".

Esto significa que puede realizar cambios en el tema secundario y probarlos, sin editar el tema principal directamente. Es importante realizar los cambios en el tema secundario porque alterar el tema original puede provocar errores irreversibles e incluso dañar su sitio web.

Además, es posible que desee crear un tema secundario porque desea utilizar otro tema como base. Esto le ahorrará tiempo y no tendrá que crear un nuevo tema completamente desde cero.

Además, es posible que desee realizar algunos cambios menores en la marca o la estética general de un tema. El uso de un tema hijo abre muchas posibilidades dependiendo del tiempo que esté dispuesto a dedicar al proyecto en curso.

Sin embargo, puede descargar varias opciones de la tienda oficial de WooCommerce u otros sitios como ThemeForest, pero ninguno de los temas secundarios existentes que se ofrecen puede satisfacer sus necesidades. Además, es posible que desee crear una apariencia única. El tema infantil Storefront tiene como objetivo ofrecer una experiencia de tienda perfecta para su nicho.

También vale la pena mencionar que el proceso real de creación de un tema secundario es el mismo para WooCommerce o un sitio de WordPress más general. A pesar de este hecho, debe tener en cuenta el propósito de su tienda al personalizar el tema de su hijo.

Cómo crear un tema infantil de escaparate de WooCommerce

En este tutorial, crearemos un tema que use Storefront como elemento principal. Puedes usar cualquier tema como base. También es importante que cree una copia de seguridad de su sitio antes de continuar, ya que esto mantendrá su tienda segura si algo se rompe durante el proceso de desarrollo.

Además, también es inteligente utilizar un entorno de ensayo para crear y modificar el tema de su hijo. Para crear el tema secundario, solo necesitamos tres cosas para comenzar: el directorio del tema secundario, el archivo style.css y el archivo functions.php.

Estos son los pasos que debe seguir para crear un tema infantil de WooCommerce.

1. Creación de la carpeta de temas

Esta carpeta de temas albergará su hoja de estilo y archivos de funciones. Desde el punto de vista de un experto, es ideal usar el nombre de su tema principal como nombre de carpeta y agregarle "-child". En este tutorial, nombré a mi directorio "Storefront-child". También es importante verificar que el nombre del directorio de su tema hijo no tenga espacios para evitar posibles errores.

Crear un tema secundario para la tienda de WooCommerce

2. Hoja de estilo de tema hijo

Después de crear la carpeta, debe crear una hoja de estilo para el tema secundario. La hoja de estilo debe configurarse para heredar los estilos de su tema principal.

Para hacer esto, debe insertar el siguiente encabezado de hoja de estilo y reemplazarlo con detalles relevantes. También vale la pena mencionar que las personalizaciones realizadas aquí anularán los estilos del tema principal.

 /*

 Nombre del tema: Storefront Child

 URI del tema: http://sitename.com/storefront/

 Descripción: Tema infantil Storefront

 Autor: Tu nombre

 Autor URI: http://sitename.com

 Plantilla: escaparate /*se distingue entre mayúsculas y minúsculas*/

 Versión: 1.0.0

 Licencia: GNU General Public License v2 o posterior

 URI de licencia: http://www.gnu.org/licenses/gpl-2.0.html

 Etiquetas: claro, oscuro, de ancho completo, diseño receptivo, preparado para la accesibilidad

 Dominio de texto: storefront-child

*/

/*Las personalizaciones de temas comienzan aquí*/

Sin embargo, en este tutorial no te enseñaré cómo usar CSS, ya que es imposible cubrirlo en este artículo. Debe aprender CSS o contratar a un desarrollador para que haga los ajustes de CSS en su sitio web.

3. Función de tema infantil

En los métodos anteriores, sugieren que use "@importar" en su hoja de estilo para cargar su tema hijo. Es importante tener en cuenta que esto ya no se considera una mejor práctica. Sin embargo, solo necesita "poner en cola" la hoja de estilo de su tema principal en el archivo functions.php de su tema secundario.

Para que esto sea posible, puede usar la "acción wp_enqueue_scripts" y usar "wp_enqueue_style()". También vale la pena mencionar que la hoja de estilo para su tema hijo generalmente se carga automáticamente.

Debe ponerlo en cola bien para que se cargue y debe asegurarse de que la hoja de estilo secundaria tenga prioridad. Para facilitar las cosas, creé el siguiente código que establece el 'estilo principal' como una dependencia para que la hoja de estilo del tema secundario se cargue después.

 <?php

función tema_encolar_estilos() {

$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. Activación

Ahora que la carpeta del tema secundario está completa, debe crear un archivo .zip de la carpeta del tema secundario, para que pueda agregarlo a sus temas de WordPress.

Puede hacerlo usando 7-zip o Winrar. También es importante asegurarse de tener su style.css y functions.php dentro de la carpeta de su tema secundario.

Además, es importante tomar nota y mantener registros de otras configuraciones de complementos antes de activar su tema secundario. Después de eso, puede cargar esto en su WordPress a través de Apariencia> Agregar temas . cargando el tema Crear WooCommerce Storefront Child Theme

WordPress lo instalará como cualquier tema y una vez que esté instalado, debe activarlo haciendo clic en 'Activar' yendo a Apariencia> Temas como se muestra a continuación: Crear un tema secundario para escaparate de WooCommerce

Después de activarlo, se ve igual que el tema original. El tema hijo está extrayendo los estilos de su tema principal. Luego, debe ser creativo y personalizar la apariencia en la hoja de estilo.

Además, puede realizar cambios en los archivos de plantilla de su tema, copiando el archivo de plantilla que desea modificar, como header.php, de su carpeta principal a la carpeta de su tema secundario.

Además, también deberá realizar algunos cambios para especificar qué función usa WordPress para hacer referencia a los archivos de plantilla. Esto significa que utilizará get_stylesheet_directory(); función en lugar de get_template_directory() para hacer referencia a sus plantillas.

Conclusión

En este punto, estoy seguro de que puede crear el tema infantil WooCommerce Storefront. Le recomiendo que repase su CSS para aprovechar al máximo su estilo y consulte nuestra otra guía sobre la creación de temas secundarios para obtener aún más consejos.

También puede comprar un tema secundario de un proveedor externo, pero no tiene que depender de la creatividad de otros. Esto se debe a que crear WooCommerce Storefront Child Theme no es tan difícil como podría pensar.

Además, le brinda un control casi total sobre el aspecto y la funcionalidad de su tienda. Por lo tanto, debe crear uno, ya que se considera una buena práctica al realizar trabajos de desarrollo en su sitio de WooCommerce.

Además, al modificar directamente un tema se corre el riesgo de perder las modificaciones durante la actualización. El tema hijo se asegurará de que las modificaciones se conserven intactas.