Cambiar texto de forma dinámica en bucle en WordPress con Inteligencia Artificial

16 de marzo - 2024

Seguro que has visto algún efecto en alguna web que te gustaría replicar en tu página, la configuración que vamos a ver trata sobre cómo cambiar texto en bucle con la ayuda de la inteligencia artificial y sin saber nada de programación. Tan solo necesitas trabajar con WordPress, saber cómo se configura tu tema instalado y darte de alta en una IA que te permita consultas como las que verás aquí. En esta ocasión utilizaré el tema Divi y ChatGPT como inteligencia artificial.

Suscríbete:

Generar código con CahtGTP para cambiar texto en bucle

El efecto a reproducir es muy sencillo, por eso, antes de indicar dónde y cómo colocar el código vamos a generarlo con la aplicación gratuita ChatGPT.

ChatGPT tiene una versión de pago con información más actualizada, pero para nuestro propósito basta con registrarnos de forma gratuita con la cuenta de Gmail, Microsoft, Apple o creando una cuenta personalizada.

Acceso a ChatGPT
Acceso a ChatGPT

Una vez que hemos accedido empezaremos a comunicar a la inteligencia artificial todos los pasos que debe seguir para poder configurar el código correcto. Cada una de estas informaciones que escribimos esperando una respuesta de la IA se conocen con el nombre de "prompt".

Los prompt deben ser muy claros, concretos y detallados para que la respuesta que obtengamos sea lo más precisa posible a lo que necesitamos.

Estos son los prompt que he utilizado para conseguir el código para poder cambiar texto en bucle:

  1. ¿Puedes contestarme en español?
  2. Quiero que me muestres un código para mi página web para crear un efecto especial que te contaré ahora.
  3. ¿Puedes crearme el código necesario para poder mostrar una palabra o frase que cambie cada 1 segundo y que esté adaptado al tema Divi?
Resultado de la conversación con ChatGPT
Resultado de la conversación con ChatGPT

Código javascript

De los códigos anteriores solo nos vale el código JavaScript para implementarlo en el tema Divi, y dentro de ese código hay que tener en cuenta varios factores que podemos cambiar.

  • Identificador: En la línea 3 aparece el nombre del identificador CSS (cambio-de-texto) que necesitamos para aplicar el efecto al texto que elijamos. Se puede cambiar por uno de nuestra preferencia o dejar el que está ya configurado.
  • Palabras o frases en bucle: En la línea 4 hay que cambiar las palabras preconfiguradas por el texto que se intercambiará.
  • Tiempo: la tercera línea, empezando desde abajo, marca el tiempo en milisegundos entre la aparición de cada texto.

Configuración de texto en bucle en Divi

Para aplicar el efecto es necesario utilizar un bloque de texto para configurar la palabra o frase que queremos modificar y un bloque de código donde colocaremos el script anterior.

1.- Módulo de texto

En el módulo de texto colocamos el texto inicial que aparecerá al cargar la página y lo configuramos con los estilos que se adapten a nuestra web.

Para asignar el efecto del script, editamos el texto del módulo como código HTML ( pestaña "Texto") y añadimos el nombre del identificador, en la etiqueta principal si queremos que cambie la frase completa, o en una nueva etiqueta "spam" si queremos cambiar texto en bucle a una sola palabra.

Colocar id para cambiar texto en bucle en módulo de divi
Colocar id en el texto a cambiar

En el ejemplo anterior sólo quiero cambiar una palabra y por eso la encierro entre dos etiquetas spam y le asigno el identificador del script de la siguiente forma:

<h1>El Poder y la Sostenibilidad del <spam id="cambio-de-texto">Futuro</spam></h1>

2.- Módulo de código

Añadimos un módulo de código en cualquier parte del diseño, en la misma página donde se encuentra el módulo de texto modificado.

Yo suelo colocarlo inmediatamente después del módulo de texto para tenerlo controlado y mantener un poco de orden dentro del sitio web, pero esto es a gusto de cada uno.

Copiamos el script que nos arrojó la consulta de ChatGPT y la pegamos dentro de este módulo, respetando las etiquetas de apertura y cierre del código JavaScript.

Tenemos que confirmar que el identificador es exactamente igual que el que colocamos en el módulo de texto y cambiamos las palabras o la frase que va a cambiar en bucle.

Código del script modificado para cambio de texto
Código del script modificado

En el código he colocado la primera por la que se sustituirá la primera vez, y la segunda palabra por la original que tenemos puesta en el módulo de texto.

Esto hay que hacerlo así porque el efecto, una vez que arranque a funcionar, solo mostrará las palabras que tengamos en el script. El texto original que hace referencia al identificador que hemos puesto, desaparecerá para ser sustituido por este proceso en bucle.

Por tanto, para cambiar la palabra "Futuro" del texto origen, y que se repita en bucle, hay que colocarla la última en el script del módulo de código de Divi.

De esta forma, una vez que guardemos los cambios y cargue el efecto para cambiar texto en bucle, tendremos el siguiente resultado que se muestra en la siguiente imagen:

Resultado de aplicar el efecto de cambio de texto en bucle
Resultado de aplicar el efecto de cambio de texto en bucle

¿Qué te ha parecido? Déjame tus comentarios y si os gusta este tipo de artículos, puedes sugerir que replique algún efecto más que te haya gustado y quieras tener en tu web.

VISITA MI CANAL DE YOUTUBE

Juan

Juan

Juan Martín es el autor del blog Ingresos Vía Web, una persona como tú que intenta ganarse la vida en internet. Trabajo en mi blog para convertir mi sueño de generar autoempleo en realidad y poder ayudar a quien quiera, a conseguir su sueño a través de mis contenidos. Si te parece interesante apúntate a mi newsletter.

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Al dejar un comentario se solicitan datos como tu email y nombre que se almacenan en una cookie para que no tengas que volver a completarlos en próximas visitas. Para enviar un comentario debes aceptar nuestra política de privacidad. Responsable de los datos: Juan Martín Pascual. | Finalidad: Controlar spam, gestión y moderación de comentarios. | Legitimación: Tu consentimiento expreso. |Comunicación de los datos: No se comunicarán a terceros salvo por obligación legal. | Destinatario: Base de datos alojada en SiteGround Spain S.L. dentro de la UE. Ver política de privacidad de Siteground. | Derechos: Acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos.

Mi canal de Youtube

Categorías

Recomendado para Afiliados de Amazon

AAWP Amazon Affiliate for WordPress
Azon Press

Esta web funciona gracias a:

Anuncio - WordPress Gestionado de SiteGround - Potente pero simple de usar. Haz clic para aprender más. Descuento directo DIVI -  10 por ciento