Armando los archivos de nuestro Theme

Curso de Creación de Temas para WordPress

Comenzando nuestro theme

Presentación del curso

Instalando WordPress de forma local

Estructura de Theme de WordPress

Armar estructura del Theme

Armando los archivos de nuestro Theme

Hooks

Agregando de funcionalidades de WordPress a nuestro theme

Asignando theme supports

Registrar y mostrar menúes

Registrando sidebars para nuestros Widgets

Personalizar el Loop de WordPress

Creando un Custom Post Type

Listando nuestros productos

Refactorizando nuestro código

Cierre del curso

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

Aportes 23

Preguntas 19

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Juan Martinez

hace 3 años

existe una version abreviada echo

<?= get_template_directory_uri() ?>

Alvaro H. Ruiz V.

hace 3 años

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.

Jesús Velázquez Jiménez

hace 3 años

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"

Francisco Ezequiel Ferreyra

hace 3 años

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

Ayoze Rodríguez Abreu

hace 2 años

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.

Jose Marchant

hace 2 años

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.

cristian david palomino porras

hace 3 años

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

Jose Marchant

hace 2 años

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

Diana Carolina Torres Castaño

hace 3 años

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

Alvaro H. Ruiz V.

hace 3 años

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.

Rodrigo Alles

hace 2 años

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:

Crear archivos de plantilla separados para diferentes secciones del sitio web, como el encabezado, el pie de página, la barra lateral, etc.
Utilizar la función get_template_part() para llamar a los archivos de plantilla desde otros archivos.
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:

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

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

Henry Jeffersson Salinas Arenas

hace 2 años

horrible, no se nota desde donde copia, horrible

Aldo Miguel Ortiz Parodi

hace 3 años

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

Percy Flores

hace 3 años

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

Aldis Uriel Leal Gonzalez

hace 2 años

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

Miguel Angel Reyes Malvehy

hace 2 años

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

Julian Andres Loaiza Ospina

hace 3 años

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

John Steven González

hace 2 años

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

Omar Andres Guerrero Herrera

hace 19 días

![]()![](https://static.platzi.com/media/user_upload/3927e6d014132e4deb3e07256ad5bc82-c15c70af-17c8-4af1-885f-56456638497e.jpg)

Mateo Arbelaez Cataño

hace 10 meses

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