Armando los archivos de nuestro Theme

existe una version abreviada echo

<?= get_template_directory_uri() ?>

no estudies PHP, decian…
nada se hace con PHP, decian…
ja! ^^!
nota: con entender como se inserta php en una estructura HTML <?php /codigoPHP/ ?> y entender que muchas funciones utilizadas son propias de wordpress podes seguir este curso, no desanimes! igual pásate por un curso básico de PHP.

Crear header.php y footer.php.
Funciones que llaman al header y al footer.
<?php get_header() ?>
/* body-content */
<?php get_footer() ?>
Obtener la ruta de nuestro directorio.
"<?php echo get_template_directory_uri();?>/assets"

Subieron directamente el PHP no el HTML. AHorraron 1 paso ejej

les dejo un link con un monton de plantillas para que praciquen https://github.com/website-templates/webstudio_responsive-template

Increible, he manejado Wordpress para realizar mas de 120 webs, y nunca hubiera imaginado que asi se hacia un theme, genial. 💚

Estoy encantado que permitan descargar los recursos, con la actualización de cada clase, me permite tomar apuntes, comentar códigos viejos y actualizados, centrarme en la lógica y estar seguro de la sintaxis! Son los mejores ❤️ gracias por pensar en ello.

Este tipo de videos son los que estropean el curso.

Si vas a hacer un video recolocando el código, lo ideal es tenerlo exactamente igual para seguir la clase, si no directamente puede explicar que es lo que hay en el código, por que todos esos pasos son innecesarios para el que lo ve.

les dejo el nombre de la extension para manejar diferentes proyectos con vscode Peacock
https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock

La extensión de Visual Studio Code que menciona el profesor se llama Peacock
Que sirve para tener diferentes colores de Visual Studio Code para cada Workspace

Composición de un Tema

Se pueden separar los archivos php en carpetas o en la raiz y llamarlos dentro del archivo principal index.php. (tener en cuenta la jerarquía de los tags y sintaxis.

• scss: Syntactically Awesome Stylesheets » (definido como CSS con superpoderes).
• index.php

<?php get_header() ?>
/* codigo php (html)*/
<?php get_footer() ?>

Obtener directorio

Para llamar a una imagen, video o multimedia dentro del directorio se debe tener en cuenta que para obtener el directorio raíz del tema es (php echo o = para traer el valor):

get_template_directory_uri()
/* por ejemplo para elegir una imagen dentro de assets */
<img src="<?= get_template_directory_uri();?>/assets/img/prod_1.png" alt="producto 1">

4. Armando los archivos de nuestro Theme

Cabe destacar que este sitio no solo está hecho con HTML y CSS sino con Bootstrap, y les sugiero mucho que lean sobre ello, es una librería de las más usadas por su practicidad y lo liviano que es:

https://getbootstrap.com/

Actualmente está en su versión 5.1.3.

En este clase usamos las siguientes funciones de WordPress dentro del archivo index.php que estaba en la carpeta de nuestro tema creado:

//Sirve para obtener lo que contenga el archivo header.php
<?php get_header() ?>

//Sirve para obtener lo que contenga el archivo footer.php
<?php get_footer() ?>

//Sirve para hacer referencia al lugar donde estamos parados
<?php echo get_template_directory_uri();?>/

//Esto se coloca antes de la ruta a utilizar:
<img src="<?php echo get_template_directory_uri();?>/assets/img/prod_1.png" alt="producto 1">

Recomienda no usarla para la ruta de la hoja de estilos, porque existe una mejor manera en WordPress, pero todavía no dice cuál es, esperemos verla pronto.

Y estoy súper emocionado porque veo que ya va tomando forma y estoy entendiendo mejor cómo funciona, aunque lo que me apena un poco es que no conozco Bootstrap, y por el momento solo hay curso de Bootstrap 4 (debería haber uno de Bootstrap 5, profe si ve este comentario sugiéralo por favor).

el profesor es muy didactico para explicar, pero cae en los mismos problemas de todos los que somos informaticos, cree que todos saben y se salta pasos, pienso que si es un curso basico, es por que es basico y debe pensar que nadie sabe nada, aunque muchos ya sepamos como programar y hayamos estudiado. pero hay que pensar en los no tienen idea de nada, es mi opinion.

Estoy sufriendo con este curso. Voy a regresar a los cursos báscos para aprender poco a poco. Nada que youtube , google y libros no puedan solucionar. 😃

Quizas estas dificultades que tuve y como solucionarlas les pueda guiar:
-Los html estan en los recursos de la 1ra clase.
-El profe esta trabajando en 2 ventanas de visual studio en una con los archivos html y la otra con el tema de yardsale creando los archivos php. (Que no tiene nada que ver con platzicommerce creado al inicio)
-para la previsualización del sitio web: hay que activar el tema yardsales desde WP Admin de local Sites.
-en la previsualizacion no sale el logo de YARDSale debido a que en la linea de codigo correspondiente esta escrito como logo.png y solo deben cambiarle por logo.svg

Para el index yo agregue un for loop para no repetir tanto codigo con los productos, ya que el 1 y 2 se repite 5 veces. Aquí les dejo mi código

<?php get_header() ?>

<div class="productos__container">
    <?php for ($i=0; $i < 5; $i++): ?>

        <div class="productos__card">
            <figure>
                <img src="<?php echo get_template_directory_uri();?>/assets/img/prod_1.png" alt="producto 1">
            </figure>
            <div class="producto__caption">
                <div class="productos__desc">
                    <a class="producto__link" href="#">
                        <h4 class="productos__titulo">Retro refrigerato</h4>
                    </a>
                </div>
            </div>
        </div>
        <div class="productos__card">
            <figure>
                <img src="<?= get_template_directory_uri() ?>/assets/img/prod_2.png" alt="producto 1">
            </figure>
            <div class="producto__caption">
                <div class="productos__desc">
                    <a href="">
                        <h4 class="productos__titulo">Retro refrigerato</h4>
                    </a>
                </div>
            </div>
        </div>

    <?php endfor ?>
</div>

<?php get_footer() ?>

horrible, no se nota desde donde copia, horrible

Reto

Este es mi aporte al reto 🍱