Contenido del curso
Jesús Velázquez Jiménez
Mauricio Enrique Fernandez Lopez
Contenido del curso
Jesús Velázquez Jiménez
Mauricio Enrique Fernandez Lopez
Andrés Felipe Patiño Vallejo
Andrés Felipe Patiño Vallejo
Mauricio Enrique Fernandez Lopez
Francisco Ezequiel Ferreyra
Tania Sosa
Daniel Palacios Romero
Daniel Alejandro López Linares
Jhony Cepeda
Alejandro Morales
Julián Andrés Loaiza Ospina
Aldo Miguel Ortiz Parodi
Sebastián Pascali Pasquale
Orlando Jose Altamiranda Piñango
Cristian Ramanzin
ProfesorOrlando Jose Altamiranda Piñango
José Fabián Beltrán Meza
Jesus Francia
Edison Pico Castaño
Emanuel Mendoza
Martha Liliana Dominguez Gonzalez
Rodrigo Alles
erick blanco
Cristian Ramanzin
ProfesorAldo Miguel Ortiz Parodi
Cristian Ramanzin
ProfesorAldo Miguel Ortiz Parodi
Emma Yendis
Luis Anton
Carlos Alfredo Piedrahita Rodriguez
erick blanco
Cristian Ramanzin
ProfesorEmma Yendis
Kevin Andrés Torrecilla Martínez
Cristian Ramanzin
Profesor
Julio Aníbal Gallego Zapata
Cristian Ramanzin
ProfesorHooks:
Código propio.
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
gracias
¿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.
gracias
¿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.
¡Hola Francisco!
Muchas gracias por el aporte 😄
¡Nunca pares de aprender! 💚
Creo que no hay mejor explicacion que esta, muchas gracias por tu aporte.
** 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"
Ufff gracias, me pasó lo mismo, sabia que el error estaba en la parte de estilos, pero no notaba donde, gracias (●'◡'●)
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 😀👍
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?>
5. Hooks
Vamos a conocer los Hooks de WordPress.
Tenemos principalmente dos Hooks:
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");
¿No se puede calificar el curso? Le pondría un 0, falta información
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í. 😑
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/
Volveré en unos días mejor preparado entonces.. Gracias Cristian 😎
Les comparto los enlaces de la documentación oficial que contienen los hooks disponibles para: Actions:
Filters:
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.
Puedes iniciar por tomar el curso de programación básica y ya luego decides qué ruta de aprendizaje seguir.
Mirate algún curso básico de PHP. Luego se te hará muchisimo mas fácil entender este curso.
Definitivamente tomaré primero el curso de PHP, para disfruta al máximo este curso.
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.
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
¡Muy importante esto! Gracias por el aporte.
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:
Y aún así todo marca en error :(
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. 😊
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í:
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);
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.
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!
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
Exactamente, aunque puede que no lo imprima en ese momento, si lo modifica.
Estoy creando el tema con mi propia plantilla y estoy muy emocionada.
Una pregunta, ¿En este curso usan wordpress com o wordpress org?
Hola, Kevin. En este curso usamos un entorno local para trabajar, los archivos y documentación utilizados son provistos por https://wordpress.org.
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.
¡Hola! Si, el otro es Tailwind. Te dejo la URL: https://tailwindcss.com/