No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

3D
21H
16M
50S

Armando los archivos de nuestro Theme

4/13
Recursos

Aportes 18

Preguntas 15

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 馃嵄