Agregando de funcionalidades de WordPress a nuestro theme

Clase 6 de 13 • Curso de Creación de Temas para WordPress

Gustavo Amarista

student•

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 while(have_posts()){ the_post(); ?>
        <?php the_content(); ?>
    <?php } ?>

<?php } ?>

Experimentando con el source perfectamente se puede escribir de la siguiente manera:

<?php 
if(have_posts()){ 
         while(have_posts()){ the_post(); 
             the_content(); 
         } 
 } ?>

Gabriel Mundaray

student•

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

Aldo Miguel Ortiz Parodi

student•

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.

Carlos Backus

student•

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.

Henry Jeffersson Salinas Arenas

student•

===

Matias A. Mendoza

student•

Confirmo, el lag del video es muy molesto.

Andrés Felipe Patiño Vallejo

student•

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/

Efraín Jacobo González Bermúdez

student•

Gracias! Gran aporte!!

Emanuel Mendoza

student•

Ya no existe :(

Natali Rivero

student•

Estoy creando mi custom theme y acá dejo algunas recomendaciones:

En lugar de pegar todo en el index.php, pueden crear una plantilla general en ese archivo (p.ej. vean el index.php de Twenty Twenty o Twenty Fifteen), y crear un nuevo archivo page-inicio.php, en el cual pegar el codigo de la pagina de inicio. Lo mismo pueden hacer con sus otras páginas estáticas ej. page-nosotros.php; solo debe coincidir el nombre con el slug de la página que crearon desde el administrador de WP. Ejemplo: page-slugdemipagina.php
Yo mi plantilla de header.php la dejé hasta dónde se cierra la sección </header>; me parece confuso lo que dice el profesor, de que lo copies hasta donde abre el contenedor de Bootstrap, aunque también estoy utilizando bootstrap mejor dejarlo hasta el cierre del header.
La de footer.php la comencé dónde abre la etiqueta <footer> y no antes, por la misma razón anterior, además inspeccioné el tema Twenty Twenty y lo hace así...

Espero les sirva ;)

Javier Ladino

student•

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.

Aldo Miguel Ortiz Parodi

student•

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

Diego Rubio

student•

que curso mas malo!!!!!

FRANK CARLOS LISBOA ABAD

student•

Muy enrredado abrir y cerrar llaves adjunto mi codigo.

<?php if (have_posts()) : ?>

    <?php while (have_posts()) : ?>
        <?php the_content(); ?>
    <?php endwhile; ?>

<?php endif; ?>

Jesús Velázquez Jiménez

student•

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();	
	}
}

Julián Andrés Loaiza Ospina

student•

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: https://vegibit.com/the-top-100-most-commonly-used-wordpress-functions/

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

Henry Jeffersson Salinas Arenas

student•

la verdad no me gusta este curso, no se que pasa

Daniela Leon

student•

HolaChicosTengo una duda:Archivo functions.php/Minuto 3:09/Linea 18¿Porque cerro aquí el php? _?>

Cristian Ramanzin

teacher•

¡Hola, Daniela! Lo hice para poder escribir HTML, si no la cerraba todo lo que escribiese sería PHP.

Oswaldo Sánchez Salazar

student•

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.

Cristian Ramanzin

teacher•

¡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/

Sammy Joseph Taboada Paz

student•

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

Ermilo Joel Dorantes Uc

student•

Cuando trabajas PHP con HTML tienes que abrir y cerrar el PHP

Juan Felipe Beltrán Díaz

student•

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

Nicolas Tarazona

student•

IMPORTANTISIMO!!!, tener a la mano este articuclo: https://codex.wordpress.org/Theme_Development, les va a quitar dolores de cabeza

Rodrigo Alles

student•

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.

LAURA FERNANDA GARCIA MOLINA

student•

Así lo hice, espero les sirva

<?php if (have_posts()): ?>
<?php while (have_posts()): the_post(); ?>
    <?php the_content() ?>
<?php endwhile; ?>
<?php endif; ?>

Diego Vergara

student•

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

Luis Fernandez

student•

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?

Cristian Ramanzin

teacher•

¡Hola, Luis! El código que usé es a modo de ejemplo, cuando uses el código de Analytics no estará visible.

Luis Fernandez

student•

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

George M

student•

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

Cristian Ramanzin

teacher•

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.

Alvaro H. Ruiz V.

student•

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'?