Armando los archivos de nuestro Theme
Contenido del curso
Armar estructura del Theme
Personalizar el Loop de WordPress
Cierre del curso
Armando los archivos de nuestro Theme
Armando los archivos de nuestro Theme
Contenido del curso
Juan Martinez
existe una version abreviada echo
<?= get_template_directory_uri() ?>
Sebastián López Gallego
oh que genial!!!
José Fabián Beltrán Meza
Excelente aporte amigo. Te complemento un poco. Esto que nombras es la apertura de PHP abreviada pero solo esta disponible si activas short_open_tag en el fichero php.ini.
Te dejo el enlace a la documentación: https://www.php.net/manual/es/language.basic-syntax.phptags.php
Alvaro H. Ruiz V.
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.
Mauricio Enrique Fernandez Lopez
muchas personas subestiman a PHP
Jacob Gomez
Los aue odian php son los que recien empiezan con pyhton. Porque su sintaxis es amigable. Cada lenguaje tiene su proposito y depende del programador que pueda hacer con ello. Si tienen duda en git hub esta un repositorio de un clon de spotify creado con php usando Laravel comop framework. Me lo he descargado y personalizado y corre bastante bien en cualquier servidor local.
Jesús Velázquez Jiménez
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"
Ayoze Rodríguez Abreu
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.
Francisco Ezequiel Ferreyra
Subieron directamente el PHP no el HTML. AHorraron 1 paso ejej
Frank GP
estos archivos son para comparar, y ver en que nos hemos equivocado, siempre me pasa jeje
Jose Marchant
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
les dejo un link con un monton de plantillas para que praciquen https://github.com/website-templates/webstudio_responsive-template
Jose Marchant
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
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.
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 <3 gracias por pensar en ello.
Rodrigo Alles
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:
get_template_part() para llamar a los archivos de plantilla desde otros archivos.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"> <h4>Contacto</h4> <p>Teléfono: 123-456-7890</p> <p>Correo electrónico: info@sitio.com</p> </div> <div class="social-links"> <h4>Síguenos en las redes sociales</h4> <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> <h3><?php the_title(); ?></h3> <?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:
assets en el directorio del tema.css y archivos JavaScript en una subcarpeta llamada js.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">
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
horrible, no se nota desde donde copia, horrible
Luis Gabriel Barrios Cuahuey
Yo pence lo mismo. Pero no te preocupes.
Aldo Miguel Ortiz Parodi
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).
Jose Marchant
Como estas aldo, ante que nada, espero que te encuentres bien. mira antes de usar framework como Bootstrap, te recomiendo aprender css, ve busca en youtube cursos de css o css3, y de esa manera comprenderas los que son las hojas de estilo, y ahi saltar a bootstrap, antes no te lo aconsejo. https://youtu.be/WfDqFArJnYA
Percy Flores
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
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
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
Angel García
el tema de colores para resaltar el código tambien está muy bueno. Sabes como se llama?
Julián Andrés Loaiza Ospina
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.
<?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">
Christian Benitez
En este tipo de ejercicios deberian dar los archivos fuente antes de ser modificados para poder tambien hacer los pasos junto con el instructor...
Abdiel Pena
ok he saltado de curso en curso porque hay muchas cosas que no explican y luego dicen esto esta tomado de tal otro curso y brinco a otro curso para aprender y en ese curso dicen lo mismo, que agotador, deberian crear una ruta bien explicita que te ensene o indique cual es el primer curso a tomar, se que hay muchos que ya tienen un conocimiento previo, y no necesitan empezar desde cero pero deben buscar la manera de como mejorar eso, ya que hace que uno pierda mucho tiempo.
Usuario anónimo
User¿Cómo se llama la extensión para cambiar los colores de cada ventana?
Cristian Ramanzin
Profesor¡Hola, Ángel! Se llama Peacock. Te dejo el link al market de VSC https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock