Clase 6 de 13 • Curso de Creación de Temas para WordPress
Contenido del curso
Gustavo Amarista
Gabriel Mundaray
Aldo Miguel Ortiz Parodi
Carlos Backus
Henry Jeffersson Salinas Arenas
Matias A. Mendoza
Andrés Felipe Patiño Vallejo
Efraín Jacobo González Bermúdez
Emanuel Mendoza
Natali Rivero
Javier Ladino
Aldo Miguel Ortiz Parodi
Diego Rubio
FRANK CARLOS LISBOA ABAD
Jesús Velázquez Jiménez
Julián Andrés Loaiza Ospina
Henry Jeffersson Salinas Arenas
Daniela Leon
Cristian Ramanzin
Oswaldo Sánchez Salazar
Cristian Ramanzin
Sammy Joseph Taboada Paz
Ermilo Joel Dorantes Uc
Juan Felipe Beltrán Díaz
Nicolas Tarazona
Rodrigo Alles
LAURA FERNANDA GARCIA MOLINA
Diego Vergara
Luis Fernandez
Cristian Ramanzin
Luis Fernandez
George M
Cristian Ramanzin
Alvaro H. Ruiz V.
Excelente!
No soy experto en php pero es muy enredado que se abran y se cierren el llamado en cada línea de la siguiente manera:
<?php if(have_posts()){ ?><?php } ?><?php while(have_posts()){ the_post(); ?> <?php the_content(); ?> <?php } ?>
Experimentando con el source perfectamente se puede escribir de la siguiente manera:
<?php if(have_posts()){ while(have_posts()){ the_post(); the_content(); } } ?>
Buena acotacion! Creo que el profesor lo hace de esta forma para que sea mas claro y podamos verlo poco a poco, sin embargo si ya eres experimentado en php sin duda puedes simplificarlo
No lo hace por eso... justamente hace unos días le pregunté a un desarrollador WordPress por qué separa así y no lo hace en una sola línea, y me explica que es porque así fácilmente puede ir colocando contenido HTML en medio, permitiendo hacer muchas cosas. No lo hemos hecho aquí, pero ya deja su código listo para ello.
Me parece un gran curso pero, posiblemente soy el único, me genera un poco de ansiedad el lag que se ve en su computadora. Para mi corta la fluidez de sus explicaciones. Repito, esta genial todo, solo es un comentario de algo que sería genial que puedan mejorar al actualizar el curso.
===
Confirmo, el lag del video es muy molesto.
Tener a la mano guías al momento del desarrollo de nuestros theme es una gran idea, teniendo en cuenta la cantidad de funciones y hooks de los cuales podemos hacer uso y en ocasiones es difícil recordarlos todos.
Por ello les comparto este post con un listado de las 100 funciones del core de WordPress más utilizadas en el día a día.
https://vegibit.com/the-top-100-most-commonly-used-wordpress-functions/
Gracias! Gran aporte!!
Ya no existe :(
Estoy creando mi custom theme y acá dejo algunas recomendaciones:
Espero les sirva ;)
Hola! te funcionó sin problema ?
Tenía esa duda, si podía utilizar un template Ya creado en Wordpress y empezar a insertarle los elementos de html que tengo en el diseño.
Qué templates podría reutilizar ? y no tener problemas de derechos de autor, si por ejemplo el sitio tiene un fin comercial.
Gracias.
6. Agregando funcionalidades de WordPress a nuestro Theme
En esta clase aprendimos a usar funcionas propias de WordPress para seguir personalizando nuestro tema, comparto código de la clase:
index.php
<?php get_header() ?> <?php if(have_posts()){ ?> <?php while(have_posts()){ the_post();?> <?php the_content();?> <?php }?> <?php }?> <div class="productos__container"> <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</h5> </a> </div> </div> </div> <div class="productos__card"> <figure> <img src="<?php echo get_template_directory_uri();?>/assets/img/prod_2.png" alt="producto 1"> </figure> <div class="producto__caption"> <div class="productos__desc"> <a class="producto__link" href="#"> <h4 class="productos__titulo">Retro refrigerato</h5> </a> </div> </div> </div> <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">Round Shelf</h5> </a> </div> </div> </div> <div class="productos__card"> <figure> <img src="<?php echo 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</h5> </a> </div> </div> </div> <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</h5> </a> </div> </div> </div> <div class="productos__card"> <figure> <img src="<?php echo 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</h5> </a> </div> </div> </div> <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</h5> </a> </div> </div> </div> <div class="productos__card"> <figure> <img src="<?php echo 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</h5> </a> </div> </div> </div> <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</h5> </a> </div> </div> </div> <div class="productos__card"> <figure> <img src="<?php echo 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</h5> </a> </div> </div> </div> </div> <?php get_footer() ?>
.
que curso mas malo!!!!!
Muy enrredado abrir y cerrar llaves adjunto mi codigo.
<?php if (have_posts()) : ?> <?php while (have_posts()) : ?> <?php the_content(); ?> <?php endwhile; ?> <?php endif; ?>
Configuración del idoma y charset sea igual a la configuración en wordpress. language_attributes(); bioginfo("charset");
wp_body_open(); Agrega un hook llamado body_open. Nos permite agregar contenido en el body.
Homepage link. href = "<?php echo home_url(); ?>"
Ejecutar el contenido del posts. index.php
if (have_posts()){ while(have_posts()){ the_post(); the_content(); } }
Para agregar un fragmento de código al inicio de la ejecución como Hotjar o Analytics se puede enganchar justo después de la etiqueta body:
<body> <?php wp_body_open(); ?>
y en functions.php
function plz_analytics(){ ?> <h2> ANALYTICS </h2> <?php } add_action("wp_body_open","plz_analytics");
Es importante también la establecer configuración del lenguaje y caracteres del tema que se agregan mediante funciones preestablecidas de WordPress.
<!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo("charset"); ?>">
Enlace:
Wordpress tiene una función que retorna la homepage, útil para la imagen del encabezado
<a href="<?= home_url() ?>">
Para agregar el contenido de una página de inicio (creada a partir de bloques gutenberg) a nuestro tema se utiliza:
<?php if(have_posts()){ while(have_posts()){ the_post(); the_content(); } }?>
la verdad no me gusta este curso, no se que pasa
HolaChicosTengo una duda:Archivo functions.php/Minuto 3:09/Linea 18¿Porque cerro aquí el php? _?>
¡Hola, Daniela! Lo hice para poder escribir HTML, si no la cerraba todo lo que escribiese sería PHP.
Hola Cristian, buenos días, existe algún software de programación o css, que sea de arrastrar y soltar texto, imágenes, videos y sonidos, para la construcción de modelos y prototipos de siteweb o apps, que me puedan servir como versiones beta?. Gracias. Saludos.
¡Hola! Si para prototipado tiene opciones como Adobe XD y Figma. Te dejo links a los cursos que tenemos en Platzi. 😀
https://platzi.com/clases/figma/ https://platzi.com/clases/adobe-xd/
¡Hola! ¿Por qué abres y cierras <?php ?> en cada línea? ¿Funcionaría también si fuera de la siguiente forma:?
<?php if(have_posts()){ while(have_posts()){ the_post(); the_content(); } } ?>Cuando trabajas PHP con HTML tienes que abrir y cerrar el PHP
Sin embargo, puedes abrir etiquetas y cerrarlas por script y no por linea decodigo, así lo estoy haciendo y desde que todo el PHP quede dentro de las etiquetas no me ha dado errores
IMPORTANTISIMO!!!, tener a la mano este articuclo: https://codex.wordpress.org/Theme_Development, les va a quitar dolores de cabeza
Apuntes
Agregando funcionalidades de WordPress a nuestro tema
WordPress ofrece una variedad de funciones que se pueden utilizar en el archivo functions.php de un tema para añadir funcionalidades y personalizaciones adicionales. A continuación, se explican algunas de las funciones más comunes que se pueden utilizar en un tema de WordPress.
language_attributes
La función language_attributes se utiliza para añadir los atributos de lenguaje a la etiqueta <html> de la página. Estos atributos son importantes para los motores de búsqueda y para la accesibilidad del sitio web.
language_attributes();
Para utilizar esta función en el archivo header.php del tema, se puede utilizar el siguiente código:
<html <?php language_attributes(); ?>> <head> <!-- head content --> </head> <body> <!-- body content --> </body> </html>
bloginfo('charset')
La función bloginfo('charset') se utiliza para mostrar el conjunto de caracteres utilizado por el sitio web. Es importante asegurarse de que el conjunto de caracteres sea el correcto para evitar problemas de codificación.
bloginfo('charset');
Para utilizar esta función en el archivo header.php del tema, se puede utilizar el siguiente código:
<head> <meta charset="<?php bloginfo('charset'); ?>"> <!-- head content --> </head>
wp_body_open()
La función wp_body_open() se utiliza para añadir un Hook en la etiqueta <body> de la página. Este Hook se puede utilizar para añadir elementos adicionales al cuerpo de la página.
wp_body_open();
Para utilizar esta función en el archivo header.php del tema, se puede utilizar el siguiente código:
<body <?php body_class(); ?>> <?php wp_body_open(); ?> <!-- body content --> </body>
También es importante asegurarse de que la función body_class() se utilice en la etiqueta <body> para añadir clases adicionales al cuerpo de la página.
home_url
La función home_url se utiliza para obtener la URL de la página principal del sitio web. Esta URL se puede utilizar para crear enlaces en el tema.
home_url();
Por ejemplo, para crear un enlace a la página principal del sitio web en el archivo header.php del tema, se puede utilizar el siguiente código:
<a href="<?php echo home_url(); ?>">Inicio</a>
have_posts y the_post
Las funciones have_posts y the_post se utilizan para mostrar los contenidos de las publicaciones en el archivo index.php del tema.
La función have_posts comprueba si hay publicaciones disponibles para mostrar. Si hay publicaciones disponibles, devuelve true.
have_posts();
La función the_post muestra el contenido de una publicación.
the_post();
Para utilizar estas funciones en el archivo index.php del tema, se puede utilizar el siguiente código:
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3> <div><?php the_content(); ?></div> <?php endwhile; endif; ?>
En este ejemplo, se utiliza un bucle while para mostrar todas las publicaciones disponibles. La función the_title muestra el título de la publicación y la función the_content muestra el contenido de la publicación.
Conclusión
WordPress ofrece una amplia variedad de funciones que se pueden utilizar en un tema para añadir funcionalidades y personalizaciones adicionales. Al utilizar estas funciones en el archivo functions.php y en los archivos de plantilla del tema, se puede personalizar fácilmente el sitio web para satisfacer las necesidades específicas de cada sitio web.
Así lo hice, espero les sirva
<?php if (have_posts()): ?> <?php while (have_posts()): the_post(); ?> <?php the_content() ?> <?php endwhile; ?> <?php endif; ?>
Para que al hacer click en el logo vaya al home hay que colocarla la funcion home_url en a que esta en encabezado__logo, no en el de encabezado hamburguesa.
<body> <?php wp_body_open( ); ?> <header class="encabezado"> <div class="container-fluid gx-5 py-3"> <div class="row"> <div class="encabezado__hamburguesa col-2"> <a href="#"> <img src="<?php echo get_template_directory_uri();?>/assets/img/icon-menu.svg" alt="menu icon"> </a> </div> <div class="enbezado__logo col-5 col-md-2 px-2 px-md-4"> <a href="<?php echo home_url(); ?>"> <img src="<?php echo get_template_directory_uri();?>/assets/img/logo.svg" width="100%" alt="Yard Sales"> </a> </div> <div class="encabezado__menu col-6 col-md-5">
Hace unos segundos
Hola Cristian, se supone que la etiqueta del Analytics no es visible, por que queda visible aqui en el minuto 4:07?, como hago para poder esconderla y que no sea visible?
¡Hola, Luis! El código que usé es a modo de ejemplo, cuando uses el código de Analytics no estará visible.
Gracias por tu respuesta, sin embargo estoy escribiendo mi etiqueta de Analytics y se hace publico en la pagina, por favor ayudame a resolver esto, saludos
Hola, Porque se divide el código php en tantos tags, if, while, cierre de llaves. No seria mas claro tenerlo únicamente en un solo bloque de <?php ?> ? gracias un saludo
Hola!
Es un estándar que utiliza WordPress para sus templates y plugins. Igualmente, visualmente es mucho más legible, sobre todo cuando trabajamos con Visual Studio Code.
have_posts() solo funciona si se cofigura la pagina como homepage(pagina de inicio)? y si creo otra pagina con contnenido y no es la agina de inicio, por ejemplo, la seccion 0 'Nosotros'?
