Cómo crear un tema infantil de escaparate de WooCommerce

Última actualización: 5 de marzo de 2021

Un tema hijo es una modificación de un tema existente que conserva su estilo y funciones básicos. El tema original se denomina tema principal y el nuevo modificado se denomina tema secundario. Crear su propio tema secundario de WooCommerce Storefront es una buena manera de hacerlo cuando desea personalizar su tienda sin comprar un nuevo tema.

¡Consigue el escaparate de WooCommerce!

Tema hijo: una descripción general

Como se mencionó en la introducción, un tema secundario utilizará el tema principal como base y otorgará características adicionales al tema. A menudo, esta es una buena opción cuando desea hacer variaciones para un tema. En el directorio de temas secundarios de Storefront, puede encontrar una buena variedad de temas secundarios premium adecuados para diversas industrias y tipos de productos. De esta manera, puede crear fácilmente su propio tema secundario para Storefront.

Ventajas de usar un tema hijo

Modificar directamente un tema corre el riesgo de perder las modificaciones durante la actualización. Un tema hijo garantiza que las modificaciones se conserven intactas. En general, desarrollar un tema hijo es un proceso más rápido que crear un tema nuevo. Además, para aquellos que estén interesados ​​en el desarrollo de temas de WordPress , crear un tema hijo es una excelente manera de experimentar y aprender.

Estas son algunas de las ventajas de crear un tema hijo:

• Ayuda a crear diferentes variaciones del mismo tema para adaptarse a diferentes dominios.
• Puede guardar las personalizaciones de diseño por separado sin modificar el tema principal.
• Las personalizaciones se pueden conservar incluso después de la actualización del tema principal o los archivos principales de WordPress o WooCommerce.

Creación de un tema secundario de escaparate de WooCommerce

Es recomendable tener una copia de seguridad adecuada de su sitio antes de intentar personalizar un tema. Necesita acceso FTP a su host para cargar el nuevo tema secundario.

Para iniciar el proceso, cree un archivo style.css para el tema secundario con el siguiente código de ejemplo proporcionado en WooCommerce Docs.

A continuación, cambie el campo de la plantilla para que apunte a Storefront.

Una diferencia que puede haber notado aquí es que con Storefront no necesita el paso de poner en cola que se siguió al crear un tema secundario para el tema veinticinco. Al crear un tema secundario con Storefront, solo necesita un archivo function.php en blanco y un archivo style.css para iniciar el proceso.

Simplemente puede transferir el archivo a una carpeta de tema secundario, crear un archivo zip y cargarlo. Una vez hecho esto, activa el nuevo tema hijo desde Apariencia > Temas .

También puede cargar el tema secundario a través de FTP, si tiene acceso a su servicio de alojamiento. Puede utilizar un programa FTP como FileZilla.

Los mejores clientes FTP para Mac y Windows.

Ahora puede personalizar agregando códigos a la hoja de estilo del tema secundario y a los archivos de plantilla. Por ejemplo, puede copiar cualquier archivo de plantilla de la carpeta de temas Storefront a la carpeta de temas secundarios. Este archivo en la carpeta del tema secundario se puede personalizar modificando el código según sus requisitos.

¿Cómo personalizar el diseño y la funcionalidad de un tema hijo?

Con la configuración anterior, ha creado un tema secundario para Storefront. Sin embargo, todavía no hay propiedades personalizadas para su tema. Puede agregar funcionalidades y personalizaciones de diseño a su tema secundario sin modificar el tema principal.

Cambios de diseño

Por ejemplo, en la hoja de estilo anterior que ha creado para el tema secundario, puede personalizar el color del título del sitio con el siguiente código:
.site-branding h1 a {
color: red;
}

Modificaciones de plantilla

También puede modificar los archivos de plantilla (*.php) en la carpeta del tema. Por ejemplo, puede modificar un código específico copiando el header.php de la carpeta del tema principal wp-content/themes/storefront/header.php a la carpeta del tema secundario wp-content/themes/storefront-child/header.php.

Una vez que se haya realizado la copia, puede editar header.php y personalizar cualquier código según sus necesidades. El header.php en el tema secundario se usará en lugar del header.php del tema principal.

También puede realizar modificaciones en las plantillas de WooCommerce de esta manera. Simplemente cree una nueva carpeta en su tema hijo y asígnele el nombre "WooCommerce". Aquí puede realizar cambios en las plantillas de WooCommerce para alinearlas con el diseño de su sitio.

Esta documentación de WooCommerce lo ayudará a comprender más sobre la estructura de la plantilla de WooCommerce.

Funcionalidad de personalización

Cuando crea un tema secundario, querrá que también tenga una funcionalidad personalizada. Para esto, primero debe asegurarse de que su archivo functions.php esté vacío y no contenga ninguna información del archivo functions.php del padre. Ahora, si una función específica en la función del tema principal es conectable (envuelta en una declaración condicional if), entonces podrá copiarla en las funciones de los temas secundarios.php. Una vez que haya copiado una función enchufable, puede realizar los cambios necesarios. A continuación se muestra un ejemplo de una función enchufable:
if (!function_exists("parent_function_name")) {
parent_function_name() {
...
}
}

Creación de un tema infantil general

El proceso de creación de un tema hijo es diferente y más simple con Storefront, en comparación con otros temas. En este artículo, también veremos los detalles básicos del método general.

El primer paso es crear un directorio de temas. A continuación, cree una hoja de estilo (archivo style.css) para el tema secundario. WooCommerce recomienda crear un archivo functions.php, que es útil para poner en cola correctamente los estilos.

Creación de un tema infantil general

El proceso de creación de un tema hijo es diferente y más simple en el escaparate en comparación con otros temas. En este artículo, también veremos los detalles básicos del método general.

El primer paso es crear un directorio de temas. A continuación, cree una hoja de estilo (archivo style.css) para el tema secundario. WooCommerce recomienda crear un archivo functions.php, que es útil para poner en cola correctamente los estilos.

Crear un directorio de temas secundarios

Cree y coloque el directorio de temas secundarios en wp-content/themes. Se sugiere agregar el nombre del directorio de temas secundarios con '-child', aunque no es obligatorio. Se debe tener cuidado de no dejar espacios en el nombre del directorio del tema secundario para evitar problemas.

Crear la hoja de estilo del tema hijo

Cree un encabezado de hoja de estilo para iniciar el proceso. A continuación se muestra un ejemplo de WordPress Codex de un encabezado de hoja de estilo creado para un tema secundario basado en el tema Twenty Fifteen.

Mientras crea un tema secundario, puede usar este texto de ejemplo como punto de referencia y puede reemplazarlo con detalles relevantes para su tema. La línea Plantilla proporciona el nombre del directorio del tema principal. Tienes que ajustarlo de acuerdo con el tema con el que estás trabajando.

Poner en cola los temas padre e hijo

Cree un archivo functions.php en el directorio de temas secundarios para poner en cola los temas principales y secundarios. Ponga en cola la hoja de estilo del tema principal agregando una acción wp_enqueue_scripts y usando wp_enqueue_style() en el archivo function.php del tema secundario. Abra el archivo function.php de su tema hijo con una etiqueta PHP (<?php). A continuación, ponga en cola las hojas de estilo del tema principal y secundario. La siguiente captura de pantalla es un ejemplo que funcionará solo si su tema principal usa un archivo .css para contener el CSS. Si hay más de un archivo .css, como style.css, main.css, ie.css, asegúrese de mantener todas las dependencias del tema principal. Un buen nivel de conocimiento de codificación es claramente un factor importante para hacerlo bien la primera vez.

También debe poner en cola el código CSS real en su tema secundario style.css. Para asegurarse de que la hoja de estilo del tema secundario se cargue después de la hoja de estilo principal, puede configurar el estilo principal como una dependencia. Además, incluya el número de versión del tema secundario para asegurarse de que también puede romper la memoria caché para su tema secundario. El ejemplo recomendado en el Codex es el siguiente:

Activando tu tema hijo

Cree un archivo zip de la carpeta de su tema secundario y cárguelo navegando a través de Apariencia → Temas → Agregar nuevo tema .

Ahora el nuevo tema secundario será visible en la lista de temas.

Puede activar el nuevo tema secundario ahora haciendo clic en el botón Activar .

• Descarga el tema Storefront ahora.
• Lea más sobre Temas secundarios de WordPress Codex.

También puede descargar un tema secundario de muestra desde este enlace de WooCommerce para conocerlo mejor. O lea algunos de nuestros artículos relacionados:

1. ¿Cómo elegir el tema adecuado para su tienda WooCommerce?
2. ¿Cómo instalar y configurar Storefront?
3. Últimas tendencias en temas de WooCommerce.