Cómo crear un tema secundario de escaparate de WooCommerce

Share on facebook
Facebook
Share on whatsapp
WhatsApp
Share on linkedin
LinkedIn

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

¡Obtenga WooCommerce Storefront!

Ventajas de usar un tema hijo

La modificación directa de un tema corre el riesgo de perder las modificaciones durante la actualización. Un tema hijo asegura 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.

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 anfitrión para cargar el nuevo tema hijo.

Para iniciar el proceso, cree un archivo style.css para el tema hijo con el siguiente código de ejemplo que se proporciona en los documentos de WooCommerce .

Creación de una hoja de estilo para el tema hijo de Storefront
Creación de una hoja de estilo para el tema hijo de Storefront

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

Apuntando al escaparate
Apuntando al escaparate

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 hijo para el tema veinticinco. Al crear un tema hijo 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 temas secundarios, crear un archivo zip y cargarlo. Una vez hecho esto, active el nuevo tema hijo desde Apariencia → Temas .

Ahora puede personalizar agregando códigos a los archivos de plantilla y hoja de estilo del tema secundario. Por ejemplo, puede copiar cualquier archivo de plantilla de la carpeta de temas de 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.

Crear un tema hijo 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 hijo. WooCommerce recomienda crear un archivo functions.php, que es útil para poner correctamente en cola los estilos.

Crear 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.

Creando 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 hijo basado en el tema Twenty Fifteen.

Ejemplo de encabezado de hoja de estilo para tema hijo
Ejemplo de encabezado de hoja de estilo para tema hijo

Al crear un tema hijo, puede utilizar este texto de ejemplo como punto de referencia y reemplazarlo con detalles relevantes para su tema. La línea Plantilla proporciona el nombre del directorio del tema principal. Tienes que ajustarlo según 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 principal y secundario. Ponga en cola la hoja de estilo del tema principal agregando una acción wp_enqueue_scripts y usando wp_enqueue_style () en el function.php del tema secundario. Abra el function.php de su tema hijo con una etiqueta PHP (<? Php). A continuación, ponga en cola las hojas de estilo de los temas 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.

Poner en cola temas para padres e hijos
Poner en cola temas para padres e hijos

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

Ejemplo recomendado por el Codex para poner en cola temas principales y secundarios
Ejemplo recomendado por el Codex para poner en cola temas principales y secundarios

Activando su tema hijo

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

Subiendo el tema hijo
Subiendo el tema hijo

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

Visualización del tema hijo
Visualización del tema hijo

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

Activando el tema hijo
Activando el tema hijo

Descarga el tema Storefront ahora.

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.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

EnglishSpanish