Contenido del curso
Armar estructura del Theme
Personalizar el Loop de WordPress
Cierre del curso
Armando los archivos de nuestro Theme
Juan Martinez
student
Sebastián López Gallego
student
José Fabián Beltrán Meza
studentContenido del curso
Armando los archivos de nuestro Theme
Juan Martinez
studentSebastián López Gallego
studentJosé Fabián Beltrán Meza
student
Alvaro H. Ruiz V.
student
Mauricio Enrique Fernandez Lopez
student
Jacob Gomez
student
Jesús Velázquez Jiménez
student
Ayoze Rodríguez Abreu
student
Francisco Ezequiel Ferreyra
student
Frank GP
student
Jose Marchant
student
cristian david palomino porras
studentJose Marchant
student
Diana Carolina Torres Castaño
studentAlvaro H. Ruiz V.
student
Rodrigo Alles
student
Henry Jeffersson Salinas Arenas
student
Luis Gabriel Barrios Cuahuey
student
Aldo Miguel Ortiz Parodi
studentJose Marchant
student
Percy Flores
student
Aldis Uriel Leal Gonzalez
student
Miguel Angel Reyes Malvehy
student
Angel García
student
Julián Andrés Loaiza Ospina
student
Usuario anónimo
user
Cristian Ramanzin
teacher
Sthefy Alegre
student
Julia Gabriela Nieva Paredes
student
David Jeremias Vásquez Hernández
student
Madelein Espinosa Ramírez
studentexiste una version abreviada echo
<?= get_template_directory_uri() ?>
oh que genial!!!
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
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.
muchas personas subestiman a PHP
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.
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
estos archivos son para comparar, y ver en que nos hemos equivocado, siempre me pasa jeje
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 <3 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:
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()`;?>
horrible, no se nota desde donde copia, horrible
Yo pence lo mismo. Pero no te preocupes.
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).
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
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
el tema de colores para resaltar el código tambien está muy bueno. Sabes como se llama?
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">
¿Cómo se llama la extensión para cambiar los colores de cada ventana?
¡Hola, Ángel! Se llama Peacock. Te dejo el link al market de VSC https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock
no encuentro index.html falta agregar para descargaar???
¡Hola! No puedo aplicar el tema que estamos creando al sitio de YardSales, pues el WordPress local dice: "This theme doesn’t work with your version of PHP". ¿Qué debo hacer?
Si generaste tu sitio con el software de localwp solo debes cambiar las configuración que realizamos la clase pasada en el archivo .css el la parte que dice Requieres PHP escribe 7.3.5 o la versión de php que estés usando.
A mí me pasó lo mismo, lo que hice fue abrir localwp, seleccioné el nombre del tema y donde dice PHP version, coloqué 8.0 y listo!