No tienes acceso a esta clase

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

Armando los archivos de nuestro Theme

4/13
Recursos

Aportes 22

Preguntas 18

Ordenar por:

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

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

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.

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

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.

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

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

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.

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

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. 馃槂

horrible, no se nota desde donde copia, horrible

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

Armando los archivos de nuestro Theme: Segmentar el c贸digo

Al crear un tema personalizado de WordPress, es importante segmentar el c贸digo para mantenerlo organizado y f谩cil de mantener. Esto tambi茅n ayuda a reutilizar el c贸digo en diferentes partes del tema.

Segmentar el c贸digo del tema

Para segmentar el c贸digo del tema, se pueden utilizar los siguientes m茅todos:

  1. Crear聽archivos de plantilla separados para diferentes secciones del sitio web, como el encabezado, el pie de p谩gina, la barra lateral, etc.
  2. Utilizar la funci贸n聽get_template_part()聽para llamar a los archivos de plantilla desde otros archivos.
  3. Separar el c贸digo HTML del c贸digo PHP para hacer el c贸digo m谩s legible y f谩cil de mantener.

Funciones principales para llamar el聽header.php聽y聽footer.php聽desde el聽index.php

Para llamar al archivo聽header.php聽en el聽index.php, se utiliza la funci贸n聽get_header(). Esta funci贸n busca el archivo聽header.php聽en la carpeta del tema y lo carga en la p谩gina.

<?php get_header(); ?>

Para llamar al archivo聽footer.php聽en el聽index.php, se utiliza la funci贸n聽get_footer(). Esta funci贸n busca el archivo聽footer.php聽en la carpeta del tema y lo carga en la p谩gina.

<?php get_footer(); ?>

Es importante tener en cuenta que estas funciones solo llaman a los archivos聽header.php聽y聽footer.php, y no a otros archivos de plantilla que se hayan creado para diferentes secciones del sitio web. Para llamar a estos archivos, se utiliza la funci贸n聽get_template_part().

Ejemplo de segmentaci贸n de c贸digo en el tema

A continuaci贸n, se muestra un ejemplo de c贸mo se puede segmentar el c贸digo en un tema personalizado de WordPress.

header.php

<!DOCTYPE html>
<html>
<head>
  <meta charset="<?php bloginfo( 'charset' ); ?>">
  <title><?php wp_title(); ?></title>
  <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
  <div class="logo"><?php bloginfo( 'name' ); ?></div>
  <?php if ( has_nav_menu( 'primary' ) ) : ?>
    <nav class="nav-menu">
      <?php
        wp_nav_menu( array(
          'theme_location' => 'primary',
        ) );
      ?>
    </nav>
  <?php endif; ?>
</header>

footer.php

<footer>
  <div class="contact-info">
    <h3>Contacto</h3>
    <p>Tel茅fono: 123-456-7890</p>
    <p>Correo electr贸nico: [email protected]</p>
  </div>
  <div class="social-links">
    <h3>S铆guenos en las redes sociales</h3>
    <ul>
      <li><a href="#">Facebook</a></li>
      <li><a href="#">Twitter</a></li>
      <li><a href="#">Instagram</a></li>
    </ul>
  </div>
</footer>
<?php wp_footer(); ?>
</body>
</html>

index.php

<?php get_header(); ?>

<main>
  <?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>
      <article>
        <h2><?php the_title(); ?></h2>
        <?php the_content(); ?>
      </article>
    <?php endwhile; ?>
  <?php else : ?>
    <p><?php esc_html_e( 'Lo siento, no hay publicaciones que coincidan con su b煤squeda.' ); ?></p>
  <?php endif; ?>
</main>

<?php get_footer(); ?>

En este ejemplo, el c贸digo se ha segmentado en tres archivos diferentes:聽header.php,聽footer.php聽e聽index.php. El archivo聽header.php聽contiene la cabecera del sitio web, el archivo聽footer.php聽contiene el pie de p谩gina y el archivo聽index.php聽contiene el contenido principal del sitio web.

Adem谩s, se ha utilizado la funci贸n聽get_template_part()聽para llamar a otros archivos de plantilla, como el archivo聽content.php聽que se utiliza para mostrar el contenido de las publicaciones. Tambi茅n se ha utilizado la funci贸n聽wp_head()聽en聽header.php聽y聽wp_footer()聽en聽footer.php聽para cargar los scripts y estilos necesarios para el tema.

A帽adir archivos css o Assets

get_template_directory_uri()聽es una funci贸n de WordPress que devuelve la URL del directorio del tema activo. Esto es 煤til para enlazar archivos CSS, JavaScript, im谩genes u otros recursos que se encuentran en el directorio del tema.

La funci贸n聽get_template_directory_uri()聽devuelve una cadena que representa la URL del directorio del tema activo. Por ejemplo:

echo get_template_directory_uri();

Esto devolver谩 la URL del directorio del tema activo, por ejemplo:

http://example.com/wp-content/themes/my-theme

La funci贸n聽get_template_directory_uri()聽se utiliza com煤nmente para enlazar archivos CSS y JavaScript en el encabezado o pie de p谩gina del sitio web. Por ejemplo, para enlazar un archivo CSS llamado聽style.css聽que se encuentra en el directorio del tema, se puede utilizar el siguiente c贸digo:

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">

Esto generar谩 una etiqueta聽link聽con el atributo聽href聽que apunta al archivo聽style.css聽en el directorio del tema activo.

En resumen,聽get_template_directory_uri()聽es una funci贸n 煤til que devuelve la URL del directorio del tema activo, lo que facilita la inclusi贸n de archivos CSS, JavaScript, im谩genes y otros recursos en el tema de WordPress.

A帽adir directorio de assets

Para a帽adir un directorio de assets (como im谩genes, archivos CSS o JavaScript) en WordPress utilizando la funci贸n聽get_template_directory_uri(), se puede seguir los siguientes pasos:

  1. Crear una carpeta en el directorio del tema para los assets. Por ejemplo, se puede crear una carpeta llamada聽assets聽en el directorio del tema.
  2. Colocar los archivos de assets en la carpeta reci茅n creada. Por ejemplo, se pueden colocar archivos CSS en una subcarpeta llamada聽css聽y archivos JavaScript en una subcarpeta llamada聽js.
  3. Utilizar la funci贸n聽get_template_directory_uri()聽para obtener la URL del directorio del tema activo y concatenarla con la ruta relativa del archivo de asset deseado. Por ejemplo, para enlazar un archivo CSS llamado聽style.css聽que se encuentra en la subcarpeta聽css聽de la carpeta de assets, se puede utilizar el siguiente c贸digo:
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/assets/css/style.css">

  1. Repetir el paso 3 para cada archivo de asset que se desee enlazar en el tema.

Es importante tener en cuenta que, si se utiliza un tema hijo (child theme) en lugar de un tema padre (parent theme), se debe utilizar la funci贸n聽get_stylesheet_directory_uri()聽en lugar de聽get_template_directory_uri(). Esto se debe a que聽get_template_directory_uri()聽devuelve la URL del directorio del tema padre, mientras que聽get_stylesheet_directory_uri()聽devuelve la URL del directorio del tema hijo activo.

En resumen, para a帽adir un directorio de assets en WordPress utilizando la funci贸n聽get_template_directory_uri(), se debe crear una carpeta para los assets en el directorio del tema, colocar los archivos de assets en ella, y utilizar la funci贸n聽get_template_directory_uri()聽para obtener la URL del directorio del tema y enlazar los archivos de assets en el tema.

En la clase se comenta que de no ver im谩genes debemos usar echo antes de get_template_directory_uri().


`get_template_directory_uri()`. 

 echo `get_template_directory_uri()`;?>

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">

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() ?>

Gracias a los comentarios, logre encontrar la carpeta de index.html. Pero no la pude encontrar ni en recursos de la clase ni en el local鈥 lo comento porque habemos personitas que no conocemos nada de nada de esto, y no supe donde ni como poder extraer por logica dicha info y creo que podemos ser bastantes en esta condicion. Tal vez perfeccionar esa comunicacion para un publico como el mio seria de gran ayuda, a pesar de convertir el curso e algo mas basico

PARA LOS QUE NO LES SIRVE LA FUNCION, EL PROBLEMA SON LAS IMAGENES. ME TARDE 1 HORA EN DARME CUENTA PERO AQUI ANDAMOS 馃槃

.

Reto


Este es mi aporte al reto 馃嵄