Refactorizando nuestro código

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

Gabriel Mundaray

student•

Aunque en este curso aprendí muchas cosas que no sabía, hay dos cosas que me gustaría agregar, ya que estoy haciendo este curso desde la ruta desarrollo con WordPress.

Antes de ente curso deberían añadir en a ruta cursos introductorios de PHP para que el estudiante lo entienda mejor, no es justo que luego del curso de creación de Blogs con WordPress, de una vez te pongan a crear themes, deberían colocar antes el curso de Introducción a PHP por ejemplo.
A veces el profesor iba muy rápido, y además de esto, su pantalla se veía como lenta, seguro un problema en la captura del video, esto tampoco ayudaba mucho.

Marco Antonio Riera Marquez

student•

Estoy muy de acuerdo con tu aporte Gabriel!

Aldo Miguel Ortiz Parodi

student•

Sobre tu sugerencia también pensé en ello y te comento que ahora antes de este curso se pide llevar los cursos de HTML y CSS, JavaScript Básico, PHP Básico y PHP Práctico. Platzi como plataforma está en constante mejora, y eso da mucho gusto. Los nuevos estudiantes tendrán una mejor experiencia antes de llevar este curso, que personalmente me ha EN CAN TA DO 😃 .

Jeremías San Martín

student•

Este curso era justo lo que no entendía de los theme de wordpress.

¡Buen trabajo!

Cristian Ramanzin

teacher•

¡Que bueno! Luego nos dejas un review contándonos que fue lo que más te gustó. 😀

Leonardo Rios Pineda

student•

Personalmente me ayudo a tener mejores practicas en el desarrollo de temas <3

Stephany Kamsteeg Rodiño

student•

que enrredo este curso JAJAJA lo unico que aprendí fue a instalar el localWP xDDD

César Luis Amundaray Rodríguez

student•

Jajaja

Andrés Felipe Acevedo Del Rio

student•

Esta clase es un antes y un después jajaja. Especialmente con lo de:

   <?php do_action("acv_signin"); ?>

👌👌👌

Julián Andrés Loaiza Ospina

student•

Refactorizar código

Para seccionar el contenido de los archivos se utiliza una carpeta que por conveniencia y estándar se suele llamar template-parts en la cual se almacenarán archivos .php que sean partes específicas de nuestro código para hacerlo más legible y se hace referencia al código mediante la función:

<?php get_template_part('template-parts/content', 'header'); ?>

En este caso se trae el código php que se encuentra en la dirección:

nuestro-tema/template-parts/content-header.php

<header class="encabezado">
    //.. Código html y php
</header>

También existe la función do_action(*nombrehookpersonalizado*) la cuál permite ejecutar un fragmento de código en un lugar específico del ciclo de ejecución

Por ejemplo para para cambiar un texto de sign in a log in según el estado del usuario

<a href="<?= home_url("sign-in"); ?>" class="encabezado_sign-in"> //página sign-in
    <?php do_action("plz_signin"); ?>
</a>

functions.php

function plz_add_to_signin_menu(){
    $current_user = wp_get_current_user();
    $msg = is_user_logged_in()? $current_user->user_email : "Sign in";
    echo $msg;
}

add_action("plz_signin", "plz_add_to_signin_menu");

Franklin Peñafiel

student•

Joya de curso, aprendí mucho y ya lo apliqué en un proyecto del trabajo, solo me faltaba aprender optiminar el código, al principio pensé usar include pero no me funcionó. Este video me explicó lo que tengo que hacer. Gracias

Aldo Miguel Ortiz Parodi

student•

12. Refactorizando nuestro código

Lo aprendido en esta clase ha sido súper interesante, un tanto complejo pero EMOCIONANTE. Espero poder aplicar lo aprendido en este curso en varios proyectos que tengo a disposición :)

Además aprendimos la importancia de refactorizar nuestro código.

Referencias documentación WordPress:

Santiago Pereira

student•

Hola, excelente curso

Hay forma de refactorizar el archivo functions.php con el fin de no tener tantas lineas de codigo y actiones en un solo lugar?

Cristian Ramanzin

teacher•

Si, puedes tener tu carpeta includes por ejemplo, y dentro de esa carpeta tener tus funcionalidades divididas por archivos. Luego desde el archivo functions.php las llamas utilizando la función de PHP required_once. Documentación

Cristian Ramanzin

teacher•

Fe de erratas. La función se llama require_once

César Luis Amundaray Rodríguez

student•

Wow! ha sido un reto llevar este curso. Con lo aprendido siento que a penas estoy a las puertas de algo mucho más grande. A seguir practicando y aprendiendo.

Rodrigo Alles

student•

Apuntes

Refactorizando nuestro código en WordPress

Cuando se trabaja con temas de WordPress, es importante mantener un código limpio y organizado para facilitar su mantenimiento y escalabilidad. Una forma de hacerlo es utilizando plantillas parciales y la función get_template_part. A continuación, se explican los pasos para refactorizar el código de un tema de WordPress.

Creando plantillas parciales

Las plantillas parciales son archivos que contienen una porción de código que se utiliza en varias partes del sitio web. Por ejemplo, la sección de encabezado o pie de página. Para crear una plantilla parcial, se guarda el código correspondiente en un archivo y se lo nombra de manera descriptiva.

// header.php
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php wp_title( '|', true, 'right' ); ?></title>
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
    <?php do_action( 'before_header' ); ?>
    <header>
        <?php get_template_part( 'template-parts/header/logo' ); ?>
        <?php get_template_part( 'template-parts/header/navigation' ); ?>
    </header>
    <?php do_action( 'after_header' ); ?>
    <main>

En este ejemplo, se crea la plantilla parcial header.php que contiene el código del encabezado del sitio web. Se utiliza la función get_template_part para incluir otras plantillas parciales, como logo.php y navigation.php, que contienen el código correspondiente al logo y la navegación del sitio web.

Utilizando la función get_template_part

La función get_template_part se utiliza para incluir plantillas parciales en un archivo de tema. La sintaxis general de la función es la siguiente:

get_template_part( $slug, $name );

$slug: es el nombre del archivo de la plantilla sin la extensión .php. Por ejemplo, header para header.php.
$name: es el nombre adicional de la plantilla parcial. Por ejemplo, logo para logo.php.

Utilizando la función do_action

La función do_action se utiliza para ejecutar acciones en un punto específico del código. Las acciones son ganchos que permiten a los plugins y temas de WordPress agregar o modificar el comportamiento del sitio web. La sintaxis general de la función es la siguiente:

do_action( $tag, $arg );

$tag: es el nombre de la acción.
$arg: es un argumento opcional que se pasa a la acción.

Utilizando la función wp_get_current_user

La función wp_get_current_user se utiliza para obtener el usuario actual en WordPress. La función devuelve un objeto WP_User que contiene información del usuario. La sintaxis general de la función es la siguiente:

$current_user = wp_get_current_user();

En este ejemplo, se almacena el objeto WP_User del usuario actual en la variable $current_user.

Utilizando la función var_dump

La función var_dump se utiliza para imprimir información detallada sobre una variable o expresión en PHP. La función muestra el tipo de datos, la longitud y los valores de las variables. La sintaxis general de la función es la siguiente:

var_dump( $variable );

En este ejemplo, se utiliza la función var_dump para imprimir la información detallada del objeto WP_User del usuario actual.

Conclusión

Refactorizar el código en WordPress utilizando plantillas parciales y la función get_template_part es una forma efectiva de mantener un código organizado y fácil de mantener. Además, las funciones do_action, wp_get_current_user y var_dump son herramientas útiles para agregar funcionalidades y depurar errores en los temas de WordPress.

Alvaro Ruiz

student•

Porque cuando doy clic a 'Sign in' me redirecciona al home y no a sing-in.php para realizar un posible logueo?

Alvaro Ruiz

student•

XD novatadas, repuesta! Porque estoy creando la carpeta (o el archivo php) en la raiz del tema y no en la raiz del proyecto! wordpress\nameProject\sign-in\index.php

Jean Garcia

student•

Excelente, es como si modularamos elntrmplate

Alejandro Ariza

student•

funtions.php

function plz_add_to_signin_menu(){ $current_user = wp_get_current_user(); // var_dump($current_user); $msn = is_user_logged_in()? $current_user->user_email : "iniciar sesión"; echo $msn;} add_action("plz_signin","plz_add_to_signin_menu");

content-header.php

<div class="encabezado__cart col-5 col-md-2"> <a href="<?php echo home_url("sign-in"); ?>" class="encabezado_sign-in"> <?php do_action("plz_signin"); ?> </a> <a href="#" class="encabezado__link active"> <img src="<?php echo get_template_directory_uri();?>/assets/img/header-empty-card.svg" alt="cart"> </a> </div>

Alfonso José Chavarro Cortes

student•

Template Parts: Son como piezas de código que puedes usar una y otra vez en diferentes partes de la página.
get_template_part(): Es una función que permite llamar una de esas piezas de código en la página.
do_action(): Es una función que te permite invocar una función específica previamente descrita en la página.
var_dump(): Función que permite mostrar información detallada de alguna variable o expresión de PHP. Esta función muestra información estructurada, como el tipo y el valor de la variable.

fermin martin

student•

Mejoramos las medidas del ancho de pantalla con bootstrap para que encaje mejor

fermin martin

student•

Crear y encapsular la funcionalidad Sign In (registro) de forma dinámica

Alvaro Ruiz

student•

Es un curso muy útil y funcional, ciertamente se requiere pasar por el introductorio de PHP, pero es un curso de los que tengo de referencia.

Will Lemus

student•

Excelente curso me ha ayudado mucho en este proceso de aprendizaje que he tomado, me gusta por ser muy practico

Norman Jaimes Mora

student•

Cómo hizo para que el objeto que le mostró el var_dump, se le mostrara indentado en el front?

function plz_add_to_signin_menu(){
    $current_user = wp_get_current_user();
    $msg = is_user_logged_in()? $current_user->user_email : "Sign in";
    echo $msg;
}

add_action("plz_signin", "plz_add_to_signin_menu");

// header.php
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php wp_title( '|', true, 'right' ); ?></title>
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
    <?php do_action( 'before_header' ); ?>
    <header>
        <?php get_template_part( 'template-parts/header/logo' ); ?>
        <?php get_template_part( 'template-parts/header/navigation' ); ?>
    </header>
    <?php do_action( 'after_header' ); ?>
    <main>

Refactorizando nuestro código

Comenzando nuestro theme

Conversión de Plantillas HTML a Temas de WordPress

Instalación de LocalWP en Windows para WordPress

Creación de un Tema de WordPress desde Cero

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