Adaptando nuestro theme base

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

Franklin Peñafiel

student•

Me encontré con el problema que los cambios de page.php no funcionaban. Lo que me resultó y luego lo vi como respuesta por parte de Cristian, es que cuando usamos full-with, la página va a tomar el código que se encuente en el template y no la de page.php

Carlos Perilla

student•

La pagina de Inicio sin 'Full Width' me toma el cambio realizado en page.php Pero con 'Full Width' no me lo esta tomando. Cual sería el problema? Alguna solución?

Cristian Ramanzin

teacher•

Hola, Carlos! Checa que en el archivo header.php tengas en orden correcto el siguiente código.

    <?php do_action( 'storefront_before_content' ); ?>
	<div id="content" class="site-content" tabindex="-1">
		<div class="col-full">

		<?php
		do_action( 'storefront_content_top' );

Carlos Perilla

student•

@ramitaenlarama Gracias por la repuesta. Creo que lo tengo en el orden correcto, así que no creo que sea ese el problema. Aquí esta mi repositorio: https://github.com/carlosmcastro/Tema-para-Woocommerce-Platzi

Nicolas Tarazona

student•

8:33 Ya vamos a tener la página adaptada” -> no se ve la página adaptada

Napoleon Contreras

student•

Local es obstinadamante lento? en compracion con XAMP el cual es mas rapido en mi maquina. a alguien mas tiene este asunto?

Cristian Ramanzin

teacher•

Si Local se siente muy pesado te puedo recomendar Laragon. Es una alternativa muy buena y tiene herramientas que te pueden ayudar a agilizar el desarollo de tus sitio.

Andrés Vega

student•

En realidad Local me funciona muy bien depende de las caracteristicas de tu maquina.

Jean Carlos Hallak

student•

el archivo page no hace nada me sigue tomando index.

Julián Andrés Loaiza Ospina

student•

Adaptando tema base

Con el objetivo de adaptar e incorporar funcionalidades en nuestro tema hijo siguiendo los estándares y la documentación del tema padre en nuestro caso storefront es indispensable copiar los hooks (do_actions) del tema padre en los lugares correspondientes a nuestro tema hijo y así poder de forma más cómoda trabajar directamente desde nuestro functions.php

<body <?php body_class(); ?>>

    <?php wp_body_open(); ?>

    <?php do_action( 'storefront_before_site' ); ?>

    <?php do_action( 'storefront_before_header' ); ?>

    <?php get_template_part('template-parts/content', 'header'); ?>

    <?php do_action( 'storefront_before_content' ); ?>

incluso puede que en ocasiones sea necesario remplazar alguna clase para que se muestre de forma correcta el contenido (header, footer, etc)

/*
<main class="productos">
        <div class="container-fluid gx-5">
*/
<div id="content" class="site-content" tabindex="-1">
		<div class="col-full">

Si queremos deshabilitar una vista que se está tomando del tema padre se debe eliminar el do_action( ). En este caso storefront contiene un sidebar a la derecha y page.php está mostrándose como vista allí, para no mostrarla se copia el archivo page.php a nuestro proyecto y se comenta la línea del do_action().

<?php
//do_action( 'storefront_sidebar' );
get_footer();

Y por último para mantener nuestro container se modifica la clase del content-area por nuestro container en bootstrap

<!-- <div id="primary" class="container-area"> -->
<div id="primary" class="container-fluid my-3">

<body <?php body_class(); ?>>

    <?php wp_body_open(); ?>

    <?php do_action( 'storefront_before_site' ); ?>

    <?php do_action( 'storefront_before_header' ); ?>

    <?php get_template_part('template-parts/content', 'header'); ?>

    <?php do_action( 'storefront_before_content' ); ?>

Adaptando nuestro theme base

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