Last Updated on junio 26, 2024 by Jérôme Kerviel

En el pasado, si querías añadir JavaScript personalizado en las entradas de WordPress, tenías que estar familiarizado con el código o depender de un plugin. Desafortunadamente, ninguna de estas soluciones era ideal para la gran mayoría de usuarios de WordPress. La primera tenía una alta barrera de entrada y era arriesgada si no sabías lo que estabas haciendo, y la segunda era muy limitada en lo que te permitía hacer.

Afortunadamente, gracias al desarrollo de herramientas de IA, ya no tenemos que depender de esos métodos.

En este tutorial, te mostraré cinco formas únicas de añadir JavaScript a WordPress. También compartiré el fragmento de código de cada ejemplo para que puedas utilizar los que más te gusten en tu propio sitio web. Después, te daré una guía sobre cómo puedes usar la versión gratuita de Claude-3 (o cualquier herramienta similar de IA) para generar tus propias funcionalidades personalizadas de JavaScript.

Manos a la obra.

Cómo utilizar este tutorial

Aunque este artículo contiene mucho código, quiero dejar claro que no es necesario tener ni una pizca de conocimientos de codificación para aprovechar la información que voy a compartir.

Para cada ejemplo, demostraré cómo se ve y se comporta, y luego compartiré el código subyacente que es responsable del efecto. Para usarlo usted mismo, todo lo que tiene que hacer es:

• Copie el código
• Entra en la página o entrada de WordPress en la que estés trabajando y en la que quieras utilizarlo
• Añadir un Bloque HTML personalizado (como en la imagen de abajo)
• Pegue el código en el bloque
• Modifique el código según sus necesidades

Con respecto al último punto, si tienes al menos una ligera formación en HTML y/o CSS, te resultará más fácil personalizar el código, pero gracias a las herramientas de IA no es un requisito previo (hablaremos de esto más adelante).

En todos ellos, excepto en uno, presentaré el efecto JavaScript directamente dentro del propio encabezado. Esto significa que el fragmento de código subyacente contendrá <h3> que indican que se trata de un título. Si prefiere utilizar el efecto en un párrafo normal, puede sustituir las etiquetas <h3> y cierre </h3> para <p> y </p> respectivamente.

Aparte de sustituir el texto de ejemplo por su propio texto, éste es el ajuste más básico que tendrá que hacer. Sin embargo, dependiendo del efecto específico, es posible que desee modificar la alineación del texto de izquierda a centro, ajustar el tamaño de la fuente, etc. La forma más fácil de hacer esto si usted no tiene experiencia en codificación, es:

• Copie todo el fragmento de código
• Péguelo en Claude-3 o ChatGPT
• Dígale que modifique el código para conseguir el resultado deseado

Cuando reciba el código editado, péguelo en el archivo Bloque HTML personalizadoy haga clic en el botón de vista previa en la parte superior derecha del editor de WordPress para ver cómo se verá en la parte frontal de su sitio:

Si estás satisfecho, ¡genial! Si no lo estás, pide a Claude o a GPT que lo editen un poco más. Mejor aún, pregunta qué parámetro específico se está ajustando para que puedas hacerlo tú mismo hasta que consigas el resultado deseado. A menudo, ambas herramientas te dirán esto sin ni siquiera preguntar, pero lo menciono por si acaso no ocurre.

Una vez aclarado esto, pasemos a los ejemplos.

5 formas de utilizar JavaScript personalizado en WordPress (con fragmentos)

Puedes utilizar JavaScript para hacer un montón de cosas realmente interesantes y útiles que harán tus posts más atractivos. Aunque las posibilidades son muy amplias, voy a ceñirme a casos de uso sencillos.

Para el último ejemplo, tendrá que dar un paso adicional, pero no es nada complicado ni fuera de los límites de WordPress común conocimientos.

Ejemplo #1: Difuminar texto y mostrarlo al hacer clic

☝️ Haga clic en el texto difuminado para eliminarlo.

Genial, ¿verdad? Aquí está el fragmento de código subyacente que puede utilizar para ejecutar este efecto:

<h3>Ejemplo #1: <span id="blurredText">Difuminar texto y mostrarlo al hacer clic</span></h3>

<script>
  const blurredText = document.getElementById('blurredText');

  blurredText.style.filter = 'blur(5px)';
  blurredText.style.cursor = 'pointer';

  blurredText.addEventListener('click', function() {
    if (blurredText.style.filter === 'blur(5px)') {
      blurredText.style.filter = 'none';
    } else {
      blurredText.style.filter = 'blur(5px)';
    }
  });
</script>

Sólo tienes que copiar esto en el bloque HTML personalizado y sustituir "Difuminar texto y mostrarlo al hacer clic" por el texto que quieras difuminar. Si el texto difuminado forma parte de una frase más larga, la parte anterior al efecto difuminado debe insertarse donde veas "Ejemplo #1". Si hay algún texto después de la sección difuminada, puedes ponerlo después del cierre </span> etiqueta.

Como se mencionó en la sección anterior, no olvide sustituir el <h3> y la etiqueta de apertura </h3> etiqueta de cierre con <p> y </p> si piensa utilizar el efecto dentro de un párrafo normal.

Si te quedas atascado o quieres modificarlo de alguna otra manera, entonces pídele a Claude-3 o a ChatGPT que lo hagan por ti.

Ejemplo #2: rmwacrlUns dso rdlobw edcaerabr som

☝️ Haz clic en el texto codificado para descifrarlo.

Se trata de un concepto muy interesante, perfecto para puzzles o concursos en la página. Aquí está el fragmento para llevarlo a cabo:

<h3>Ejemplo #2: <span id="scrambledPhrase">rUbcesanml a eamrblsdc drwo ro swrod</span></h3>

<script>
const scrambledPhrase = document.getElementById('scrambledPhrase');
const originalPhrase = 'Unscramble a scrambled word or words';
let unscrambledPhrase = originalPhrase.split('').sort(() => Math.random() > 0.5 ? 1 : -1).join('');

scrambledPhrase.textContent = unscrambledPhrase;
scrambledPhrase.style.cursor = 'pointer';
scrambledPhrase.addEventListener('click', function() {
  scrambledPhrase.textContent = originalPhrase;
});
</script>

La misma idea aquí con el <h3> etiquetas. Si desea codificar palabras en un párrafo normal, tendrá que sustituirlas por <p> tags.

En rUbcesanml a eamrblsdc drwo ro swrod es lo que descifra para decir "Descifra una palabra o palabras descifradas" así que aquí es donde pondrás tu propia palabra o palabras descifradas.

A la derecha de const FraseOriginal = es donde pondrás la versión descifrada.

Si no quieres descifrar la(s) palabra(s) tú mismo, también puedes utilizar Claude-3 o ChatGPT para que lo hagan por ti.

Ejemplo #3: Cambio dinámico de texto

Este fragmento hará que un trozo de texto cambie a otro trozo de texto en intervalos de tiempo elegidos por usted. También puede añadir un temporizador para indicar cuándo se producirá el siguiente cambio, pero esto es opcional.

Los intervalos pueden configurarse como se desee.

Por ejemplo, si quieres dar a tu audiencia un "consejo diario", puedes configurar el intervalo para que rote cada 24 horas. En el siguiente ejemplo, lo he configurado para que rote cada tres minutos y he incluido una notificación para cuando vaya a cambiar la próxima vez:

Si te quedas en este lugar hasta la hora que ves arriba, verás cómo cambia.

Ten en cuenta que puedes editarlo de muchas otras maneras.

Por ejemplo, en la versión original que me dio Claude-3, el consejo se veía exactamente igual que el resto del texto circundante, así que le pedí que modificara el código añadiendo un fondo amarillo con el color #FFFBCC. También le pedí que cambiara la notificación de mostrar la última vez que se actualizó el consejo a mostrar la próxima vez que se actualizará.

Menciono esto para reiterar una vez más que no es necesario tener conocimientos de programación para utilizar estos fragmentos.

Sólo tienes que copiar el JavaScript original que aparece a continuación, pegarlo en Claude o ChatGPT y pedirle que realice los ajustes que desees. Tendrás que hacer esto de todos modos, para sustituir los trozos de texto giratorios que quieras mostrar a tu audiencia (a menos que edites el código manualmente).

<style>
#dynamicTipContainer {
  background-color: #FFFBCC;
  padding: 10px;
  border-radius: 10px;
}
.tip-text {
  font-weight: bold;
  margin-bottom: 5px;
}
.next-update {
  font-size: 0.8em;
  color: #666;
  margin-bottom: 0;
}
</style>

<div id="dynamicTipContainer">
  <p class="tip-text"></p>
  <p class="next-update">Próxima actualización: <span id="dynamicTipTimestamp"></span></p>
</div>

<script>
const tipTextElement = document.querySelector('#dynamicTipContainer .tip-text');
const dynamicTipTimestamp = document.getElementById('dynamicTipTimestamp');
const tips = [
  "Remember, there's often more than one way to write a JavaScript snippet. Don't be afraid to ask for clarification!",
  "Always preview your post before publishing to ensure the JavaScript snippet is working as intended.",
  "If you get stuck, feel free to ask for help or alternative approaches. There's no need to struggle alone!",
  "Don't be discouraged if your first attempt doesn't work. Coding takes practice and patience.",
  "Have fun with JavaScript! It's a powerful tool for adding interactivity to your WordPress posts.",
  "Start with simple snippets and build up your skills gradually. You'll be amazed at what you can create!",
  "Experiment! Try modifying the snippets and see how they behave differently.",
  "Remember, you can always undo changes or revert to a previous version if something goes wrong."
];

let nextUpdateTime;

function updateTip() {
  const currentTipIndex = Math.floor(Math.random() * tips.length);
  tipTextElement.textContent = "Tip: " + tips[currentTipIndex];
  
  // Set the next update time
  nextUpdateTime = new Date(Date.now() + 180000);
  updateTimestamp();
}

function updateTimestamp() {
  dynamicTipTimestamp.textContent = nextUpdateTime.toLocaleTimeString();
  
  // Update the timestamp every second
  setTimeout(updateTimestamp, 1000);
}

updateTip();
setInterval(updateTip, 180000); // Update every 3 minutes (180000 milliseconds)
</script>

⚠️ Nota importante: Una cosa a tener en cuenta es que a veces la IA se vuelve perezosa al hacer modificaciones en el código. Si notas que por alguna razón tu fragmento editado no se previsualiza correctamente en el front-end, comprueba el código para cualquier nota que venga después de las barras dobles //. Por ejemplo, si ves algo similar a la captura de pantalla siguiente, significa que la IA no incluyó todo el código original:

La solución es sencilla. Pídele que te devuelva todo el fragmento de código con la modificación y lo hará. Problema resuelto.

Ejemplo #4: Añadir un tooltip que aparezca al pasar el ratón por encima

☝️ Pase el cursor del ratón por encima del texto del encabezamiento para ver la información sobre herramientas.

Los tooltips en las entradas de WordPress son útiles por varias razones:

• Proporcionar definiciones sin saturar el contenido principal
• Mejorar la participación del usuario mediante elementos interactivos
• Ofrecer información adicional sobre temas complejos directamente donde se necesita

Antes había que recurrir a un plugin para utilizarlos, pero ahora puedes usar tu propio código JavaScript personalizado para conseguir el mismo efecto.

Aquí está el fragmento de código base para obtener lo que ves arriba:

<h3><span id="tooltipText" class="tooltip">Ejemplo #4: Añadir un tooltip que aparezca al pasar el ratón por encima<span class="tooltiptext">Cuando los lectores pasen el ratón por encima de palabras o frases concretas como ésta, se les mostrará información adicional.</span></span></h3>

<style>
.tooltip {
  position: relative;
  display: inline-block;
  cursor: help;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: #555;
  color: #fff;
  text-align: left;
  padding: 10px;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -100px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
</style>

De nuevo, para cualquier modificación, puedes hacerla a mano si te sientes cómodo, o meterla en Claude-3 o ChatGPT.

⚠️ Otra nota importante: La IA generalmente intentará cumplir cualquier petición de modificación que hagas, pero esto no siempre significa que vaya a funcionar dentro de WordPress. Si encuentras que el JavaScript editado no funciona y no tiene nada que ver con la devolución de código incompleto, entonces puede ser que tu solicitud no sea posible.

Ejemplo #5: Añadir al texto un fragmento de audio que se reproduce al hacer clic en él

☝️ Haga clic en el título para reproducir el fragmento de audio.

Este ejemplo concreto es exactamente para lo que he utilizado JavaScript en los dos artículos recientes en los que lo he añadido.

Este es el fragmento correspondiente:

<style>
  .audio-link {
    font-weight: inherit;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
  }
</style>

<h3><a href="javascript:void(0);" onclick="playMailSound()" class="audio-link">Ejemplo #5: Añadir al texto un fragmento de audio que se reproduce al hacer clic en él</a></h3>
<audio id="mailSound" src="https://themeisle.com/blog/wp-content/uploads/2024/06/audio-snippet.mp3"></audio>
<script>
function playMailSound() {
  var sound = document.getElementById("mailSound");
  sound.play();
}
</script>

Es único comparado con los otros de la lista porque requiere un paso extra para conseguirlo.

Dado que el texto sobre el que se hace clic está vinculado a un archivo de audio MP3, primero debe añadir el archivo a la biblioteca multimedia de WordPress.

Para ello, vaya al panel de control de WordPress y, a continuación, a Medios → Añadir nuevo archivo multimedia:

Busca el archivo MP3 en tu disco duro y cárgalo. A continuación, haga clic en Copiar URL al portapapeles:

Ahora tome esta URL y péguela en el fragmento de código anterior, después de la parte que dice <audio id="mailSound" src=.

No olvides cambiar el <h3> si necesita utilizarlo en un párrafo o en una clase de encabezamiento diferente.

Consejos para desbloquear otro JavaScript personalizado en las funciones de WordPress

Como he dicho antes, JavaScript puede hacer muchas cosas en WordPress. Cuanto más te sumerjas en él, más te darás cuenta de que muchos de tus plugins favoritos dependen en gran medida de JavaScript para hacer lo que hacen. Por ejemplo, cuando un plugin ofrece características como actualizaciones en vivo, animaciones, validaciones de formularios, o cualquier tipo de interactividad sin recargar la página, normalmente se trata de JavaScript.

Esto no significa que pueda (o deba) olvidarse de repente de todo. plugins wordpress. Sin embargo, esto significa que para muchos casos de uso más simples, puede evitar la instalación de otro plugin, y en su lugar confiar en JavaScript para hacer el trabajo.

Sólo le he dado cinco ejemplos en este artículo, pero hay muchos más.

Mientras que los pasos exactos para cada uno de ellos pueden tener algunas diferencias matizadas, para los efectos más simples como los que he cubierto en este artículo, usted debería ser capaz de hacer que funcionen con sólo el fragmento y un poco de edición menor. Como mucho, puede que tengas que dar uno o dos pasos adicionales, como viste con el ejemplo de reproducción de audio con un clic.

A continuación se ofrecen tres consejos para obtener los mejores resultados:

Consejo #1: Utiliza un buen estímulo para validar tu idea y generar un fragmento inicial

Esto es sencillo. JavaScript puede hacer mucho, pero no puede hacerlo todo. Primero asegúrate de que lo que intentas hacer es realmente posible. La clave para hacerlo bien es darle a Claude-3 (o a cualquier herramienta similar que estés usando) una buena indicación inicial para que comunique dos cosas:

• Exactamente lo que quiere que haga el fragmento de JavaScript
• Que es usted un principiante sin conocimientos de programación que busca la solución más sencilla posible.

Si lo que pides hacer no es posible con JavaScript, entonces Claude te informará. Suponiendo que sea posible, lo más probable es que genere un fragmento inicial. Por eso también es crucial no pasar por alto la importancia del segundo punto.

En muchos casos, JavaScript se puede utilizar de más de una manera para lograr lo mismo (más sobre esto pronto). Esto significa que si no eres lo suficientemente directo con tus instrucciones, podrías terminar con una solución que va más allá de tu nivel de comprensión de codificación (asumiendo que tu nivel es cero) o que funciona, pero no es necesariamente la mejor solución.

Consejo #2: No aceptes la primera respuesta

El aspecto difícil de generar JavaScript personalizado cuando no se tiene conocimientos de programación es que no se sabe realmente si lo que se presenta es el mejor enfoque.

Le pondré un ejemplo.

Le pedí a Claude-3 que me generara un fragmento de JavaScript como el que viste en el quinto ejemplo que traté antes: el texto de audio que se reproduce al hacer clic. Redacté la solicitud de manera que coincidiera idénticamente con el fragmento de la vida real que ya había generado anteriormente, para mi artículo sobre contenido cerrado en WordPress.

Cumplió mi petición. Lo he probado y ha funcionado perfectamente.

Pero entonces me di cuenta de algo. El código que me dio era diferente del código que está en el artículo real. Aunque ambos fragmentos funcionan, tenía curiosidad por saber por qué eran diferentes. Le pregunté a Claude y esta fue su respuesta:

Aunque no entiendas los tecnicismos que hay detrás de la explicación, puedes entender el razonamiento.

Pero hay una lección más profunda que aprender.

La lección es que siempre puedes hacer un seguimiento con Claude (o cualquier herramienta de IA que estés utilizando) para preguntar si el fragmento personalizado proporcionado es la única manera de ejecutar la funcionalidad JavaScript que estás tratando de hacer.

También puedes utilizar dos herramientas de IA simultáneamente para ver qué te da cada una. Si los resultados son diferentes, prueba cada una con el código de la otra.

En resumen, sea detective. Investiga hasta encontrar la mejor solución posible para tu caso de uso.

Consejo #3: No tengas miedo de adaptarte y seguir la corriente

Digamos que decides generar tu primer fragmento de JavaScript personalizado y terminas creando un prompt realmente bueno. El prompt funciona y terminas con un snippet inicial sólido. Así que decides usarlo de nuevo. Pero entonces ocurre algo: la respuesta no es la que esperabas.

Que no cunda el pánico. Esto es normal. Te daré otro ejemplo. A continuación, te muestro una pregunta inicial que le di a Claude cuando generaba uno de los cinco fragmentos de la sección anterior de este artículo. Observa la respuesta de Claude:

Copié y pegué exactamente el mismo mensaje como punto de partida para uno de los otros cinco ejemplos de fragmentos, pero recibí esto como respuesta:

Esta vez Claude decidió hacerme algunas preguntas. Independientemente de las preguntas que te haga (o no te haga), puedes responderlas lo mejor que puedas. Si conoces las respuestas, estupendo. Si no las sabes, tampoco pasa nada. Puedes ser franco al respecto y mantener una conversación con Claude. Se adaptará y acabará entendiendo lo que le pides que haga.

Reflexiones de despedida

Las herramientas de IA han cambiado Internet de muchas maneras en un periodo de tiempo relativamente corto. Aunque tengo muchas reservas sobre la forma en que se están utilizando indebidamente para producir contenidos de baja calidad, por otro lado, han hecho que sea mucho más fácil para los internautas acceder a contenidos de calidad. accesible para WordPress usuarios sin conocimientos técnicos para añadir elementos interactivos de JavaScript a su sitio. Aunque hay muchas maneras de hacerlo, cubrimos las cinco siguientes (puedes interactuar con ellas, igual que antes):

• Difuminar texto y mostrarlo al hacer clic
• baUscdo alnwblorrsmmeodwrd rr aec s
• Consejo: ¡JavaScript es divertido! (cambia cada 3 minutos)
• Añadir un tooltip que aparezca al pasar el ratón por encima
• Añade a tu texto un fragmento de audio que se reproduce al hacer clic

Si quieres otras ideas, no dudes en utilizar Claude-3, ChatGPT o tu herramienta de IA favorita para generar tus propios fragmentos personalizados. Asegúrate de dar instrucciones claras y concretas, no aceptes la primera respuesta que te dé la herramienta sin preguntar si hay otras opciones y, por último, adáptate a sus respuestas como lo harías en una conversación con un humano.