Hooks

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

5. Hooks

Vamos a conocer los Hooks de WordPress.

Tenemos principalmente dos Hooks:

1. Action: Interrumpe la ejecución para ejecutar la acción y luego continua.
2. 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:[email protected];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:[email protected];400;500;600;700&display=swap",array(),false,'all');
    wp_register_style("google-font2","https://fonts.googleapis.com/css2?family=Roboto:[email protected];400;500;700&display=swap",array(),false,'all');
    wp_register_style("bootstrap","https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css",array(),"5.1.3",'all');
    wp_register_style("bootstrap-icons","https://cdn.jsdelivr.net/npm/[email protected]/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");

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:[email protected];400;500;600;700",array(),false,'all');
  wp_register_style("google-font-2","https://fonts.googleapis.com/css2?family=Roboto:[email protected]&display=swap",array(),false,'all');
	wp_register_style("bootstrap","https://cdn.jsdelivr.net/npm/[email protected]/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?>

¿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.

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í. 😑

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

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

tenia esta duda y encontre este post Registrar estilos es, de algún modo, algo “opcional” en WordPress. Si crees que tu estilo no va a ser utilizado por ningún plugin o no vas a usar ningún código para cargarlo de nuevo, eres libre de ponerlo en cola sin registrarlo.

Llevo 2 años sin usar php y ahora se me hace feo su uso. muy complicado

El enqueue corregido para que agregue las dos fuentes.

``
    wp_enqueue_style("estilos", get_template_directory_uri()."/assets/css/style.css", array("google-font", "google-font-2","bootstrap"
```));
```

Argumentos:

handle: es el nombre personalizado que le asignamos o un identificador único al script

src: direccion ó fuente del archivo

deps: se asignan las dependencias en caso que no exista se pasa un array vacío así;----- array() -----

ver: se asigna version del archivo

Argumentos:

wp_register_style( $handle:string, $src:string|boolean, $deps:array, $ver:string|boolean|null, $media:string )

wp_enqueue_script( $handle:string, $src:string, $deps:array, $ver:string|boolean|null, $in_footer:boolean )

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