existe una version abreviada echo
<?= get_template_directory_uri() ?>
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
Cierre del curso
You don't have access to this class
Keep learning! Join and start boosting your career
If you already have an account,
Contributions 25
Questions 19
Sort by:
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"
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.
Subieron directamente el PHP no el HTML. AHorraron 1 paso ejej
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 un link con un monton de plantillas para que praciquen https://github.com/website-templates/webstudio_responsive-template
les dejo el nombre de la extension para manejar diferentes proyectos con vscode Peacock
https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock
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.
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
assetsen 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
cssy archivos JavaScript en una subcarpeta llamadajs. - 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 llamadostyle.cssque se encuentra en la subcarpetacssde 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()`;?>
horrible, no se nota desde donde copia, horrible
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:
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. 😃
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
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() ?>
Para los que comienzan como yo, aquí está el index.html de donde copia el código. Que raro que no esté en recursos: <https://drive.google.com/drive/folders/1Sj20fl7QxZgqHmasvWxpyjx7HjqfmJIR>
En 2025 lo intente y no necesito agregar ningun codigo php para que me tome los assets
![]()
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 🍱
Want to see more contributions, questions and answers from the community?