Convirtiendo nuestro theme en child theme de StoreFront

Clase 4 de 12 • Curso de Creación de Temas para WooCommerce

Clase anteriorSiguiente clase

José Enrique Paye Mamani

student•

Me encanta el curso pero me gustaria que grabaran el escritorio con mas Fotogramas por segundo.

Julián Andrés Loaiza Ospina

student•

Crea un child theme

Para configurar un child theme es necesario tener instalado nuestra padre, crear una nueva carpeta con el nombre de nuestro tema hijo y agregar el archivo inicial styles.css que se configura de igual forma agregando una opción adicional template: nombre-del-tema-padre

/*
Theme Name: Yard Sales Storefront Child
Template: Storefront
Theme URI: https://github.com/ramitaenlarama
...
*/

Es importante destacar que los estilos se cargaran con respecto al directorio padre ya que la función que utilizamos para obtener la dirección get_template_directory_uri( ) toma como directorio de origen el template. Para ello debemos cambiarlo a get_stylesheet_directory_uri( ) que tomará la dirección actual del hijo.

styles.css

wp_enqueue_style("estilos", get_stylesheet_directory_uri()."/assets/css/style.css", array("google-font","bootstrap"));

wp_enqueue_script("yardsale-js",get_stylesheet_directory_uri()."/assets/js/script.js");

Nota: Se debe desactivar y cargar el tema para aplicar la configuración inicial

John Acevedo

student•

Hola Cristian una pregunta, no me quedo claro si "Yardsales" es un copy & paste de Storefront, o es un tema que tu desarrollaste en otro curso y es solo HTML? gracias.

Karen Alfaro

student•

Hola John, el profe desarrolló el proyecto Yardsales en otro curso de Wordpress.

Gustavo Amarista

student•

Para invocar los estilos y los scripts es necesario sustituir el llamado cambiando la función:

get_template_directory_uri()

por la función

get_stylesheet_directory_uri()

La primera busca el estilos y los scripts del theme padre mientras que la segunda función del theme hijo haciendo referencia al

Tambien es importante declarar:
Template: <nombre del tema padre>

Para que sepa que archivos heredar, crear también el archivo index.php si estamos comenzando desde 0

Aldis Uriel Leal Gonzalez

student•

quede fuera de contexto y con muchas preguntas. hay que ver algún curso previo?

Ermilo Joel Dorantes Uc

student•

Tengo cierto conocimiento en el tema, durante el día ando en el Discord, con todo gusto te puedo ayudar en los que se refiere a WordPress y WooCommerce

Franklin Peñafiel

student•

¿Hay que seguir primero el curso de woocommerce antes de seguir este curso? Veo que el código que nos dejan es muy básico e incompleto

Cristian Ramanzin

teacher•

Hola, Franklin! El Curso de Creación de Tiendas con WooCommerce está orientado a la administración del plugin desde el administrador. Este curso está más orientado al desarrollo de un theme compatible con el mismo.

Snyders Gutierrez

student•

Comencé a ver este video y estaba perdido con eso de Yard Sales ¿Cuándo lo descargó? Creo que falta un vídeo

Jorge Arturo Isaza Trujillo

student•

Tiene como requisito ver el curso donde enseña a hacer temas, ahí monta el Yard Sales

Sergio Gil

student•

En el archivo functions modificamos la función donde registramos los estilos cambiando get_template_directory_uri() por get_stylesheet_directory_uri() para que muestre los estilos del child theme y lo dejamos ahí. Recordar que para que se os muestren las imágenes, como el logo, debéis de realizar el mismo cambio en el archivo content-header.

Julian David Sierra Cabrera

student•

El computador más lento de un curso de Platzi jamás visto.

José Fabián Beltrán Meza

student•

Hice los cambios correspondientes, pero no me toma la funcionalidad extra que provee Storefront, que puedo hacer?

Jorge Luis Paiva Huamán

student•

Me gustaría que un "script.js" se cargue sólo en productos de woocommerce, cómo se podria delimitar ello para evitar cargar un js que sólo es necesario en cierto punto de la web?

wp_enqueue_style("estilos", get_stylesheet_directory_uri()."/assets/css/style.css", array("google-font","bootstrap"));

wp_enqueue_script("yardsale-js",get_stylesheet_directory_uri()."/assets/js/script.js");

Convirtiendo nuestro theme en child theme de StoreFront

Preparando nuestro proyecto

Configuración de StormFront y WooCommerce para eCommerce

Instalación de Storefront y WooCommerce en WordPress

Creación y uso de temas hijo en WordPress

Convirtiendo nuestro theme en child theme de StoreFront

Extendiendo nuestro Theme

Aprovechando las funcionalidades de StoreFront

Adaptando nuestro theme base

Remplazando las vistas de WooCommerces desde nuestro theme

Personalizando la lista de productos.

Personalizando el botón de Añadir a carrito

Agregando elementos a nuestro producto

Ajustes finales

Finalizando nuestro proyecto

Cierre del curso