Hooks

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

Clase anteriorSiguiente clase

Jesús Velázquez Jiménez

student•

Hooks:

Código propio.

Action: Interrumpe la ejecución y agrega código. add_action(hook, function);
Filter: Interrumpe la ejecución y modifica el contenido.

Estilos

Registrar estilos. wp_register_style(name, ruta, lista-dependencias, version, media-querie) Añadir estilo a wordpress. wp_enqueue_style() Recibe los mismos parámetros, pero debemos añadir los estilos registrados anteriormente, pero ahora como dependencias en el array().

Scripts

wp_enqueue_script(name, ruta);

Los estilos y los scripts se agragan en un ciclo que debemos inicializar. wp_head() -> styles wp_footer() -> scripts

Mauricio Enrique Fernandez Lopez

student•

gracias

Andrés Felipe Patiño Vallejo

student•

¿Cuántos hooks hay en WordPress? Miles de ellos. Sólo en WordPress ya tenemos más de 2.000 entre actions y filters. Pero esos son sólo los del core de WordPress. En realidad hay muchos más, porque todos los themes y plugins que instalamos también tienen sus propios hooks. O sea que es una locura.

Sin entrar en detalle, podemos decir que los hooks son lo que nos permite modificar WordPress, un theme o un plugin "sin tocarlo". ¿Y porque es tan importante? Porque así podemos actualizar WordPress, plugins y themes sin perder esas modificaciones.

¿ cómo localizar los hooks? Lo ideal sería entrar en las entrañas de WordPress y buscar ahí. Cuando quieres modificar algo, vas a ese archivo, buscas entre la líneas de código, y cuando ves una acción llamada do_action o apply_filters, ya lo tienes. Es es el punto en el que tienes la opción de añadir, quitar o modificar código.

Por otra parte, también tenemos buscadores de hooks, siendo uno de los más recomendables hookr.io, en el que tenemos una impresionante biblioteca de hooks de incalculable valor. Esa web vale todo su peso en oro, y además, es gratis.

Andrés Felipe Patiño Vallejo

student•

http://hookr.io/

Mauricio Enrique Fernandez Lopez

student•

gracias

Daniel Alejandro López Linares

student•

** OJO CON ESTOS ERRORES DE TYPING**

Pase horas revisando mi código porque no generaba los estilos usando las funciones en php.

PRIMER POSIBLE ERROR Escribir mal las carpetas: En mi caso fue en la carpeta "functions" al no escribir la "s" al final.

** SEGUNDO POSIBLE ERRO** no colocar "/" al inicio del enlace a carpetas style o script.

"/assets/js/script.js"

Jhony Cepeda

student•

Ufff gracias, me pasó lo mismo, sabia que el error estaba en la parte de estilos, pero no notaba donde, gracias (●'◡'●)

Alejandro Morales

student•

Gracias, ya había empezado a revisar todo el código cuando pensé que a alguien más le pudo pasar lo mismo y ese eras tu 😀👍

Francisco Ezequiel Ferreyra

student•

¿Qué son los Hooks? Son puntos concretos y estratégicos dentro del core de WordPress que permiten añadir funcionalidades o modificar un comportamiento. Cuando la secuencia de carga llegue a ese punto concreto, se ejecuta la función que has “enganchado”.

En WordPress existen dos tipos de hooks: acciones (actions hooks) y filtros (filters hooks)

Action Hooks Las acciones o action hooks ejecutan una función propia en un lugar preciso en un momento determinado de la línea de ejecución de WordPress. Cuando llega a un punto concreto, realiza la acción que quieras además de las que ya se van a ejecutar por defecto. En resumen, los action hooks añaden código adicional a tu WordPress.

Filter hooks o filtros Los filtros o filter hooks de WordPress manipulan la información en un punto concreto de la ejecución antes de que se muestre en la pantalla o se almacene en la base de datos.

Tania Sosa

student•

¡Hola Francisco!

Muchas gracias por el aporte 😄

¡Nunca pares de aprender! 💚

Daniel Palacios Romero

student•

Creo que no hay mejor explicacion que esta, muchas gracias por tu aporte.

Julián Andrés Loaiza Ospina

student•

Hooks

HOOKS son simplemente una posición y no hacen nada por sí mismos. Son un lugar que permite a los desarrolladores "conectar" su código personalizado a WordPress en ubicaciones específicas y cambiar la forma en que WordPress funciona sin editar los archivos principales.
FILTER (Interrumpe la ejecución y modifica el contenido)

son códigos que le permiten modificar los datos existentes antes de enviarlos de vuelta a WordPress para que se procesen antes de que muestre los datos modificados.

Un filtro te permite hacer cosas como cambiar la longitud de un extracto, colocar publicaciones relacionadas debajo de tu contenido principal o cambiar un precio en WooCommerce.
ACTION (Interrumpe la ejecución y agrega código)

También son piezas de código que pueden crear funcionalidad adicional en un punto específico durante el procesamiento de una página. Por ejemplo, es posible que desee agregar otro widget o colocar un mensaje promocional en su página.
```
**add_action(hook, function);**
```

Estilos y Scripts

Estilos y scripts tales como Google fonts o Bootstrap y archivos .js se registran en un archivo llamado functions.php

<?php

function plz_assets(){
	
	//Registrar estilo: wp_register_style(name, ruta, lista-dependencias, version, media-querie)
  wp_register_style("google-font","https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700",array(),false,'all');
  wp_register_style("google-font-2","https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap",array(),false,'all');
	wp_register_style("bootstrap","https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css",array(),"5-1",'all');

	// Añadir estilos: wp_enqueue_style(name, ruta, array("name1","name2","etc")
  wp_enqueue_style("estilos", get_template_directory_uri()."/assets/css/style.css", array("google-font","bootstrap"));

	// Añadir scripts
  wp_enqueue_script("yardsale-js",get_template_directory_uri()."/assets/js/script.js");
}

// Añadir función al entorno de ejecución de scripts
add_action("wp_enqueue_scripts","plz_assets");

Por último, es importante ejecutar el hook en el lugar correspondiente al ciclo de ejecución:

<?php wp_head(); //justo antes de terminar la etiqueta head ?>

<?php wp_footer(); //justo antes de terminar la etiqueta body?>

Aldo Miguel Ortiz Parodi

student•

5. Hooks

Vamos a conocer los Hooks de WordPress.

Tenemos principalmente dos Hooks:

Action: Interrumpe la ejecución para ejecutar la acción y luego continua.
Filter: Además de poner ese código donde corresponde, nos permite modificar.

Aprendimos que la función para registrar estilos en WordPress es:

//El primer argumento es el indetificador de tu estilo
//El segundo argumento la ruta
// Tercer argumento un array
// Cuarto argumento puede ser un bool falso o puedes detallar en un string la versión
// Quinto argumento tipo de media, se pone 'all'
wp_register_style("google-font1",
"https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap",
array(),
false,
'all');

Comparto el código que se hizo en clase:

functions.php

<?php

function arudope_assets(){
    wp_register_style("google-font1","https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap",array(),false,'all');
    wp_register_style("google-font2","https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;500;700&display=swap",array(),false,'all');
    wp_register_style("bootstrap","https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css",array(),"5.1.3",'all');
    wp_register_style("bootstrap-icons","https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css",array(),"1.7.2",'all');

    wp_enqueue_style("estilos",get_template_directory_uri() . "/assets/css/style.css", array("google-font1", "google-font2", "bootstrap", "bootstrap-icons"));

    wp_enqueue_script("yardsales-js", get_template_directory_uri() . "/assets/js/script.js");
}

add_action("wp_enqueue_scripts", "arudope_assets");

Sebastián Pascali Pasquale

student•

¿No se puede calificar el curso? Le pondría un 0, falta información

Orlando Jose Altamiranda Piñango

student•

Acá si me perdí un poco.. No me esperaba esto 😅 ¿Es necesario ser experto en PHP para continuar? ¿o que nivel se requiere? Sí bien entendí cuando habló acerca de las funciones, pues estoy aprendiendo Ruby y algo de Python, igual considero me despiste... Mi duda: ¿es necesario aprender PHP para realizar mis themes y adaptaciones personales en WordPress? Yo me lo imaginaba más como de tomar un theme y modificar su CSS y HTML para darle mi propio toque personal, pero veo que nada que ver aquí. 😑

Cristian Ramanzin

teacher•

Hola, Orlando! Si es necesario saber al menos lo básico. Te paso un curso que te puede servir. https://platzi.com/clases/php-practico/

Orlando Jose Altamiranda Piñango

student•

Volveré en unos días mejor preparado entonces.. Gracias Cristian 😎

José Fabián Beltrán Meza

student•

Les comparto los enlaces de la documentación oficial que contienen los hooks disponibles para: Actions:

Filters:

https://codex.wordpress.org/Plugin_API/Filter_Reference

Jesus Francia

student•

holaa, estaba viendo este curso, pero creo que es un poco avanzado para mi, hay algún otro más para principiante. debo decir que voy entendiendo el procedimiento, pero a nivel codigo no entiendo nada.

Espero una pronta respuesta.

Saludos.

Edison Pico Castaño

student•

Puedes iniciar por tomar el curso de programación básica y ya luego decides qué ruta de aprendizaje seguir.

Emanuel Mendoza

student•

Mirate algún curso básico de PHP. Luego se te hará muchisimo mas fácil entender este curso.

Martha Liliana Dominguez Gonzalez

student•

Definitivamente tomaré primero el curso de PHP, para disfruta al máximo este curso.

Rodrigo Alles

student•

Apuntes

Hooks en WordPress: Qué son y cómo usarlos en el archivo functions.php

En el archivo functions.php de un tema de WordPress, se pueden utilizar los Hooks para añadir estilos y scripts en las páginas de WordPress. Los Hooks que se utilizan para añadir estilos y scripts son wp_enqueue_style y wp_enqueue_script.

wp_enqueue_style

La función wp_enqueue_style se utiliza para añadir hojas de estilo en las páginas de WordPress. Esta función toma tres argumentos: el nombre que se le dará al estilo, la ruta relativa del archivo CSS, y un arreglo opcional de dependencias y versiones.

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

Parámetros

$handle: Es el nombre que se le dará al estilo.
$src: Es la ruta relativa del archivo CSS.
$deps: Es un arreglo opcional de dependencias. Si se especifica, las dependencias se cargarán antes que el estilo.
$ver: Es la versión del estilo.
$media: Es el tipo de media al que se aplicará el estilo.

Ejemplo

Por ejemplo, para añadir una hoja de estilo llamada my-style que se encuentra en la carpeta css del tema, se puede utilizar el siguiente código en el archivo functions.php:

function my_enqueue_styles() {
    wp_enqueue_style( 'my-style', get_template_directory_uri() . '/css/my-style.css', array(), '1.0', 'all' );
}

add_action( 'wp_enqueue_scripts', 'my_enqueue_styles' );

En este ejemplo, la función my_enqueue_styles se ejecutará cuando se cargue la página y utilizará wp_enqueue_style para añadir la hoja de estilo my-style.css.

wp_enqueue_script

La función wp_enqueue_script se utiliza para añadir scripts en las páginas de WordPress. Esta función toma tres argumentos: el nombre que se le dará al script, la ruta relativa del archivo JavaScript, y un arreglo opcional de dependencias y versiones.

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

Parámetros

$handle: Es el nombre que se le dará al script.
$src: Es la ruta relativa del archivo JavaScript.
$deps: Es un arreglo opcional de dependencias. Si se especifica, las dependencias se cargarán antes que el script.
$ver: Es la versión del script.
$in_footer: Indica si el script debe ser cargado en el pie de página.

Ejemplo

Por ejemplo, para añadir un script llamado my-script que se encuentra en la carpeta js del tema, se puede utilizar el siguiente código en el archivo functions.php:

function my_enqueue_scripts() {
    wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/my-script.js', array( 'jquery' ), '1.0', true );
}

add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

En este ejemplo, la función my_enqueue_scripts se ejecutará cuando se cargue la página y utilizará wp_enqueue_script para añadir el script my-script.js. El script depende de la biblioteca jQuery, por lo que se añade 'jquery' en el arreglo de dependencias.

Conclusión

Los Hooks wp_enqueue_style y wp_enqueue_script son herramientas poderosas para añadir estilos y scripts en las páginas de WordPress. Al utilizar estos Hooks en el archivo functions.php, se puede personalizar fácilmente el tema y los plugins de WordPress para satisfacer las necesidades específicas de cada sitio web.

erick blanco

student•

importante no solo estar atentos a la S de functions.php si no a la forma de escribirlo, esto puede generar tambien problemas, lo se ya me paso, pero de los errores se aprende

Cristian Ramanzin

teacher•

¡Muy importante esto! Gracias por el aporte.

Aldo Miguel Ortiz Parodi

student•

Ayer instalé las extensiones para que reconozca las funciones de wordpress y hooks, pero hoy que he entrado no reconoce ninguna función y me gustaría al menos guiarme un poco. Tengo instalado:

WordPress Snippets
WordPress Hooks IntelliSense
PHP Intelephense

Y aún así todo marca en error :(

Cristian Ramanzin

teacher•

Hola, Aldo! Para que no te pase tienes que abrir el proyecto de WordPress completo dentro del Visual Studio Code, y no solo la carpeta del theme. 😊

Aldo Miguel Ortiz Parodi

student•

Gracias por la respuesta! Aunque en realidad lo resolví de otra manera, resulta que Inteliphense no reconoce por defecto a WordPress y se debe agregar manualmente en "Stubs" la configuración así:

Una vez que lo hice ya reconoce todo y va GE NI AL.

Emma Yendis

student•

Para que les funcione el script, el $in_footer:boolean, debe ser true.

wp_enqueue_script( "nombre-js", get_template_directory_uri()."/assets/js/script.js", array(), false, true);

Luis Anton

student•

Esto fue lo que me saco de dudas, si los estilos del wordpress no le funcionan es por que no tienen _uri copien exactamente igual. Ya tenia dias en busca de solucion al colocar todo como mencionas aparecieron los estilos de inmediato.

Carlos Alfredo Piedrahita Rodriguez

student•

He tenido que ver los videos varias veces y seguir muy despacio el código, pero todo va tomando forma y cada vez entiendo más del funcionamiento interno de Wordpress. Genial!

erick blanco

student•

diferencias entre el action y el filter es que uno interrumpe y agrega codigo y el otro interrumpe y tambien modifica los datos que va a imprimir en ese momento

Cristian Ramanzin

teacher•

Exactamente, aunque puede que no lo imprima en ese momento, si lo modifica.

Emma Yendis

student•

Estoy creando el tema con mi propia plantilla y estoy muy emocionada.

Kevin Torrecilla

student•

Una pregunta, ¿En este curso usan wordpress com o wordpress org?

Cristian Ramanzin

teacher•

Hola, Kevin. En este curso usamos un entorno local para trabajar, los archivos y documentación utilizados son provistos por https://wordpress.org.

Julio Aníbal Gallego Zapata

student•

Hola Cristian, gracias por todo el conocimiento, me podrías indicar como se llama el otro framework que recomiendas diferente a bootstrap. gracias de antemano.

Cristian Ramanzin

teacher•

¡Hola! Si, el otro es Tailwind. Te dejo la URL: https://tailwindcss.com/

Hooks

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