 Pues vamos a empezar a ver lo que tenemos visto para hoy, que es la creación de nuestro primer plugin. Cuando tenemos WordPress, como esta versión, que es una 6.4.1, yo siempre lo acabo de mezclar las pruebas con mi nombre, para no tener dudas de cuál versión estoy utilizando, pues tenemos una funcionalidad muy estántar y no siempre encaja con lo que nosotros queremos hacer en nuestra aplicación. Por ese motivo existen dos formas de personalizarlo. Una son los temas. En este caso yo utilizo un tema que es Astra, uno de los temas más habituales tiene una parte gratis y una parte de pavo. Creo que he utilizado Astra. Vamos a ver lo que estamos utilizando. Y por otra parte tenemos la opción de utilizar plaques. Todos los plaques son pequeños componentes que se enganchan a un punto concreto de nuestro código para cambiar la funcionalidad o ampliarlo. Los plugins más sencillos que se hacían tradicionalmente suponían un cambio en el diseño de la pantalla. Me cambiaba la fórmula que pintaba las imágenes porque lo aplicaba en la clase. Me cambiaba alguna parte de la pantalla y demás. Aquí en apariencia tenemos los temas. Tenemos todos que tenemos instalados. Como es nuevo de esta versión 6.4, pues todavía no lo conozco bien. Así que mejor. No tenemos nada que no venga de serie. Es una instalación completamente limpia. Entonces tiene 224 que es el que está diseñado para allá que viene. Y por otra parte los plugins que los tenemos aquí justo debajo. Esa es la funcionalidad que nos permite que vaya un poquito más allá. Voy a hacer la resta de aquí porque está la que tenemos de la página del grupo y si no igual olvidamos. Yo ya me diría, así que por si acá solo te vemos. Yo lo que voy a hacer es crear un plugin en este caso. Este plugin se va a colocar aquí en esta pantalla. Lo activaremos y también clavemos un menú para poder utilizar nuestro plugin. Para poder configurarlo y que se compre de una manera distinta. Vamos a ser primero por lo fácil. Por lo que sabríamos hacer todos sin crear un plugin. Yo iba a crear una página, no un post. Y va a ser una página a la que yo voy a poner un artículo a la venta. Sea lo que sea, con un importe en euros. Se nota que está recién instalado, pero no tiene nada. Vamos a insertar aquí una imagen. No tenemos nada. Vamos a subirlo en archivo que tengo yo por aquí local. Este de aquí. Por ejemplo, la imagen de lo que vamos a hacer y cómo crear el plugin. Seleccionamos y aquí ponemos tu tutorial. ¿Cómo crear un plugin? Le ponemos un título y le vamos a poner un precio. Le ponemos un parbazo y le vamos a poner el precio. Y el puesto de abajo aquí va a venir el precio. 200 euros. Lo que vamos a hacer ahora es aquí crearemos un enlace más adelante. Que nos diga ver en otras maneras. Y aquí justo debajo conversión a otras maneras. Algo bastante sencillo para que la gente que por ejemplo esté en Latinoamérica pueda convertirlo a su manera loca. Le vamos a poner con imagen destacada la misma que tenemos para que nos aparezca todo bonito. Y ¿qué más le vamos a poner? Vamos a publicar directamente. Vamos a dar falta mucho más. Y vamos a ver la página. Aquí lo tenemos. La imagen destacada. Y esta otra que viendo que está presentando al mostrar dos puntas la vamos a quitar. Esta es el aquito. Quiero decir solamente la destacar. Es sencillo lo que queremos hacer. En esta página, tu tutorial de cómo crear un plugin, precio y conversión a otras maneras. ¿Cómo lo haríamos? Pues para crear un plugin nos hace falta tener un fichel exclusivamente. Con un fichel que creemos es suficiente para que el plugin exista. Yo tengo aquí abierto. Hizo al estudio code. No puedo utilizar el editor que le guste para crear el código en PHP. Yo utilizo esto porque es el más común. Y aquí dentro de WP content tenemos temas, plugins y hablados que son más conocidas. La madre de idiomas. Sobre estos dos. Sobre estas dos carpetas se ampliaremos nuestra funcionalidad. Hoy nos vamos por plugins y aquí tenemos dos plugins que nos vienen por defecto. El Hello Dolly, que es el ejemplo más sencillo y como es un plugin directamente un fichero. No tiene nada más. Y tiene que contener este bloque de información al inicio. De esta manera entiende que es un plugin. De hecho, ni siquiera todos los campos son necesarios. Con que tenga el nombre del plugin y la URI es suficiente. Entonces yo voy a hacer lo mismo, pero lo voy a hacer al formato de Akismet, que es un poquito más completo. Para que tenga una pantalla de configuración y que tenga un poquito más de funcionalidad. Me he creado una carpeta. New Folder. Conversor. Conversor. Y una cosa muy importante que es lo que provoca que se tiren por tierras muchos de los plugins. No respetar la nomenclatura y los perfiles. Ya que debes crear un fichero nuevo que se tiene que llamar igual que la carpeta e igual que el plugin para ser validado entre el estilo público con verso. No es obligatorio que sea así. Hay que decir esto que mucha gente que no mirar cómo se tiene que programar pues lo hace mal y obtiene su primer rechazo. En este caso tenemos que decirlo. En este caso tenemos que decirlo aquí al inicio. Que queremos que sea PHP. Como sabéis esta instrucción de cierre es opcional. Yo se la pongo, pero es opcional ponerla. Inicio de comentario, fin de comentario. Y aquí en medio tenemos que ponerle la ring name. Dos puntos. Como se llama aquí. Conversor. Una descripción. Es necesaria para que no lo validen. Con versión de importes a distintas monedas. Que más una versión. Inicialmente puede ser cualquiera. Yo le pongo una muy, muy beta porque es muy sencillito. Y autor. En este caso es WP. Conferral. Que es nuestro grupo de guapas. Luego es conveniente que pongamos una URL como tenemos demás. Sí, sobre todo si es comercial para que sepan localizarnos y sepan dónde está nuestra información para tener un feedback. Se pueden poner más campos, por supuesto. Se pueden poner los cuantos, quién es el autor, quién son los colaboradores. La empresa que lo vende. Desde qué versión funciona, en qué versión está comprobado. Todo eso se puede poner sin ningún problema. Vamos a hacerlo sencillito con esta información. Lo primero que tenemos que hacer en este fichero es bloquear la entrada de atacantes. Si yo tengo un fichero PHP y no tengo nada adicional, cualquiera puede ejecutarlo. Y podrían hacer una, un ataque a nuestro cuerpo. Aquí le ponemos siempre al principio. Salir si se accede directamente. Y cómo hacemos eso? Un if. Si no está definido. El que se vamos a poner es una constante. Lo que le gusta, la más habitual es esta. Es una constante que nos da la ruta absoluta del fichero que nos encontramos dentro de vueltas. Entonces lo que vamos a hacer es un exit y de esta manera salgo. Con esto tendríamos que asegurar este fichero, pero nos podrían hacer un un listar de carpetas. Si os fijáis aquí en fichero index que estaba así. Este fichero es un ejemplo de lo que tenemos que hacer con todo lo que hagamos nosotros. Cuando creamos una carpeta. Podemos listarla salvo que esté protegido por seguridad como no sabemos dónde van a desplegar nuestro plugin. Es conveniente que siempre que creemos. Una carpeta para nuestro plugin dentro hay un index vacío. Básicamente vacío no hace falta que tenga más. Eso hace que si yo abro la carpeta me vale dirigir a este fichero y no a pintar. Wordpress esta vez está echado de seguro y es porque no siempre se siguen algunas placas. Si siguen todas las prácticas Wordpress están seguros como cualquier otro sistema. Con esto ya tenemos un plugin. Yo voy a guardar aquí y vamos a ver que ya tenemos un plugin creado. Vengo aquí a plugins y ya tengo aquí mi plugin conversor activa. Si yo lo activo pues no pasa nada. No hace absolutamente nada porque no tiene más juego. Entonces que se activa o desactiva? Cuando yo creo un plugin a veces necesita por lo que comentábamos antes. Crear una tabla de mi modelo. Necesito comprobar si está instalado otro plugin porque es necesario. Eso se va a hacer aquí en el activate. Solamente aquí se va a hacer todas las comprobaciones para que mi plugin funcione. No tenemos un evento por así decirlo de instalación. Hay uno que se dispara pero nuestro plugin simplemente se instala con el simple hecho de copiar la carpeta. Con lo cual todo lo que sea necesario para que nuestro plugin funcione tiene que estar en el activate. Si yo copio la carpeta está como ahora y la activo. Este código no se puede ejecutar. Necesito activarlo para que pueda ser funcional. Y ahí sí tengo que asegurarme de poner todo lo que necesite para que el plugin funcione. Es un jugo que tenemos disponible en todos los plugins para utilizarlo. En este caso no hay cambios en modo de lo no hay ningún cambio importante. No hay ningún prerequisito pues no hace falta que tenga nada. ¿Qué es lo siguiente que vamos a hacer? Pues vamos a definir una opción de menú. Normalmente las opciones de menú no las utilizamos llamando directamente a hook sino que nos creamos una función. Y es conversor. Menú por nomenclatura tiene el apellido menú. Eso fijo menú y yo por antes le pongo. Ya que estoy cometiendo ahora mismo un error que es motivante para que me rechacen el plugin. Todo plugin tiene que tener un prefijo. ¿Por qué? Porque a fin de cuentas yo hago mi conversor. Pero el vecino de enfrente también hace su conversor. O ponemos un prefijo que normalmente es el que tiene que ver con la compañía. Se suele poner tres, cuatro, cinco letras que son las constantes de la compañía que lo fabrica. ¿Vale? Se pone adelante. Esto va a ser mi prefijo. Todas las funciones que yo creé tienen este prefijo. Todas las variables que yo creé van a tener este prefijo. ¿Vale? Y aquí debajo tengo que decirle que este menú, bueno, este menú, que esta función que se llama menú, realmente es la creación de la entrada del menú. Entonces utilizo una funcionaria que es ADAction. ¿Vale? Que tiene aquí una serie de parámetros. El primero de ellos es el hook que voy a utilizar. ¿Vale? Como estoy creando la entrada de menú de la parte de administración del backend, es adminMenu. Y lo segundo que tengo que indicarle es un callback. Allí puedo poner Function como función anónima y declarar la función o directamente llamar a mi función previamente de fin. Esto es lo más habitual por otra parte. ¿Vale? De esta manera, cuando se active, va a pasar por aquí, van a leer el ADAction y va a ejecutar esta funcionalidad. Y lo que voy a hacer en esta función es crear una página de menú. Y hizo la función ADMenuPage y le indico los parámetros. WPP, porque quiero, ¿vale? Conversor. Segundo parámetro, la entrada de menú. Esto se llama la página y ahora es la entrada de menú, lo que me aparece en el lateral. Normalmente es lo mismo. ¿Vale? Cuando no es lo mismo es cuando tengo un conjunto de páginas. Pero la principio para que es esta, la de menú Page, suele tener el mismo nombre. Siguiente parámetro, Capability. Estos son los permisos que yo voy a exigir que tenga mi usuario para poder visualizar esta página de menú. Yo puedo crear una página de menú para mi estado o para suscriptores. ¿Vale? Entonces aquí le pongo Manage Options, que es el permiso más alto, ¿vale? El administrador. Más parámetros que le vaya a poner. La ruta de la página que voy a visualizar. ¿Vale? Yo no voy a poner directamente aquí el cuerpo. Se puede poner también una función que es el cuerpo que voy a visualizar. ¿Vale? Voy, ¿vale? No es la página, es el slag primero. El slag es el nombre que yo asocio a mi plugin. Lo que me aparece en la URL para trabajar. V2.pp, condersor, monedas, ¿vale? ¿Qué más? Le voy a poner aquí como parámetro. Le voy a poner el parámetro de el callback. Te no quiero que haya ningún callback. En este caso. ¿Vale? Así que le pongo 0. Y por último, el icol, ¿vale? El icol es el que podemos utilizar para que aparezca más bonito. El icol no es este dibujito que vamos a poner aquí. Yo, como voy a hacer algo de monedas y los están mirando antes, son los dash icons, dash de dashboard icons, pues de icon. Hay uno que es Bonnie, que a mí no me gusta, que es un billete que nos entiende bien, pero si hay uno que es alt, que lo veo más claro, ¿vale? Ahora veremos cómo nos aparece. Podemos crear una página con este slag, para que no lo visualice. Lo que hacemos normalmente, es que no le ponemos esta página para que no la visualice con el slag, sino que ya está entrepondemos la ruta y es relativa a nuestro pla, ¿vale? Queda aquí una carpeta y aquí voy a crear la carpeta de las opciones de administrado. A mí. Lo primero que hago antes de que se movire el index, lo que hago, ¿vale? Nombre que yo quiero. Me invito a un punto de pensamiento, principal. Normalmente ponemos nombres en inglés, pero pues os habéis dado cuenta que es toda programación, el español lo lleva muy mal y le gusta más los nombres en inglés. Entonces, esto de aquí va a cambiar. ¿Vale? Tendría que poner la ruta relativa del punto en el que me encuentro a este fichero, para que me lo visualice. ¿Sí? Un punto barra, ¿vale? Carpeta actual, barra, admin, bar, main.ph. Pero vamos a ver si funciona. No lo veo. ¿Por qué? Porque no está activo, ¿vale? Tiene que estar activo, activamos y aquí voy a pasar los cosas que se rompa o como en este caso que ha aparecido, ¿vale? Si nos vamos a la página, página me encontrar, ¿vale? Ves que aquí nos pone una ruta, ¿vale? Que más o menos podría encajar, pero no es lo que queremos. ¿Por qué? Porque estoy pensando que esté en esta página, pero realmente estoy en la página vwp.admin. Entonces, ahorrabo la conversión desde ahí o le pongo una ruta soluta. Para hacer eso, normalmente nuestro plan y en este fichero hacemos una definición de una constante. Define fijo. Es una constante de mayúsculas donde so url, para que no se haga falta la url. Y aquí le ponemos y ya al pad. Esto siempre es igual, ¿vale? Esto es copiar y pegar en todos los plugins. No hay que hacerle nada. Plugindir url, no. Plugindir pas. Y aquí le pongo el fichero actual. Hay una constante. En pensépe, que es esta. ¿Vale? Definida la carpeta. ¿Vale? Aquí le puedo poner separador o no. Eso ya es según gustos, pero siempre hacemos igual. Es separador de director clavar. Voy a definir otra que en lugar de ser la url o si escribo los ficheros para que no tengáis. El perrido, el cursor es el pad. Aquí que me cambia, que aquí ya no hago un real pad. Hago directamente. Perdón, le he puesto al revés. Luego nos va a liar. Es en este que no tengo que hacerlo así. Y aquí pongo url y me sobra el real pad. Le he puesto justo al revés en los dos. Luego si no lo sigo a soltar un poquito más como puso para utilizarlo. Pues tengo dos constantes que me indican la ruta. Así que ¿qué voy a hacer ahora? Como voy a visualizar un fichero, desde la parte de lo que quiero que sea el pad completo. Aquí por delante le pongo el pad completo. No tiene barra final, así que se le ha guiado. Recargamos para que actualices la información. Y ahora aquí si os fijáis, la ruta es completamente distinta. ¿Lo vemos? No hay nada, pero porque la página está vacía. ¿Vale? Pero nada de ningún error. Si vemos que está funcionando podemos poner la versión de Wordpress y que le pongo Wordpress. Aquí ahora en este mmphp vamos a ponerle algo que sea html h1 condensor dvdp Si recaramos vemos que es esa página. ¿Vale? Esta es mi página de administración. Aquí lo que voy a hacer es todo lo que tiene que ver con la configuración de mi plugin. Si es un plugin que es muy complejo lo que haremos es guardar la información en un modelo propio. Si es un plugin como este que es relativamente sencillo utilizaremos un lugar diferente que es el lugar del almacenamiento de las opciones de configuración. ¿Vale? Hasta aquí voy muy rápido o nos vamos siguiendo más o menos, ¿no? Entonces nos vamos a quedar en la parte beta sin utilizarla y simplemente luego cambiamos de moneda y listo. ¿Vale? Vamos ahora a crear la parte del frontal lo que es la página en la que vamos a poner las monedas disponibles las monedas de conversión y demás. Y inicialmente puedo decirle qué conversión quiero entre dos monedas. ¿Vale? Entonces ¿Qué voy a hacer? Voy a definir aquí un campo input ¿Vale? input type igual text y lo utilizo un nombre es mi precijo WPP ¿Vale? para que no haya ningún conflicto de nombres y aquí estamos en euros WP para que sea dólares ¿Vale? Value igual vamos a ponerle inicialmente dólares vamos a guardar dos monedas para que tengo un poquito más de contenido el libro es de la filina y aquí le ponemos GBP ¿Vale? Tenemos dos monedas nos hace falta unos altos de línea y aquí un botón de water un punto type igual submit esto como es un formulario para poderle enviar tenemos que ponerle el tab for por delante y por detrás for importante un método para que me lo mande por post y el action se la puedo poner o no si se la pongo como que es el mismo sitio vacío ¿Vale? de esta manera recargo tengo mi campo de configuración aquí nos queda un poquito feo esto así aprovechamos para ponerle un salto de línea por delante o mejor un P el piso es lo con P esta va a ser nuestra opción de configuración tenemos un celeronismo tenemos ningún valor tenemos que guardarlo ¿Vale? entonces ¿Cómo lo guardamos? pues normalmente lo que hacemos es o llamar bajo demanda a las acciones de guardado o como voy a hacer ya ahora que va a recuperar los dos campos al principio y los va a guardar ¿Vale? si tenemos valor para ellos aquí en mi código PHP yo voy a comprobar si existe el post ¿Vale? esto es código PHP dólar server le digo que el request meto request meto sea igual igual a post es decir, no está cargando la página por primera vez entonces lo que hago es coger el campo que ha llegado ¿Vale? entonces dólar post de WPUSD se lo asignó hola WPP WPP WS ¿Vale? aquí esto tema importante veamos a tener en cuenta si yo esto lo hago así y trabajo con estas variables podría dejar que me metiesen código erróneo en mi aplicación ¿Vale? eso agujero de seguridad yo cuando cree cualquier variable que me venga PHP desde el navegador tengo que hacerle un sanitizado ¿Sabemos lo que es eso? quitarle el código que nos puede destrozar principalmente la base de datos es lo que más nos interesa ¿Vale? si luego rompen la página pues mejor si conseguimos evitarla entonces ¿Cómo lo hacemos? por lo que hacemos es ponerle aquí un sanitize que text fill es un campo de text por aquí abajo tiene que estar text fill ¿Vale? y ya tenemos sanitizado el balón del cabo de esta manera os aseguramos que en nuestra aplicación no tiene ningún error y también que si alguna vez queremos publicarlo en el directorio público de WordPress no va a venirnos el equipo de plugins y nos va a tirar atrás el plugin por una tontería ¿Vale? con esto hemos recuperado los campos aquí vamos a obtener de las opciones y aquí la vamos a guardar ¿Vale? entonces tenemos una instrucción una función que es Update Option Update Option y aquí decimos el nombre de la opción importantísimo nuevamente nuestro prefijo WPP USB y le decimos el valor $WPP USB ¿Vale? importantísimo el prefijo porque esto está todo junto ¿Vale? esto es una tabla que tiene un campo que se llama clave y en ese campo va a poner este valor por lo tanto si hay alguien más que está utilizando nuestro mismo prefijo nos están más sacando ese principal problema que tienen las webs con muchos plugins que al final se acaban utilizando refijos iguales con valores iguales con estas dos instrucciones lo estamos guardando en esa tabla ¿Vale? ¿Vale? no lo voy a enseñar porque tenemos la base de datos lo que se vamos a hacer aquí es recuperar ¿Vale? cuando luego queremos si no viene por métodopos entonces por método guide tengo que visualizar la información voy a recuperar estos dos variables para utilizarlas más abajo ¿Vale? y aquí le digo en lugar de un update option aquí le toca decir un get option ¿Vale? primer parámetro es igual el nombre del campo $WPP USB con mi prefil con el valor y aquí tenemos una opción de que tengo un valor por defecto si no me indican nada que valor quiero que tenga pues yo decir que quiero que sea 0.00 por defecto ¿Vale? voy a importar aquí para ir un poquito más rápido con las partes sencillas y aquí solamente le cambio el GBP ¿Vale? GBP o puedo decirle que quiero que sea igual tiene más sentido que yo que el cambio entre las monedas es un para que me siga entendiendo el importe con el valor ¿Vale? aquí ¿Qué es lo que tenemos que hacer en esta parte? entonces yo aquí le puedo poner esto que no gusta al equipo al equipo de plugins porque le arrores ¿Vale? o lo que si me gusta es que yo aquí empiece el PHP y hago un echo de esto de aquí lo punto y aquí le pongo el nombre de la variable $WPP USB USB y aquí le pongo el nombre de la variable $WPP USB ¿Vale? y cierro el PHP como esto es muy parecido lo que necesito lo llevo aquí abajo GBP y GBP ¿Vale? vamos a verlo en acción recargo nuevamente para que me pone ya 1.0 ¿Por qué? porque no tengo a guardar la opción de configuración entonces no tiene ningún valor ¿Vale? ¿Vale? no lo estoy mirando por favor viene para aquí no tiene ningún valor me cogeré por defecto no sé cuánto está lo americano voy a ponerle 1.05 y 1.50 para alguien para que sea algo más o menos visualizado le digo a guardar y aquí me pone el valor cambiado y si recargo ya está guardado con ese valor ¿Vale? de esta manera tan sencilla estoy guardando mi configuración de las distintas modernas ¿Vale? tan sencilla con arte y option para guardar upgrade es guardar no hay un insert hay un upgrade que incluye tanto la nueva creación como la modificación del actual y un get que lo que hace es recuperar el valor ¿Vale? y el valor por defecto es muy importante pues hasta aquí la configuración de nuestro plugin sencillito ¿Vale? ahora nos vamos a ir a la siguiente parte ¿Cómo se interactuar? vamos a hacer que nuestra página esta que tenemos aquí nos enseñe el valor en otras modernas ¿Vale? podemos hacerlo de dos formas en el servidor con PHP vamos a hacerlo en el cliente con Javascript ¿Vale? lo que nos guste más yo en este caso lo que os propongo para ver un componente más que son los assets es utilizar Javascript ¿Vale? de tal manera que yo a este texto deber en otras monedas voy a poder pinchar en él me va a desplegar esto que va a ser un div un párrafo según lo que tenga va a ser un elemento que va a estar oculto visualizable y me convierte el importe que tenga en este otro div ahora creemos un poquito el código Javascript ¿Os parece? y así podemos ver utilizarlo siempre simplemente insertando un shortcode entonces nos vamos a crear una nueva carpeta esta admin ya hemos terminado la congreda una carpeta que va a ser los assets la nomenclatura que utilizo igual es un poco excesiva y el nivel de profundidad de carpetas también pero eso está pensado para hacer un pla bien más gran pues supongo las carpetas que luego clarinamos lo digo porque aquí en assets no tenemos imagen no tenemos CSS solamente vamos a tener una carpeta dentro no me sale la opción de crear que he creado aquí con assets un fichero que va a tener una carpeta un new folder y aquí entro que es un único fichero pero dentro de una carpeta que es jks los assets de javascript new file y le voy a llamar con mi aplicación app.t.tof.js en estas carpetas no hace falta mantener ningún prefijo y ninguna nomenclatura porque ya está colgando todo el conversor utilizando las llamadas de la forma que tenemos pues por aquí te encuentro antes que tenemos aquí indicada con el vtp conversor path el vtp conversor url y estamos defendiendo claramente que nos encontramos desde esta carpeta en adelante este index y este index van fuera y al igual que antes lo primero que hago es irme a la carpeta copio y pego un fichero index que esté vacío para evitar que se carguen mi base de datos y mi guarnas ¿qué voy a hacer aquí? voy a crear dos funciones un show y mi prefijo nuevamente por si hay conflictos wpp show y un show wpp hi ¿vale? ¿qué va a hacer cada una de ellas? es bastante evidente ¿no? mostrar la parte de abajo o esconderla en esta esconderla simplemente lo que vamos a hacer es ponerle un valor a nulo, a vacío lo que vamos a llamarlo y esconderla capa y aquí lo que haremos es componer los valores para que cuando cambie el valor en el servidor nos afecte y simplemente yo con un shortcode se encargue en el navegador y en el servidor de hacerme toda la conversión si tengo muchas monedas o por si más adelante quiero hacerlo en tiempo real que es la evolución para así decirlo de este plan ¿vale? entonces de momento dejo este js aquí luego lo completaremos ¿dónde me vuelvo? pues me voy a ir a tener la posibilidad de insertar en la página código javascript porque si no por mucho cargarlo de aquí código no lo puedo cargar yo lo voy a hacer de una manera que es de las más habituales es a través de un shortcode que yo pondré aquí aquí en conversor ¿sabemos lo que es un shortcode? esas cosas que empiezan por porchetes que están entre porchetes que nos ponen un nombrecito y nos dan una funcionalidad ¿vale? yo aquí voy a crear una función vamos a ponerle el comentario por delante para que luego nos quede claro añadir shortcode creo una función con nuevamente mi prefijo vwp y le llamo shortcode no es obligatorio que sea así ¿vale? función de shortcode pero si ya está bien utilizado incluso este func cuando solamente tengo una no tiene mucho sentido lo que utilizamos para diferenciarlo aquí por si puedo admitir atributos le ponemos un parámetro que es atds de atributos y aquí va el código de mi shortcode pero mi shortcode no sirve para nada si no lo he añadido en algún momento así que utilizo the hook atd shortcode aquí le digo el tag que es el nombre con el que se va a llamar mi shortcode dentro de mi aplicación WordPress y aquí cambiamos los guiones bajos por guiones medios vwp conversor ¿vale? y este conversor va a llamar a una función que es esto de aquí arriba pues con esto ya tengo publicado mi shortcode que no hace nada pero que ya está ¿vale? entonces ¿qué voy a hacer ya aquí? lo que voy a hacer es por un lado poner los valores de las monedas ¿vale? simplemente los de las monedas como javascript y cargar un js estático el atd.js y voy a poner aquí al lado cargar el js dinámico anterior ¿vale? y esto como comentarios vamos por la parte fácil nos sabemos un poquito de javascript y que esto se complica cuando tenemos cartelos de PHP javascript es mi variable y aquí voy a crear mi código javascript ¿qué voy a hacer? ¿qué voy a hacerle? lo primero esto para que lo interpreten el cliente tengo que ponerle un nombre a este elemento ¿vale? un id o una clase como de forma nativa las versiones recientes nos admiten sin ningún problema que indiquemos una clase pues normalmente usamos esa clase pero por si acaso queremos ponerle cualquier otro valor va a ser un atributo ¿vale? yo voy a pedirle a quien incorpore mi shortcode que me dé un atributo que va a ser el nombre entre el dip o el p o del spam o de lo que sea donde obtengo yo el valor que tengo que convertir ¿vale? entonces yo defino aquí un dólar le puedo llamar de cualquier forma origen y aquí por defecto le pongo un nombre que yo voy a llamar pues wp origen bien sin izquierda origen ¿vale? y un destino que es la parte de abajo que estará aquí donde voy a poner las monedas le voy a escuchar dolar destino igual wp destino y aquí defino atributos como un array que pueden venir o pueden no venir entonces si está establecido dentro de los atributos que quiero mirar si está establecido un atributo que sea el origen ¿vale? entonces dolar por origen es igual a esto de aquí ¿vale? lo mismo para destino esto nos va a permitir que nuestro código sea totalmente flexible lo puedo utilizar en cualquier sitio destino destino ¿sí? aquí defino las cabas y aquí qué voy a decirle pues este origen y este destino se lo voy a pasar a un código javascript defino una variable let y aquí le voy a llamar wp origen esto es javascript igual como tengo las comillas dobles le puedo poner el nombre de la variable directamente origen origen origen let pp destino igual dolar este ¿vale? con esto tendríamos los dos componentes con los que vamos a trabajar y además le voy a poner los valores para la conversión código javascript esto es php punto igual para concatenar strings aquí le voy a poner un punto y como para que no me falla ahora me voy a crear otras variables que van a ser los importes de las monedas ¿vale? let wp pp usd igual aquí 5 millas porque lo espero con puntos let wp usd gvp igual y lo mismo ¿vale? ¿de dónde obtengo eso? pues no voy a poderme a pensar lo tenía aquí definido que es el getOption lo copio tal cual lo que le cuesta getOption y aquí que sea gvp ¿vale? en este caso como es un getOption o lo complico más o directamente le pongo que me concaten y evito perlares ¿vale? perdona David en el segundo if sería la variable destino o es correcto que es origen en el segundo if pone destino aquí, perdón, sí la variable bien visto, si no me ha sido dar un error tenemos algo a encontrar si es destino ha sido el copiapera que se me ha olvidado ¿vale? pues ¿qué tenemos? que tengo un código javascript que tiene la declaración de cuatro variables que voy a utilizar luego para rellenar lo que es cada uno de los dos capas por un lado el nombre del elemento origen por el nombre del elemento destino y la conversión de dos monedas aquí no es gvp sino que es usd y aquí es gvp con el borde este es mi código javascript dinámico ¿vale? no cargamos un código javascript desde un plugin o desde un tema o desde cualquier elemento tenemos que decirle primero que queremos encolar javascript gvp en keyword no me reconoce el código que he dejado algo mal por aquí de comillas si no me lo reconoces que he dejado algo mal punto y coma de a no, no sí eso, sí, sí aquí he faltado un punto y coma este punto y coma es de javascript y esto te peche lo sigue faltando algo este me lo pone en negro ah, mira aquí puso una doble coma y además ese que más por esta parte gvp ahora yo reconoce en keyword en keyword encolar ¿vale? y en este caso le digo y quiero encolar un script script tengo que ponerle un nombre entonces lo que hago es ponerle un nombre relacionado con mi prefijo gvp codersaw y justo a continuación ya sí puedo encolar javascript que sea dinámico con gvp hd inline script ¿vale? primer parámetro que se me quite esto que le he puesto aquí arriba respecto a qué marcador de script quiero encolarlo porque yo puedo ponerle un sitio en otro ¿vale? puedo tener un marcador de cabecero de script que esté al principio de mi body y desde mi plugin meterlo en esa cola ¿vale? y aquí quiero que simplemente donde esté que me incluya y aquí le pongo este código .s que es el que quiero que me cae una variable de javascript ¿vale? y aquí el estático aquí no me hace falta poner que quiero hacer una marca directamente se lo puedo insertar siempre aquí ¿vale? quiero decirle y quiero registrarlo register script ¿vale? y le digo un manejador ¿cómo se va a llamar? mi code ¿vale? y y vwp ¿vale? aquí abajo aquí en medio conversor script ¿vale? el mismo que tenemos aquí y ahora colocaremos este por delante porque si no nos va a dar problemas de combatibilidad este va a venir primero aquí siempre que tengamos estático y dinámico ponemos primero el estático y a continuación va a encolar el dinámico contra el ¿vale? más parámetros el código fuente yo tengo definida una constante aquí arriba ¿vale? que es la url como es javascript cojo la que me indica que es url no contiene varro el final es lo que tengo que tener en cuenta así que desde aquí le pongo lo primero una barrita y a continuación le indico toda la ruta para llegar desde conversor anifixen.js que es assets varran vs varra rp.js ¿vale? y de esta manera ya tengo todo lo que es mi shortcode operativo aquí tengo que ponerlo algo más ¿vale? todo shortcode tiene hay que devolver código htm siempre lo tanto si no devolve nada me va a dar un problema poner ahí un código basura un 0 entonces le pongo un retorno con villas colines y con esto pues ya debería llegar todo al lado ¿vale? entonces yo me voy a quedar con este trocito con este trocito con este trocito de código de aquí ¿vale? porque voy a poner shortcode en funcional vengo aquí que es la página del diseño páginas mi página de ejemplo no, es strange editar y aquí ¿qué hago? en algún punto no tipo que sea principio o no al final le digo el que insertar un shortcode le coloco los corchetes y el converso ¿qué le tengo que indicar aquí? lo tengo que indicar los dos partidos que le he puesto orifem igual a lo que sea y destino igual a lo que sea ¿vale? lo que sea ¿vale? me vengo aquí al orifem en avanzado tengo la opción de ponerle un nombre de clase si no quiere entrar a ponerle html le pongo un nombre de clase la clase no tiene porque existir ¿vale? no va a dar ningún problema así que wpp orifem y esto de aquí se lo paso aquí como clase ¿vale? lo mismo con la conversión de otras monedas en avanzado le pongo aquí wpp destino punto wpp destino esto es mi shortcode actualizamos si si hubiese habido algo que está muy mal aquí me daría un error me mostraría un mensaje que haría un error de algún tipo y aquí os recargo no sé como estéis acostumbrados a utilizar el inspector si yo pincho por aquí por algún punto puedes ver el id de uno el id del otro y aquí más abajo así lo encontramos si lo ves me lo decís algo que ponga nuestro código javascript que sea incrustado no lo veo vale, aquí está aquí tenemos nuestro código de javascript incrustado ¿vale? assets.js con double bar me he pasado poniendo una barra de más con aversión llegando por ninguna sexta y después, ¿vale? y aquí tenemos un script que es el que nosotros hemos puesto como inline voy a cambiar la corrección para quitar esta barra de más y atendríamos todas las variables para trabajarte así desde el navegador ¿vale? desde mi javascript es esto lo que le pongo de más la URL se acaba en bar ya solamente me queda capturar el código aquí y hacerlo operativo ¿qué tenemos que hacer en el show? tengo definidas las cuatro variables que necesito, ¿vale? pues para hacerle un poquito más sencillo lo que hago es como comentario así me lo molisto me las llevo aquí tengo que capturar el div de origen tengo que capturar el div de destino y tengo que ponerle el valor que le corresponde ¿vale? entonces, de principio ¿cómo capturó los div? ¿cómo os capturo? vale, pues no lo voy a hacer ¿vale? voy a hacer directamente la conversión al valor ¿vale? let número para que no recupere lo que hay en el contenido y aquí le digo que quiero que le haga de jquery jquery muchas veces la había visto que podemos dolar lo que sea ¿vale? en el caso de WordPress no podemos utilizar dolar por defecto porque todo está reservado para otro tipo de component que son propios de WordPress entonces le ponemos el prefijo de jquery que este también nos funciona con jquery que va a ser el que siempre nos funcione dentro de WordPress ¿vale? aquí le cogemos este elemento ¿vale? como aquí ya va con el selector correcto solamente le pongo que quiero que sea wpp, origen y recupero su html el contenido aquí tengo el número con el símbolo del euro ¿qué tal andamos de expresión regulares? entonces directamente por la pongo ya igual número vamos a aplicar una expresión regula que lo que nos va a decir es inicio o fin al final le colocamos la g y le decimos que no queremos que lo sustituya por la vamos a reemplazar elimina ¿vale? una serie de caracteres aquí le decimos que queremos que sea un conjunto de varias opciones ¿vale? barra de estamos diciendo y la con esto es que la mantenga la de y la coma y todo lo demás me lo quita ¿vale? tenga punto bueno, perdón los puntos no tenga el símbolo del euro tengo más tengo menos tengo cualquier cantidad simple entero a querer que me quede el número y el separador decimal que va a ser en mi caso determinado que es un punto y no al revés esto va al revés porque estos son americanos entonces dicen el separador decimal me lo pones es como la coma el separador entero es como un punto ahora lo vemos no lo va a afectar pero no tengo decimales pero bueno, lo ponemos ¿qué más vamos a ponerle aquí? ya tenemos la cantidad ahora lo que tengo que hacer es un texto led texto igual con villas y comillas o directamente le pongo usd ¿vale? para que lo ponga en dólares aquí le concateno ya estamos en javascript como script le pongo un valor para que identifique como como importe ¿vale? y ¿qué es lo que vamos a ponerle? pues esta cantidad multiplicado por este de aquí o ese ¿vale? más un salto de línea multiplicamos esto vp vp ¿vale? y este ya me sobra aquí texto es uno más igual y ya no es un led ¿vale? ahora tendríamos las dos monedas con el salto de línea y lo último que nos queda es decirle a fp del destino que vamos a decir que el destino nos pongo html que es texto y que el destino nos haga un show ¿vale? si le quiero que nos pone algún retardo pues ahí le ponemos la cantidad ¿qué vamos a hacer en el hype? pues directamente esto así la vamos a esconder y con esto lo mostramos y con esto lo escondemos entonces estamos partiendo de la base que inicialmente estaba escondido se lo podemos poner aquí un display hidden un display no mejor creo que no va a funcionar correctamente nos doyemos la página aquí aquí en principio tenemos que crear la clase y ponerle que por defecto esté oculta o bien nos pendimos que yo lo hace de aquí para que no dé tiempo a terminar una razonable que me estoy yendo un montón de la hora le voy a poner aquí un style display 2 puntos pues si no me he equivocado ya está todo nuestro código para que podamos visualizarlo recargo lo he dejado mal esto porque no estoy mostrando correctamente lo he guardado aquí y me queda una cosa que ya que lo he visto aquí no me deja ponerselo de esa manera que me gusta tendríamos que crear la clase vamos a dejar lo que se visualice igual y luego hacemos que se empiece a esconder esto lo pongo con un enlace y que toque ponerle me espera un enlace normal y corriente así que le pongo javascript 2 puntos que wpp yo show lo usamos pero tenemos lo hecho que el que no es lo veis y no me lo decís aquí no quiero ya que sea puede que sea porque tienes un espacio destino igual y un espacio abajo en el shortcode solo quitamos ahora pero aquí está porque le he puesto otra cosa distinta conversión con otras monedas esto se que vamos a dejar vacío para que no se quede muy feo y ya tenemos otras monedas es el que le ponemos el enlace le decimos que queremos hacer un wpp y aquí no debería pero por si acaso como es una versión reciente igual tiene algún tipo de complejidad o complicación y no lo hace aquí le puso el enlace no escribimos show y hablo puesto la actualizamos nos vamos a recargar aquí vamos a ver el ver en otras monedas me está en un error de javascript que hemos puesto wpp show no está definido jQuery no está definido nos está dando un error que es un poco extraño que no está definido jQuery y eso va a ser porque nuestro plugin no contiene jQuery así que lo que vamos a utilizar es sin jQuery como capturo el elemento sin jQuery jQuery selector document.query selector no está utilizando gran cosa de jQuery así que lo que no va a funcionar ahora es el html ni el show verdad aquí es inner html igual texto vamos a dejar esto así para que funcione una parte y luego ponemos lo demás recargamos y al ver en otras monedas no me lo he recargado vale, por qué no me lo he recargado porque he cambiado el código de javascript cuando cambio el código javascript si la página no ha cambiado no entiende que haya ningún cal entonces te pido a algún sitio modificar cualquier cosa y decirle que lo actualizo y así ya no voy a recargar si yo poniendo jQuery recargarmos he dejado jQuery vale, pues por eso le estaba poniendo buen punto veréis el vector el inner html o sea, no lleva igual el texto inner html si lo he puesto mal aquí es igual al transformarlo de jQuery lo dejé mal y no sé si he dejado alguno más que esté mal vamos a revisarlo a ver si lo he puesto mal aquí vamos a revisarlo a ver lo que nos pone vale, ahora tenemos todo y en principio ya está vale, y aquí tenemos la conversión que nos está haciendo vale, porque aquí le he puesto dos veces le wewp us vale, le doy veremos otras monedas y ahora ponemos los distintos valores ahora tendremos que ponerle un display non y un display que sea visible ¿Cómo lo haríamos? ¿Cómo lo hacemos? style punto display igual a block un style display que vamos a poner aquí abajo hace mucho que no utilice el coliselecto si lo estoy poniendo mal apretas para decírmelo vale lo tenemos puesto tenéis que ponerle aquí un elemento de ocultar texto texto texto igual a href recuperamos este salto de línea para que el papel está ahí href 9 apretas los puntos ponemos el pp style ocultar sé que no es obligatorio pero como hacemos mucho php y os lo pongo y aquí ya lo tenemos nuestro compresor de monedas vale hemos visto cómo hacerlo de forma estática vale, que de los cambios de monedas sean con nuevos valores que carguemos en el servidor y hasta aquí va a ser por hoy vale, es un plan insencillo nuestro primer plan de conversión de monedas voy a dejar este código aquí y dentro de un par de meses si queréis lo ampliamos para que en tiempo real vaya al banco central europeo me traiga la conversión de las monedas y me pinta aquí una conversión de monedas os parece