Cómo crear herramientas de IA con WordPress

1. Conferencia 1: Todos, este es mi sitio web Wordpress. Puedes ver aquí, construí muchas herramientas eléctricas de IA directamente en Wordpress. En este curso, escogí la herramienta generadora AI Who. Te mostraré paso a paso cómo construir esta herramienta en Wordpress. Por ejemplo, puedes decir aquí consejos de marketing digital para el tema. Puedes establecer un tipo de contenido, digamos para una introducción de video y hacer clic en Generar. Y ahora esta increíble herramienta, impulsada por IA, generará estos increíbles resultados. Puedes copiar una por una, copiar todas estas funcionalidades directamente en Wordpress. Esto te ayudará a entender la estructura detrás de esta herramienta para que puedas construir tal vez cualquier herramienta que quieras más tarde como lo hice en mi sitio web. No sólo eso, te voy a mostrar también cómo monetizar estas herramientas con el sistema de puntos para que puedas vender puntos y puedas convertir tu Wordpress en As Business Si estás listo, comencemos. 2. Conferencia 2: Bien, amigos. Entonces, paso uno, necesitas un sitio web Wordpress. Es obvio porque este curso se trata de construir la herramienta generadora de ganchos AI en Wordpress. En mi caso, tengo este sitio web sencillo, nuevo, limpio. Es un nuevo sitio web que creé para estas puntuaciones. Si no tienes un sitio web, simplemente puedes obtener uno en Ten Web, uno de los mejores servicios de alojamiento web, tal vez Kinsa, tal vez alojar stinger lo que quieras O incluso si quieres dar seguimiento sin conseguir un plan de hosting, puedes instalar Wordpress localmente con Dive. Kinsta es una herramienta gratuita para instalaciones locales de Wordpress. Para que puedas descargar Vekinsta instala Wordpress localmente en tu computadora para darle seguimiento y aprender con nosotros En mi caso, estoy usando mi propio servidor web. Utilizo esto con fines educativos para crear sitios fácilmente. A lo mejor te voy a mostrar esto en otro curso de todos modos. Entonces, paso uno, necesitas un sitio web de Word press. Entonces vamos a iniciar sesión en el tablero. Ingresaré mis credenciales, luego simplemente voy a Plug Ins aquí y da clic en un U Plug In para construir herramientas, principalmente necesitamos un enchufe. Se llama el código WP snippet plug in. Esto nos ayudará a personalizar nuestras herramientas con códigos personalizados. Esto lo verás más adelante en el curso. Instalar y activar. Eso es. Ya tenemos nuestro sitio web de prensa con código WP versión gratuita instalada. Estamos listos para comenzar a construir nuestra herramienta. 3. Conferencia 3: Bien, amigos. Entonces esta es nuestra estructura básica de herramientas. Si entiendes esto, tal vez puedas construir cualquier herramienta que quieras, Una herramienta eléctrica de IA. Primero, tenemos nuestro front end, donde el usuario ingresará un tema y dará clic en Generar. Cuando el usuario haga clic en Generar, la solicitud irá a nuestro back end de Wordpress, nuestro dashboard. Déjame mostrarte esto, esta es la parte delantera. Entraremos en un tema, seleccionaremos un tipo de contenido, por lo que esta es la entrada del usuario y luego el usuario hace clic en Generar. Hacemos clic en Generar. Esta solicitud irá a nuestra parte posterior a nuestro panel de Wordpress. Esta es la parte de atrás, más precisamente a los fragmentos de código enchufar aquí Agregaremos un fragmento y conectaremos el front-end con este fragmento Nuevamente, damos El pedido fue a la parte de atrás a nuestros fragmentos. Ahora los fragmentos, nuestra palabra presionó hacia atrás. Nos conectaremos con la IA abierta para generar el contenido o los resultados con inteligencia artificial. Con IA, recuperaremos los resultados. Y luego fueron presionados hacia atrás y los pasaremos al frente. Y nuevamente, volviendo aquí, obtenemos los resultados de la Y abierta a los fragmentos de código WP Y este fragmento los pasará nuevamente a nuestro frente y se los mostraremos al usuario en este increíble estilo Entonces, una última vez, tenemos la UI, la interfaz, el front-end, el usuario ingresa la entrada. Hacemos clic en Generar. La solicitud irá a nuestro back end a fragmentos de código. Entonces los fragmentos de código se conectarán con API I abierta para generar el contenido. Volveremos el contenido y mostraremos al usuario en el front-end. De nuevo, espero que se te haya ocurrido la idea. No lo olvides. Cada vez que sientes que algo no está claro, necesitas más detalles. Estoy aquí para ayudarte. Simplemente publique sus preguntas. Estaré aquí casi todos los días para ayudarte a responder cualquier duda que tengas. No sigas adelante. Si encuentras algo poco claro, solo detente, pregúntame, aclara las cosas, luego continúa. 4. Conferencia 4: Bien amigos, en este video juguemos con IA y carguemos mascota. Creo que ya conoces a ChagPT. Normalmente cuando quieres generar algo con ChargPT, simplemente dices Por ejemplo, tres ganchos para mi video sobre marketing, algo así. Es un prompt básico muy sencillo que no me gusta. Verás por qué ahora Chip dirá, bien, estaría encantado de ayudar y empezar a generar y así sucesivamente. Eso está bien. Si eres principiante puedes hacerlo. Pero estamos aquí para aprender algo más allá de los principiantes. Vamos a abrir otro chat. Veamos, Otro prompt básico. Todavía estamos de nivel principiante aquí, pero un poco, elevé el prompt. Decimos él, como redactor experto especializado en generación de ganchos, tu tarea es generar tres ganchos para el siguiente tema Y puedes pasar un tema aquí entre paréntesis luego para usarlo en algo así como un video corto La salida que estamos definiendo, la salida debe ser solo la lista de ganchos con su tipo. Después agregamos la columna de la lista de ganchos y luego hacemos clic en arena y no se puede ver ninguna diferencia. Chagipeti generará directamente los ganchos, la lista y te dirá el gancho de preguntas, el tipo de gancho, y el gancho de ejemplo y así sucesivamente Entonces creo que esto es mejor si estás construyendo una herramienta, solo quieres la salida. Entonces el truco aquí es usar esto en tu prompt. No sé si estás en mi página web y revisaste mi curso de ingeniería rápida o tal vez viste mi curso gratuito en mi canal de Youtube. Es uno de los mejores cursos ingeniería rápida en Youtube. Casi 1 millón de visitas ahora, con casi 35.000 likes Aquí no estoy presumiendo, pero realmente trabajé duro en este curso gratuito en Youtube Y puedes consultar los comentarios a continuación para ver las reseñas de este curso gratuito. Ya puedes ir y comprobarlo de todos modos, volviendo a Cha GPT Entonces este es el prompt básico que puedes usar para generar hooks. Como mencioné, todavía estamos en un nivel básico. Simplemente ajustamos el prompt con algunos consejos de ingeniería rápida, agregando el rol y agregando la salida Y sumando esto al final para generar solo los ganchos directamente. Ahora vamos un poco más allá del nivel principiante y te mostremos de alguna manera un prompt avanzado. Nuevamente, voy a abrir chat. Y aquí está mi nuevo aviso. De alguna manera es grande, ya sabrás por qué. Ahora el prompt es casi el mismo en términos de establecer un rollo. Pero ahora se puede ver que la tarea se define aquí. Tu tarea es analizar los ejemplos de hook proporcionados y luego usar las plantillas top que se ajusten para generar los tres nuevos hooks para el siguiente tema y usarlo en este formulario, salida solo debe ser la lista de hooks con el tipo. Ahora proporciono los ejemplos de gancho. En este aviso, estamos alimentando nuestra herramienta o nuestro prompt con los datos que recopilamos. Esto no se trata simplemente de ganchos genéricos generados por la IA. Estoy pidiendo a la IA que genere en base mis propios ejemplos y plantillas que recopilé y sé que está funcionando. Y luego la lista otra vez para generar solo los hooks se ejecutan. Y ahora la salida se verá igual, pero el contenido es diferente. Es usar mis plantillas. Ahora mis tipos de gancho como la entrada en cuestión, el hecho, el llamado a la acción, y así sucesivamente. Recogerá la mejor plantilla que se ajuste al tema y al caso de uso. De nuevo, volviendo a mi canal en Youtube, no sé si estás siguiendo. Publiqué un video hace un par de meses sobre construcción de PT personalizados de la manera correcta allí. En este video, te mostraré cómo crear PTs personalizados que realmente se vendan y destaquen en la competencia. La forma correcta de construir GPT. Mencioné que una de las mejores formas es construir un GPT basado en tus propios datos Otro ejemplo, si vas a mi sección de herramientas, tenemos el generador de títulos de Youtube. Mucha gente crea estas herramientas. Bloque generador más apretado a generador más apretado. Pero la diferencia aquí, si seleccionamos un tema y hacemos clic en Generar, el prompt que estoy usando detrás de esta herramienta no es ningún prompt. Está construido también sobre mis mejores plantillas que coleccioné. Si vas aquí, déjame mostrarte este aviso como experto, Youtube bla, bla, bla Estoy compartiendo aquí mis exitosas plantillas de títulos de Youtube. Entonces el prompt es usar mis datos que sé que funciona y genera títulos basados en eso. Esta es la importancia de conectar tus herramientas con tus propios datos. Así es como te destacas en la competencia porque cualquiera ahora puede crear un generador de ganchos con IA, o un generador de títulos Utu, o cualquier generador Pero el prompt que creas es diferente. Es por eso que siempre menciono aprender la ingeniería rápida de la manera correcta y comprender la importancia de agregar sus propios datos a la hora de construir herramientas de IA. Entonces este es el prompt que vas a utilizar en nuestra herramienta. Más adelante, hablaremos más sobre un prompt más avanzado que nos permitirá y nos ayudará a construir esta increíble interfaz de usuario. Puedes ver aquí la interfaz de usuario estructurada que tenemos. Otro aviso nos ayudará a hacer esto de todos modos. Por ahora, espero que tengas la idea. Puedes ir con un prompt básico o ir con un prompt avanzado como el mío que se basa en plantillas y datos reales exitosos. Por cierto, todas las indicaciones, todo se adjuntará con las conferencias No te preocupes por copiar o escribir esto. Voy a adjuntar todas las indicaciones y los guiones. Todo lo que usaremos se adjuntará con este curso. 5. Conferencia 5: Bien amigos, en la última conferencia, mostré el prompt que vamos a usar y generamos los ganchos. Pero dentro cha GPT nos dieron los ganchos. Guau, perfecto. Pero ahora, cómo pasar a la prensa de palabras. Queremos generar ganchos dentro de la prensa de palabras. De esto se trata el curso. En esta conferencia, vamos a ir un poco más a fondo. Vamos a crear el back-end. Te acuerdas de fragmentos de código WP, este plug in. Recuerdas la estructura, el back end de Wordpress que conectará con open para generar los ganchos para nosotros. Ahora vamos a montar aquí esta parte. Vamos a conectar el back end con IA abierta para generar los ganchos dentro o enchufar fragmentos de código WP Vamos a crear y usar un fragmento. Seleccionaré Usar código personalizado. Y ahora voy a nombrar este fragmento Basic Open AI Empezaremos el ejemplo básico para entender cómo funcionan las cosas. Seleccione el tipo de código como fragmento PHP y bum, aquí está el No te preocupes, sé que puedes pensar ahora. Bien, no soy desarrollador. No puedo crear estos scripts ni estos fragmentos. No conozco a HP. Tampoco conozco a HP. Nunca escribí una sola línea de código en PHP. Acabo de platicar con el ChagPT y generé esta función y estoy usando y es perfecta. Y si conoces un poco de codificación, puedes entender este guión solo hojearlo Entonces aquí estamos definiendo el tema como una entrada. Y este es nuestro prompt para generar tres hooks para un blog sobre cierto tema. Después ingresamos a la IA abierta, URL, la API de open I. Luego ingresamos a nuestra clave API y construimos la llamada y luego enviamos una llamada a la API para abrir AI. Y aquí estamos leyendo la respuesta y enviándola de vuelta. Eso es. Nuevamente, no te preocupes por los detalles aquí, la función está funcionando perfectamente. Simplemente puedes copiarlo y usarlo en tu sitio web. Este es el ejemplo básico de cómo generar texto con IA. Con IA abierta, active este script. Pero recuerda ingresar tu propia clave API aquí. Si no sabes cómo simplemente abrir, haz clic en la API de registro. Simplemente aquí, vaya a las claves API. Haga clic, cree una nueva clave secreta. Y voy a decir que las herramientas prueban cualquier cosa por mí. Ahora, crea clave secreta, cópiala, vuelve aquí, pega la clave y guarda el fragmento Perfecto. Tenemos la función ahora guardada dentro de fragmentos de código Ahora para asegurarnos de que esta función está funcionando en tu sitio web, queremos probarla antes ir y crear la interfaz y el front-end y así sucesivamente. Queremos asegurarnos de que esto esté funcionando y estamos obteniendo una respuesta de la IA abierta para probarlo. Tenemos muchas herramientas diferentes. Podemos usar una app llamada Postman. Si tienes código visual studio, instalé Thunder Client plug in o extensión. Puedes usarlo para probar o incluso puedes usar herramientas en línea como esta Rock Been. Dejaré los enlaces y todo esto adjunto. La idea es que quieras probar esta llamada API a nuestro sitio web. Esta solicitud o sitio web. Voy a hacer esto ahora tanto en código visual studio en línea para mostrarte diferentes métodos dentro bajo cliente. Aquí seleccionamos post como solicitud, como el tipo de solicitud. Y luego obtienes la URL de tu sitio web así. Pega aquí dices Sp admin, admin Ajax, Php. Esta es la URL que vamos a usar. Después vamos a cuerpo, luego formando código, agregamos el nombre como acción. Es el nombre de la función. Aquí agregamos el parámetro que es el tema en nuestro caso. Déjame mostrarte esto. La acción es este nombre de función. Lo copiamos. Esta es la acción que pegamos aquí. Si miras dentro de la función, tenemos el tema como parámetro. Nosotros solo copiamos este pasado aquí, ya ves que pegamos aquí. Agregamos un valor como el marketing digital, cosa, cualquier entrada que quieras. Si tenemos múltiples parámetros, podemos agregarlos. Veremos esto en un poquito. Tenemos el nombre de la acción, el nombre de la función, y tenemos el tema como parámetro. Haga clic en enviar. Ya puedes ver que obtuvimos una respuesta de la IA abierta en la sección de contenido. Aquí tenemos nuestros ganchos. Ya ves aquí están nuestros ganchos. Lo mismo si quieres probar con esta herramienta online aquí simplemente agregas la URL en el contenido. Seleccionas formulario URL codificado, agregas el tema de acción, da clic en Enviar. Puedes ver aquí abajo tenemos la respuesta esto para asegurarnos de que nuestra función está funcionando perfectamente. Ahora bien, ¿y si queremos que la respuesta contenga sólo los títulos? No necesitamos toda esta información de la IA abierta, como el objeto, el modelo, los tokens, y lo que queramos, los hooks generados, cómo podemos extraer solo este valor aquí. Lo que voy a hacer simplemente es cambiar la respuesta que obtengo de este fragmento Nuevamente, utilicé GP para generar esto. Yo no escribí ninguno de estos códigos. Se puede ver simplemente, estoy aquí navegando por el objeto de datos. Estoy seleccionando opciones, la primera opción, el mensaje y el contenido. Si vuelves aquí, verás que tenemos opciones. Entonces tenemos el primero , ya que es una matriz, luego tenemos el mensaje, luego tenemos el contenido, de la misma manera que accedí al contenido. Y devolver de nuevo la actualización de contenido. Ahora volvamos y probemos el mismo envío de llamada. Verás ahora me sale solo el contenido, los ganchos directamente. Y esto es lo que queremos. Queremos el contenido generado directamente para que podamos acceder y mostrarlo al usuario en la interfaz de usuario más adelante. Volviendo a nuestro fragmento, ve aquí en esta función básica, estamos usando solo el tema como parámetro Solo tenemos una entrada en nuestro prompt, si recuerdas, tenemos dos entradas. Tenemos el tema y tenemos donde lo vamos a usar. Recuerda aquí tenemos dos entradas, el tema y tenemos el tipo de contenido, donde vamos a usar este gancho en un video corto, en una publicación de bloque, y así sucesivamente. Tenemos dos entradas, necesitamos actualizar esto con otra entrada. Simplemente, vamos a cambiar los parámetros y el prompt así. Tenemos otro tema, tenemos el parámetro de uso. Tenemos el nuevo prompt. Si, recuerden volver aquí, tenemos, creo, éste. Sí, este prompt con dos parámetros. Aquí está mi aviso. Tenemos el parámetro de uso, y tenemos el parámetro topic. Puedes agregar 34 entradas, lo que quieras simplemente agregándolas al prompt de esta manera. Ahora si actualizo este script y vuelvo aquí a probar, agregaré ahora el uso. Diré blog, por ejemplo. Haga clic en Enviar y Perfecto, Obtuvimos nuestra respuesta pregunta gancho y el gancho ejemplo, y así sucesivamente. Así es como puedes crear una función dentro o un fragmento dentro de los fragmentos de código WP para conectar tu sitio web Wordpress con pen para conectar tu sitio web Wordpress Para construir cualquier herramienta de IA, es necesario comprender el concepto de parámetros y el prompt. Cambia las entradas, cambia el prompt, y tienes una herramienta de IA, tal vez un generador más ajustado a los bloques, tal vez un escritor de IA Cualquier cosa, solo decide tus entradas, crea tu prompt. Y tienes tu herramienta, la parte posterior de tu herramienta. Ahora es el momento de crear la interfaz de usuario. Hasta ahora, hemos creado el back-end. Generamos los ganchos con IA. Ahora queremos devolver los resultados y crear la interfaz de usuario en Wordpress. 6. Conferencia 6: Bien amigos, ahora es el momento de comenzar con el front-end para construir la interfaz de usuario, la interfaz de usuario. Entonces, para hacerlo sencillo, comenzaremos con la interfaz de usuario básica. Si recuerdas, tenemos dos entradas. El usuario ingresará un tema, seleccionamos el caso de uso, o el uso en un video corto, en un blog, publicación, lo que sea, y luego haga clic en un botón para generar la salida, ganchos y los resultados. Los ganchos aparecerán en una caja. Tenemos principalmente un cuadro de texto para ingresar a un tema, tenemos un cuadro desplegable para seleccionar el caso de uso. Tenemos un botón y tenemos una caja de salida. Vamos a crear esto. Entonces, lo que hice simplemente es que abrí Chagipt y pedí que creara la interfaz de usuario por ¿Ves este aviso? Ya le dije que eres un experto en HTML. Sí, S. Y tu tarea es ayudarme a crear una interfaz de usuario profesional, pero sencilla y limpia para mi herramienta, el generador de ganchos. La herramienta tiene dos entradas principales, Cuadro de texto y Desplegable, y los resultados se mostrarán un texto anterior Entonces le pedí que generara solo el diseño para mí sin ningún otro código, solo código HTML y CSS, el front-end del código de diseño y asegurarme de alinear todos los controles correctamente y agregar el espaciado adecuado entre ellos. Yo uso este prompt y simplemente me generó el código HTML para la herramienta y el estilo CSS. Simplemente lo copié y lo usé directamente. Recuerden, dejaré todos los códigos, todas las indicaciones, todo No te preocupes por nada ahora mismo. Encontrarás todos los códigos adjuntos con el curso. Pero, por favor, haga un seguimiento. Ahora para entender el concepto y cómo construyo la interfaz de usuario, simplemente uso ChargPT Lo que podemos hacer es copiar este código y crear una carpeta U. Esta es una forma básica sencilla. nombraré como sea la interfaz de usuario, por ejemplo, y luego crearé dos archivos de texto. El primero es, por ejemplo, UI. Y reemplazar XT por HTML para cambiar el tipo del archivo. Y el otro, se llama Estilos para estilizar. Simplemente otra vez, vaya a ChAGPT, copie el código HGML y el código CSS y pegue Simplemente escriba un clic y edite con el bloc de notas, por ejemplo, y pegue el código aquí. Entonces simplemente abre este archivo y podrás ver nuestra increíble herramienta generadora de ganchos. Por supuesto, no está funcionando en este momento, pero puedes ver que aquí podemos ingresar un tema. Podemos seleccionar un tipo como bloque, post, video, lo que sea, y hacer clic en Generar para obtener los resultados en este cuadro en caso de que haya algún problema en espaciado o tal vez haya algo mal el diseño. Simplemente puedes chatear con ChagPT y pedir que resolver el problema Por eso siempre te animo y te digo que aprendas al menos codificación básica, CML básico, CSS básico, script Java básico Por si acaso quieres generar herramientas y generar código con ChagPT para entender lo que está Y si quieres preguntar y resolver algo, puedes pedirlo para que entiendas lo que está pasando de todos modos. Entonces esta es nuestra interfaz de usuario. Nuestra interfaz básica ahora está lista. paso dos es conectar esta interfaz, este botón, con nuestro war press back end. Recuerda que creamos esta función aquí que genera los ganchos. Ahora queremos conectar esta interfaz de usuario con nuestro fragmento. Eso es lo que vamos a ver en la próxima conferencia. 7. Conferencia 7: Bien, entonces hasta ahora creamos el back-end y el front end. Ahora es el momento de conectar ambos juntos. En esta conferencia, vamos a trabajar en estas flechas. Vamos a conectar el front end con nuestro back end. Veamos cómo, antes de eso tal vez te estés preguntando que creamos esta interfaz de usuario básica. Pero en la intro te mostré esta interfaz, esta interfaz de usuario profesional No te preocupes, comenzamos con este ejemplo básico y más adelante te mostraré cómo optimizar y crear esta interfaz de usuario. Solo haz un seguimiento conmigo ahora Paso a paso y cubriremos todo. Tenemos este front-end HTML CSS. Necesitamos conectarnos ahora con nuestro fragmento de código aquí cómo usar el script Java volviendo a ChaGipt después de que me generó el front-end, simplemente nuevamente le pido que genere y conecte la interfaz de usuario con Se lo dije, por favor genere el código JS para llamar a mi palabra, presione la función Ajax y muestre los resultados en el área de texto. Asegúrese de agregar una carga mientras la operación está en curso. Y aquí está mi función Ajax. Y pasé la función Ajac completa, la palabra press snippet, para que pueda entender más cómo generar el Nuevamente, generó un guión sencillo. Se puede ver el guión. Lo generó. Acabo de copiar Volviendo a nuestra carpeta ahora aquí, crea un nuevo archivo de texto y lo llamaré script JS sí y simplemente edita con Bloc de notas y pega el código Aquí puedes ver aquí están obteniendo el tema y el tipo de contexto que es el uso en nuestro caso. Se ve definiendo aquí las variables, obteniendo el valor y simplemente llamando a la función básica de generar ganchos al presionar y luego obtener los resultados en el área de resultados. Aquí tenemos que hacer una cosa, cambiar el Lee la URL de tu sitio web. Agregué este comentario aquí, reemplace una URL de Jack. Simplemente regrese a nuestro sitio web, copie esto y péguelo aquí, y guarde. Ahora volvamos a abrir la interfaz de usuario. Ingresa un tema, por ejemplo, anuncios de Facebook, tutorial, cualquier cosa, y seleccionaré aquí una publicación de bloque, por ejemplo, y haré clic en Generar. Vaya, obtuvimos un error no se pudo recuperar. Si ves algo así, lo primero que debes hacer es abrir aquí las herramientas del desarrollador en tu navegador y verificar el error en la consola. Verás me dice que ha sido bloqueado por la política del CRS. A veces esto sucede cuando abres la herramienta en el navegador para solucionarlo. Vuelve a tu fragmento aquí y vamos a agregar un par de líneas para desactivar esta política CORS del navegador Es algo relacionado con la seguridad de origen cruzado. Cuando llamas a tu función desde diferentes dominios, de alguna manera está fuera de alcance por ahora. Pero ahora vamos a arreglarlo. Sólo para continuar con nuestro trabajo, voy a añadir las siguientes líneas simplemente aquí. Se lo digo para permitir todos los orígenes. No bloquee ningún dominio ni ningún otro dominio para que no acceda a esta actualización de función. Y ahora intentemos de nuevo, actualice la herramienta. Anuncios de Facebook para trabajar, y vamos a seleccionar chat, en, generar, y perfecto Puedes ver ahora obtenemos los ganchos en el área de texto de resultado. Perfecto. Seleccionar otra cosa, por ejemplo, el crecimiento de Youtube, cualquier tema, generar. Ahora la herramienta está funcionando perfectamente. Obtenemos 123 ganchos. Perfecto. Ahora conectamos nuestra interfaz de usuario básica a nuestro fragmento de código posterior 8. Conferencia 8: Bien, amigos. Así que hasta ahora, creamos la interfaz de usuario, la parte posterior, y en Wordpress, conectamos la interfaz de usuario con Wordpress. La herramienta está generando los ganchos. Todo es perfecto, pero la herramienta no está en Wordpress. Queremos publicarlo en nuestra página web. Aquí en este sitio web. Entonces hagámoslo ahora mismo. Voy a volver aquí al tablero. Hacia adelante, presione, vaya aquí a Páginas, luego haga clic en una página Ahora, la forma más sencilla y básica es simplemente crear una página como este generador de ganchos por ejemplo. Entonces aquí, agrega tres bloques HTML. El primero es para el código CSS. Sólo tienes que ir aquí al archivo, abrir los estilos. Por ejemplo, aquí con Bloc de notas, solo cópielo y pegue dentro de este bloque Después otro bloque para la herramienta HTML, solo tienes que copiar de nuevo aquí, copiar y pegar. Otro para Javascript, como este abierto y consigue el archivo Javascript, copia, y otra vez, pega aquí. Simplemente ve a publicar la herramienta. Hay una manera muy básica. Abre la página y ya puedes ver que tenemos el generador de who. Pero el diseño está roto. ¿Por qué? Simplemente porque si quieres agregar CSS y Javascript de esta manera, necesitas sumar y cerrar etiquetas. Simplemente agrega aquí estilo como este. Ábrelo y luego copiarlo. Y baja y cierra la etiqueta de estilo. Ahora para entender el estilo, lo mismo para Javascript, diremos aquí script y bajamos y pegaremos aquí. Y ciérrala. Ahora, actualice. Veamos ahora la magia, qué va a pasar, Refrescar y perfecto. Ya puedes ver todo el generador. Pero hay un problema en el diseño. Por lo general, verás conflictos con un tema o algo así. Para solucionar esto, volvamos a nuestro panel de Wordpress y hagamos clic en Temas de Apariencia. Vamos a instalar otro tema. Por ejemplo, agregando. Seleccionemos, por ejemplo, Hello Elementor Activate Entonces golpeemos esto ahora, actualicemos, y ya puedes ver que la herramienta aparece aquí. El diseño sigue siendo malo. Voy a arreglar esto ahora mismo. Pero vamos a comprobar si la herramienta está funcionando de nuevo. Entraré en un tema, seleccionaré algo, generaré y perfeccionaré. La herramienta está trabajando en nuestro sitio web Wordpress. Perfecto. Ahora el mejor enfoque, o lo que prefiero hacer, es instalar un plug in llamado Elementor Elementor es un diseñador de páginas web. Nos ayudará a diseñar las páginas web y crear de alguna manera diseños profesionales como los de mi sitio web. Al igual que si vas aquí en mi página web, puedes ver aquí la herramienta, los botones para compartir, estas áreas rígidas y así sucesivamente. Y el menú y el elemento footer te ayudarán a hacer esto. Si trabajas en Wordpress, creo que conoces elemento. Es uno de los creadores de páginas web más populares para Wordpress con 5 millones de instalaciones. Lo instalé. Ahora ve aquí a Páginas de nuevo o a la misma página con la que trabajamos. ¿Dónde están las páginas de la página? Todas las paginas lo generan. Ahora da clic en Editar con Elementor. Voy a eliminar todos estos códigos. Ahora, elimine la actualización y haga clic en Editar con Elementor. Esta es nuestra página, muy sencilla. Voy a añadir aquí un contenedor. Este es el contenedor. Iré y agregaré un bloque HTML, un bloque como este. Entonces otra vez, voy a copiar los códigos, comenzando por el control de edición de estilo. Vuelve a ir aquí, no lo olvides, agregaremos estilo. Entonces vamos a agregar el código HTML. Y el código Javascript aquí es el código script. Vamos a copiar el código del script. Control de script C control, tenemos el código HTML. Simplemente copie y pegue en el medio. Y puedes quitar la sección de cabeza. Solo mantén el código principal de la herramienta. Y lo verás ahora mismo, directamente en el constructor. Se puede ver que está un poco pegada a la cima. Como arreglar esto, por ejemplo, puedes entrar en el Navegador y dar click en el contenedor. Después sección de baile, tenemos el margen superior. Podemos agregar, por ejemplo, 100. Y se puede ver, ahora ya no se pega la herramienta. De todos modos, la idea es que puedas construir tus propias páginas, seleccionar el tema apropiado y pegar el código HTML de la herramienta dentro de tu página. Es así de simple. Vamos a previsualizar los cambios como el generador de cerdo. De nuevo, puedes ocultar el título si quieres, u ocultarlo de la herramienta así. Simplemente seleccione el código HTML aquí. Verás en el HCML tenemos el generador ho H una etiqueta Puede eliminar esta actualización. Ahora, vamos a tener en la herramienta como lo hago aquí, se puede ver que este título es con elementor, este subtítulo es con La herramienta de código está aquí. No tengo ningún título dentro de la herramienta. Simplemente pego el código principal dentro de esta área. Volvamos aquí. Vamos a probarlo, agregar, generar, Y está funcionando perfectamente. Muy bonito. Ahora tenemos nuestra herramienta dentro de nuestro sitio web Wordpress. De nuevo, si te enfrentas a algún problema, estoy aquí para ayudarte. En cualquier momento también puedes chatear con ChaChipt. Si te enfrentas a algún problema de diseño, estilo o algo así, puede arreglarlo por ti. 9. Conferencia 9: Bien amigos, en esta conferencia queremos pasar de este diseño básico a esta interfaz de usuario limpia profesional. Esta conferencia es muy importante si entiendes el concepto detrás de esta conferencia. Puedes construir casi cualquier herramienta que quieras. Volvamos aquí a la interfaz de usuario básica. Si miras los resultados, la respuesta, es texto puro. El principal problema aquí, por favor, enfoque, es que tenemos el resultado ya este texto se puede mostrar en un área de texto como esta de aquí. Pero es súper difícil convertir este texto en este diseño de incendio provocado, este análisis de datos de diseño organizado Nosotros decimos basura adentro, basura fuera. Si tienes datos malos, tendrás malos resultados. Si queremos aplicar este concepto en nuestro caso, si tenemos esta mala respuesta, que es texto simple, es súper difícil tener este diseño organizado. Para tener este diseño organizado y estructurado, queremos salida estructurada, respuesta estructurada. Entonces, cómo podemos hacer eso, cómo podemos recuperar y obtener respuestas estructuradas para construir cualquier UI que queramos. Ahí es donde viene otra vez. El poder de la ingeniería rápida y la elaboración de la mejor pronta Volvamos aquí a char GPT y abrir y U chat. Recuerda nuestro prompt avanzado en esta conferencia. Vamos a aplicarlo. Vamos a usarlo. Estamos generando ganchos basados en datos, recuerden. Y usamos este hack rápido para generar directamente la lista de prompts. ¿Ves la lista de indicaciones? Ahora queremos obtener respuesta estructurada. Queremos obtener una respuesta organizada a la que podamos acceder fácilmente para construir cualquier UI que queramos. Aquí viene nuestro prompt súper avanzado. Abrimos de nuevo un nuevo chat. Y echemos un vistazo a este nuevo prompt. Nuevamente, estamos generando ganchos basados en el ejemplo de hooks proporcionado y nuestros datos. Pero mira ahora qué cambió. La salida debe ser sólo un Jason válido de la siguiente manera. Y le di al prompt un ejemplo de cómo quiero que la respuesta se vea como el tipo de gancho y el gancho adyacente respuesta estructurada. Si no sabes qué es Jason, es simplemente una representación estructurada de datos. En lugar de tener texto ficticio, tenemos esta respuesta estructurada Y al final, dije que Jason se opone. Entonces solo podemos obtener la respuesta de Jason directamente. Echemos un vistazo a los resultados ahora. Ya puedes ver la respuesta es Jason y tenemos tres ganchos organizados para que podamos acceder a cada uno solo y podamos acceder fácilmente para construir UI basados en esto Hablé de esto con más detalles. En dos publicaciones de bloque y esta las cadenas de funciones y esta cómo crear herramientas I rápido y compartí mis scripts aquí. Te enlazaré a estas publicaciones de bloque si quieres saber más. Pero nuevamente, lo que tienes que entender si quieres construir interfaces de UI organizadas, necesitas obtener respuesta estructurada a partir del modelo de IA del modelo de lenguaje de GPT en nuestro caso, o API abierta en nuestro Entonces tenemos esta salida ahora, podemos usarla para construir nuestra interfaz de usuario. Espero que vuelvas a tener la idea, si tienes alguna duda sientes que algo no está claro, estoy aquí para ayudarte. Entonces vamos a actualizar nuestra función ahora con este prompt. Lo copiaré y volveré a nuestro fragmento aquí. Y ahora vamos a sustituir nuestro prompt. Usted ve aquí el prompt otra vez pegar. Pero ahora tenemos un pequeño problema. Por lo general, las cadenas en cualquier lenguaje de sondeo o el texto se pone entre dos códigos dobles Ya que tenemos aquí códigos dobles dentro nuestro código o dentro de nuestro prompt, necesitamos escapar de estos códigos dobles. Solo necesitamos agregar una barra inversa como esa para poder escapar de estos personajes Solo agrégalos uno por uno. No olvides volver a cambiar las entradas. Voy a eliminar el marketing digital. Aquí estoy haciendo esto, muchos necesitarán mostrarte cómo en caso de que quieras ponerte a prueba. Agrega dos puntos y agregas la variable dentro. Nuevamente, para los códigos dobles de edad. Y eso es todo. Creo que el aviso ahora está listo. Nosotros lo añadimos. Todavía tenemos uno aquí. Éste de aquí. Bien, perfecto. Vamos a probarlo ahora. Voy a guardar actualización, recortarlo actualizado Vayamos ahora a nuestra herramienta. Nuevamente, me refresco aquí. Ingresa un tema, anuncios de Google, por ejemplo. Cualquier cosa que genere y sea perfecto. Ya puedes ver que tenemos la salida estructurada de Jason, perfecta. Ahora tenemos esta salida de Jason. Podemos construir la interfaz de usuario en base a eso. Espero que hayas entendido la idea y entendiste lo que hicimos aquí. De nuevo, te recuerdo, te animo a que aprendas, ingeniería rápida, cómo elaborar indicaciones así Que esto te ayudará no sólo en la construcción de herramientas, sino en sacar el máximo provecho de los modelos de lenguaje. Si no puedes invertir en cursos premium, puedes consultar mi curso gratuito en Youtube. Mantendré enlaces a todos estos recursos y los adjuntaré con estas conferencias. En fin, así que ahora obtuvimos la respuesta estructurada. Ahora es el momento de usar esta respuesta para construir esta interfaz de usuario, esta interfaz de usuario. Ahora bien, ya que este no es un curso de HTML y CSS y Javascript, y está fuera de alcance enseñarte esto ahora mismo, lo que hice es crear la UI, la plantilla base para ti y compartiré contigo en este curso. Podemos usarlo y si quieres retocar, cambiar algo, pídele a GPT que cambie algo por Depende de ti. Te lo voy a dar gratis. Puede usarlo directamente en su sitio web. Y por cierto, esta plantilla puede ser utilizada para la generación de títulos, puede ser utilizada para muchas herramientas, cualquier cosa que tenga una entrada o dos entradas y genere una lista de cosas. En fin, lo que vamos a hacer simplemente es ir de nuevo a nuestra carpeta y vamos a crear un tres archivos. Nuevamente, la misma operación, pero ahora solo tenemos un nuevo código, el nuevo código de diseño. Encontrarás los archivos adjuntos con esta conferencia. Simplemente consígalos, descárgalos y encontrarás avanzado I, script avanzado de estilo avanzado. Si abres esta interfaz de usuario avanzada, verás el nuevo diseño. Vamos a probarlo. Diré aquí, por ejemplo, un CO consejos para un documental por ejemplo, generar y perfeccionar. Ya puedes ver que tenemos la interfaz de usuario funcionando perfectamente. Sólo un recordatorio, al copiar el script se abre con el Bloc de notas o cualquier editor que desee Y cambia la URL base aquí, tu sitio web, URL, eso es todo. Y tendrás un generador de quien completamente funcional. Y luego puedes copiar, de la misma manera que lo hicimos con el diseño básico, podemos copiar el Wordpress y publicarlo en tu sitio web como lo hice aquí, y ellos lo tienen dentro de mi sitio web Wordpress. En las próximas conferencias, veremos cómo podemos restringir el acceso a esta herramienta solo para usuarios conectados. Y cómo implementar esta herramienta con el sistema de puntos. Si notas aquí, si haces clic ahora en Generar, los puntos disminuirán. Entonces estamos consumiendo puntos o créditos al usar las herramientas. Entonces es como construir un SAS usando estas herramientas. Veremos cómo hacer esto también en las próximas conferencias. 10. Conferencia 10: Bien, amigos, veamos ahora cómo podemos restringir Ace a esta herramienta solo para usuarios que hayan iniciado sesión. Entonces esta es nuestra herramienta. De nuevo, voy a refrescarme y ahora cualquiera puede usarlo. Lo que podemos hacer simplemente es volver a nuestro fragmento. ¿Dónde está nuestro fragmento aquí? Antes de llegar al código, el código principal, comprobaremos si el usuario está logueado. Mira lo fácil que es hacer esto con la guerra. Presiona esta sencilla línea de código. Si el usuario no ha iniciado sesión, verá este signo de exclamación. Si has hecho alguna codificación antes, sabes que esto significa que si no el usuario está conectado, devolveré el inicio de sesión primero. Eso es todo, actualización. Y ahora lo que está bien en esta plantilla, ya creé también la lógica de inicio de sesión. Veamos esto. Voy a decir aquí un CO propina otra vez, cualquier cosa haga clic en Generar. Ahora te dirá que necesitas iniciar sesión primero y hacer clic en un botón. Y te llevaremos a la página de inicio de sesión. Ahora en este caso, pongo mi página de inicio de sesión de usuario. Es necesario cambiar la CRL. Te diré dónde en un poco, pero ya puedes ver lo fácil que es proteger tus herramientas de accesos no autorizados. Solo los usuarios que hayan iniciado sesión pueden acceder a esta herramienta. Y de esta manera puedes recopilar y construir listas de correo electrónico o como verás a continuación, podemos permitir que solo los usuarios que tengan suficientes créditos o puntos utilicen esta herramienta. Solo agrega esta pequeña línea de código y ya terminarás de nuevo. Volvamos al script avanzado y abramos la edición del archivo JS . Y si bajas, verás que tenemos este show pop up, login pop up. Puedes ver aquí está el enlace a mi página de inicio de sesión de usuario. Simplemente cambia esto y también puedes cambiar la imagen si quieres el PNG sin eje que puedes ver aquí. Volvamos otra vez. Esta imagen aquí, puedes cambiarla si quieres. Depende de ti. Así es como podemos restringir el acceso a los usuarios que hayan iniciado sesión. Implementemos el sistema de puntos y comencemos a vender estas herramientas en la próxima conferencia. 11. Conferencia 11: Bien, amigos. Ahora hagamos algo de dinero con nuestras herramientas. Convirtamos nuestro sitio web Wordpress en un negocio. Volviendo a mi sitio web, volverás a ver, cada vez que uses la herramienta, da clic en Generar. Mira el balance de puntos aquí, disminución. Se puede ver que estamos consumiendo nuestros puntos. Si haces clic en los puntos aquí, te llevará la página de puntos donde podrás volver a comprar los Power Points. Es como cualquier sistema Ct, cualquier negocio Sa, pero en Wordpress. Veamos cómo hacer esto en esta conferencia. Paso uno, volvemos a nuestro panel de Wordpress. Queremos instalar un enchufe que administre los puntos o el sistema de crédito fácilmente. Vuelve aquí para enchufar, agregar y enchufar. Se llama mi Cred. Instálelo. Aquí estamos. Instalar y activar. Perfecto. Vamos a quedarnos con esto por ahora. Y aquí estamos. Tenemos los puntos. Puedes cambiar el nombre si quieres créditos o algo así. Pero ahora se centra en el punto principal. Ir a usuarios. Aquí, todos los usuarios. Entonces puedes ver ahora el admin tiene cero puntos. Puede hacer clic en Ajustar. Y agreguemos algunos puntos por ahora, actualización. Ahora podemos ver que tengo 100 puntos. Perfecto, puedo probar con. Ahora lo que queremos hacer es si el usuario está conectado y luego hace clic en Generar, queremos verificar si tiene el saldo adecuado para usar la herramienta. Veamos cómo hacer esto de nuevo, dentro de War Press volver a fragmentos fríos. Los fragmentos fríos Y abre nuestro fragmento generador wo que creamos antes. Y lo que vamos a hacer ahora mismo, se puede ver aquí, vamos a mover esto aquí. Si el usuario está conectado, nos moveremos y ahora vamos a verificar el saldo. Bien, Y agregarás este sencillo código. Vamos a obtener el ID de usuario. El usuario ha iniciado sesión. Pasamos esta condición para que podamos obtener el ID de usuario. Entonces vamos a conseguir el balance del usuario con esta sencilla función. Ya ves lo fácil que es implementar el sistema de puntos con word press. Debido a que estas son funciones integradas, si el saldo es inferior a cinco, no enviaremos saldo. Así de simple. Una última cosa, antes devolver la solicitud al usuario, queremos asegurarnos de que estamos deduciendo puntos Tenemos este método también restar. Pasamos los dos nombres y el ID de usuario. Cuántos puntos queremos deducir. Y una descripción sencilla y un tiempo. Y eso es todo, actualice el guión. Y veamos ahora la magia. Antes de que veamos la magia, en lugar de probar el código aquí, vamos a moverlo. Presione nuevamente el sitio web. ¿Dónde está mi página? Aquí está mi página. Da click con elementor. Voy a actualizar los códigos. Es simple. Esto lo hicimos antes. Basta con mover los códigos HTML, CSS y Javascript estos códigos. Y poner aquí en lugar de este código, copia de estilo avanzado. Nuevamente, recuerda que agregamos la etiqueta de estilo. Aquí pegamos el estilo. Bajemos, por cierto, esta hoja de estilo se usa para estilizar todas mis herramientas. Vamos a copiar de aquí, la sección principal, y eso es un copy paste aquí. Ya ves ahora apareció la herramienta y aún tenemos el guión. Vamos a conseguirlo control C y pegar. Perfecto. Actualicemos. No lo olvides, necesitas actualizar la URL y las URL de las imágenes Recuerdas aquí tenemos el pop up de inicio de sesión, tenemos la fuente de la imagen. Necesitamos ingresar una URL aquí en su lugar, para acceder a una imagen pública. Entonces para hacer eso, volveré a mi panel de Wordpress. Entra aquí a medios agregar nuevos archivos multimedia. Seleccione Archivo, y voy a subir las imágenes Sin acceso y sin saldo. Png es perfecto. Vamos a copiar URL al portapapeles la URL pública y ponerla aquí Nuevamente, te animo a aprender HTML básico, CSS y Javascript. Esto te ayudará mucho. En fin, de nuevo, vamos a conseguir el saldo no y pegarlo. Aquí estamos, Actualización. Ahora probemos la herramienta abierta. Ahora simplemente digamos por ejemplo, anuncios de Facebook vuelven a generar y perfeccionar. Se puede ver que la herramienta está funcionando perfectamente. Si actualizas la página, verás menos cinco deducidos por usar generador de gancho Este pop up está integrado en el enchufe microd. Es realmente perfecto. Volvamos a nuestro dashboard, todos los usuarios, y ya puedes ver que tenemos 90 puntos. Voy a probar esto de nuevo, generar correo. Ahora si vamos, deben ser 85. Vamos a refrescar y perfeccionar, puedes ver 85 puntos. El sistema de puntos también está integrado y funciona perfectamente. El último paso a hacer es permitir que la gente compre puntos. Esto se puede hacer con dos opciones. Aquí tienes pasarelas de novia, puedes implementar directamente dentro del plug in, como usar Paypal, Scrill, cualquier raya O puedes usar, como hago en mi sitio web, yo uso Woo Commerce. Para que puedas instalar Woo Commerce. Creo que si ya trabajaste antes con Wordpress, creo que conoces Woocommerce, es el número uno. Enchufe para vender productos en Wordpress. Bien, ahora ve aquí a los productos, agrega un nuevo producto y simplemente di, por ejemplo, 1,000 puntos. Y la idea aquí principalmente es marcar esta casilla recompensar con puntos y sumar el número de puntos. Ahora siempre que alguien compre este producto, obtendrá 1,000 puntos en su saldo Eso es todo, tienes el sistema de puntos y ahora los usuarios pueden acceder a tus herramientas solo si has iniciado sesión. Y siempre que lo usen, consumirán sus créditos o sus puntos. Ahora, volviendo a mi página web, si te das cuenta tengo aquí el saldo de puntos en la cabecera. También tengo esta plantilla donde muestro los costos y esto para recargar tomas de corriente y así sucesivamente. Si estás interesado en aprender más sobre construir como word press y robar todos mis códigos y así sucesivamente, puedes consultar mi otro curso, convertir word press en AS. No sé si eres miembro del poder. Si lo eres, puedes acceder a este curso de forma gratuita. Si no, puedes consultarlo en mi página web. Aquí podrás aprender todo en detalle cómo construyo mi sistema de herramientas. No olvides, si te enfrentas algún problema tienes alguna duda, cualquier cosa. Estaré aquí para ayudarte casi todos los días.