Zuletzt aktualisiert am 26. Juni 2024 von Jérôme Kerviel

Wenn Sie in der Vergangenheit benutzerdefiniertes JavaScript in WordPress-Beiträge einfügen wollten, mussten Sie sich entweder mit Code auskennen oder auf ein Plugin zurückgreifen. Leider waren beide Lösungen für die große Mehrheit der WordPress-Nutzer nicht ideal. Die erste Lösung hatte eine hohe Einstiegshürde und war riskant, wenn man nicht wusste, was man tat, und die zweite war in ihren Möglichkeiten sehr begrenzt.

Zum Glück sind wir dank der Entwicklung von KI-Tools nicht mehr auf diese Methoden angewiesen.

In diesem Tutorial zeige ich Ihnen fünf einzigartige Möglichkeiten, JavaScript zu WordPress hinzuzufügen. Ich werde auch das Code-Snippet für jedes Beispiel teilen, damit Sie die, die Ihnen gefallen, auf Ihrer eigenen Website verwenden können. Anschließend gebe ich Ihnen eine Anleitung, wie Sie die kostenlose Version von Claude-3 (oder ein ähnliches KI-Tool) verwenden können, um Ihre eigenen benutzerdefinierten JavaScript-Funktionen zu erstellen.

An die Arbeit!

So verwenden Sie dieses Lernprogramm

Obwohl dieser Artikel eine Menge Code enthält, möchte ich klarstellen, dass Sie brauchen keine Programmierkenntnisse zu haben, um von den Informationen zu profitieren, die ich mit Ihnen teilen werde..

Für jedes Beispiel werde ich demonstrieren, wie es aussieht und sich verhält, und dann werde ich den zugrunde liegenden Code teilen, der für den Effekt verantwortlich ist. Um ihn selbst zu verwenden, müssen Sie nur Folgendes tun:

• Kopieren Sie den Code
• Gehen Sie auf die WordPress-Seite oder den Beitrag, an dem Sie arbeiten und den Sie verwenden möchten
• Hinzufügen einer Benutzerdefinierter HTML-Block (wie auf dem Bild unten)
• Fügen Sie den Code in den Block ein
• Ändern Sie den Code nach Ihren Bedürfnissen

Zum letzten Punkt: Wenn Sie zumindest über leichte HTML- und/oder CSS-Kenntnisse verfügen, ist es einfacher, den Code anzupassen, aber dank der KI-Tools ist das keine Voraussetzung (mehr dazu in Kürze).

Bei allen bis auf eine Ausnahme werde ich den JavaScript-Effekt direkt in der Überschrift selbst darstellen. Das bedeutet, dass der zugrunde liegende Codeschnipsel Folgendes enthält <h3> Tags, die anzeigen, dass der Text eine Überschrift ist. Wenn Sie es vorziehen, den Effekt in einem normalen Absatz zu verwenden, dann können Sie einfach die <h3> und Schließen </h3> für <p> und </p> beziehungsweise.

Abgesehen davon, dass Sie den Beispieltext durch Ihren eigenen Text ersetzen, ist dies die grundlegendste Anpassung, die Sie vornehmen müssen. Je nach Effekt kann es jedoch sinnvoll sein, die Textausrichtung von links nach mittig zu ändern, die Schriftgröße anzupassen usw. Der einfachste Weg, dies zu tun, wenn Sie keine Erfahrung mit der Programmierung haben, ist:

• Kopieren Sie das gesamte Codeschnipsel
• Fügen Sie es entweder in Claude-3 oder ChatGPT
• Sagen Sie dem Programm, dass es den Code ändern soll, um das gewünschte Ergebnis zu erzielen

Wenn Sie den bearbeiteten Code zurückerhalten, fügen Sie ihn in die Benutzerdefinierter HTML-Blockund klicken Sie auf die Schaltfläche "Vorschau" oben rechts im WordPress-Editor, um zu sehen, wie es auf dem Frontend Ihrer Website aussehen wird:

Wenn Sie zufrieden sind - prima! Wenn nicht, bitten Sie Claude oder GPT, die Datei weiter zu bearbeiten. Noch besser ist es, wenn Sie fragen, welcher Parameter genau geändert werden soll, damit Sie es selbst tun können, bis Sie das gewünschte Ergebnis erreicht haben. Oftmals sagen Ihnen beide Tools dies, ohne dass Sie danach fragen müssen, aber ich erwähne es nur für den Fall, dass dies nicht der Fall ist.

Nachdem das geklärt ist, kommen wir nun zu den Beispielen.

5 Möglichkeiten zur Verwendung von benutzerdefiniertem JavaScript in WordPress (mit Snippets)

Mit JavaScript können Sie viele wirklich interessante und nützliche Dinge tun, die Ihre Beiträge interessanter machen. Obwohl die Möglichkeiten recht umfangreich sind, werde ich mich hier auf einfache Anwendungsfälle beschränken.

Für das letzte Beispiel ist ein zusätzlicher Schritt erforderlich, der jedoch nicht kompliziert ist und den Rahmen der folgenden Möglichkeiten sprengt gemeinsames WordPress Wissen.

Beispiel #1: Text unscharf machen und beim Anklicken sichtbar machen

☝️ Klicken Sie auf den unscharfen Text, um die Unschärfe zu entfernen.

Ziemlich cool, oder? Hier ist der zugrundeliegende Codeschnipsel, den Sie verwenden können, um diesen Effekt auszuführen:

<h3>Beispiel #1: <span id="blurredText">Text unscharf machen und beim Anklicken sichtbar machen</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>

Kopieren Sie dies einfach in den benutzerdefinierten HTML-Block und ersetzen Sie "Blur text and reveal it upon clicking" durch den Text, den Sie unscharf machen wollen. Wenn der unscharfe Text Teil eines längeren Satzes ist, sollte der Teil vor dem Unschärfeeffekt an der Stelle eingefügt werden, an der Sie "Beispiel #1" sehen. Wenn nach dem unscharfen Abschnitt noch Text vorhanden ist, können Sie diesen nach dem abschließenden </span> Tag.

Wie im vorherigen Abschnitt erwähnt, vergessen Sie bitte nicht, die <h3> Eröffnungs-Tag und das </h3> schließenden Tag mit <p> und </p> wenn Sie den Effekt innerhalb eines normalen Absatzes verwenden wollen.

Wenn du nicht weiterkommst oder ihn auf andere Weise ändern möchtest, kannst du Claude-3 oder ChatGPT bitten, dies für dich zu tun.

Beispiel #2: rmwacrlUns dso rdlobw edcaerabr som

☝️ Klicken Sie auf den verschlüsselten Text, um ihn zu entschlüsseln.

Das ist ein wirklich nettes Konzept, das sich perfekt für Rätsel oder On-Page-Quiz eignet. Hier ist das Snippet, mit dem es funktioniert:

<h3>Beispiel #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>

Dieselbe Idee hier mit dem <h3> Tags. Wenn Sie Wörter in einem normalen Absatz verschlüsseln wollen, müssen Sie diese durch <p> Tags.

Die rUbcesanml a eamrblsdc drwo ro swrod ist das, was sich entschlüsseln lässt, um zu sagen: "Entschlüsseln Sie ein verschlüsseltes Wort oder mehrere Wörter". Hier geben Sie also Ihr eigenes verschlüsseltes Wort oder Ihre eigenen verschlüsselten Wörter ein.

Auf der rechten Seite von const originalPhrase = ist der Ort, an dem Sie die nicht verschlüsselte Version ablegen werden.

Wenn Sie die Wörter nicht selbst verschlüsseln möchten, können Sie auch Claude-3 oder ChatGPT verwenden, um dies zu tun.

Beispiel #3: Dynamisch wechselnder Text

Dieses Snippet sorgt dafür, dass ein Textstück in von Ihnen gewählten Zeitabständen in ein anderes Textstück übergeht. Sie können auch einen Timer hinzufügen, der anzeigt, wann die nächste Änderung stattfinden wird, aber das ist optional.

Die Intervalle können nach Belieben eingestellt werden.

Wenn Sie Ihrem Publikum zum Beispiel einen "täglichen Tipp" geben möchten, können Sie das Intervall so einstellen, dass es alle 24 Stunden wechselt. Im folgenden Beispiel habe ich den Wechsel auf alle drei Minuten eingestellt und eine Benachrichtigung über den nächsten Wechsel hinzugefügt:

Wenn Sie sich bis zu der oben angegebenen Zeit an diesem Ort aufhalten, werden Sie sehen, wie er sich verändert.

Denken Sie daran, dass Sie dies auf viele andere Arten bearbeiten können.

In der ursprünglichen Version, die mir Claude-3 gegeben hat, sah der Tipp zum Beispiel genauso aus wie der umgebende Text, also habe ich ihn gebeten, den Code zu ändern und einen gelben Hintergrund mit der Farbe #FFFBCC hinzuzufügen. Außerdem sollte die Benachrichtigung nicht mehr die letzte Aktualisierung des Tipps anzeigen, sondern das nächste Mal.

Ich erwähne dies, um noch einmal zu betonen, dass Sie keine Programmierkenntnisse benötigen, um diese Schnipsel zu verwenden.

Kopieren Sie einfach das Original-JavaScript unten, fügen Sie es in Claude oder ChatGPT ein und bitten Sie das Programm, die gewünschten Anpassungen vorzunehmen. Sie müssen dies ohnehin tun, um die rotierenden Textteile zu ersetzen, die Sie Ihrem Publikum zeigen möchten (es sei denn, Sie bearbeiten den Code manuell).

<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">Nächstes Update: <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>

⚠️ Wichtiger Hinweis: Eine Sache, die Sie beachten sollten, ist, dass die KI manchmal faul wird, wenn sie Codeänderungen vornimmt. Wenn Sie bemerken, dass aus irgendeinem Grund Ihr bearbeitetes Snippet nicht korrekt in der Vorschau angezeigt wird, überprüfen Sie den Code auf Hinweise, die nach den doppelten Schrägstrichen kommen //. Wenn Sie z. B. etwas sehen, das dem folgenden Screenshot ähnelt, bedeutet dies, dass die KI nicht den gesamten ursprünglichen Code übernommen hat:

Die Lösung ist einfach. Bitten Sie das Programm einfach, Ihnen den gesamten Codeschnipsel mit der Änderung zurückzugeben, und es wird es tun. Problem gelöst.

Beispiel #4: Hinzufügen eines Tooltips, der beim Hovern erscheint

☝️ Bewegen Sie den Mauszeiger über den Text der Überschrift, um die QuickInfo anzuzeigen.

Tooltips in WordPress-Beiträgen sind aus mehreren Gründen nützlich:

• Definitionen bereitstellen, ohne den Hauptinhalt zu überladen
• Verstärkung der Nutzerbindung durch interaktive Elemente
• Bereitstellung zusätzlicher Informationen zu komplexen Themen direkt dort, wo sie benötigt werden

In der Vergangenheit mussten Sie sich auf ein Plugin verlassen, um diese zu nutzen, aber jetzt können Sie Ihren eigenen JavaScript-Code verwenden, um denselben Effekt zu erzielen.

Hier ist der Basiscodeausschnitt, um das zu erhalten, was Sie oben sehen:

<h3><span id="tooltipText" class="tooltip">Beispiel #4: Hinzufügen eines Tooltips, der beim Hovern erscheint<span class="tooltiptext">Wenn die Leser mit dem Mauszeiger über bestimmte Wörter oder Ausdrücke wie diesen fahren, werden ihnen zusätzliche Informationen angezeigt.</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>

Auch hier können Sie alle Änderungen von Hand vornehmen, wenn Sie sich wohl fühlen, oder sie in Claude-3 oder ChatGPT eingeben.

⚠️ Ein weiterer wichtiger Hinweis: Die KI wird in der Regel versuchen, Ihre Änderungswünsche zu erfüllen, aber das bedeutet nicht immer, dass sie innerhalb von WordPress funktionieren. Wenn Sie feststellen, dass das bearbeitete JavaScript nicht funktioniert und es nichts damit zu tun hat, dass Sie unvollständigen Code zurückbekommen, dann kann es sein, dass Ihre Anfrage einfach nicht möglich ist.

Beispiel #5: Fügen Sie einen anklickbaren Audioausschnitt in Ihren Text ein

☝️ Klicken Sie auf die Überschrift oben, um das Audio-Snippet abzuspielen.

Dieses Beispiel ist genau das, wofür ich JavaScript in den beiden Artikeln verwendet habe, die ich kürzlich hinzugefügt habe.

Hier ist das Snippet dazu:

<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">Beispiel #5: Fügen Sie einen anklickbaren Audioausschnitt in Ihren Text ein</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 ist einzigartig im Vergleich zu den anderen auf der Liste, weil es einen zusätzlichen Schritt erfordert, um es zu schaffen.

Da der angeklickte Text mit einer MP3-Audiodatei verknüpft ist, müssen Sie die Datei zunächst zu Ihrer WordPress-Medienbibliothek hinzufügen.

Gehen Sie dazu in das WordPress-Dashboard und dann zu Medien → Neue Mediendatei hinzufügen:

Suchen Sie die MP3-Datei auf Ihrer Festplatte und laden Sie sie hoch. Klicken Sie dann auf URL in die Zwischenablage kopieren:

Fügen Sie diese URL in das obige Codeschnipsel ein, und zwar nach dem Teil, in dem es heißt <audio id="mailSound" src=.

Vergessen Sie nicht den Austausch der <h3> Tags, wenn Sie diese in einem Absatz oder einer anderen Überschriftenklasse verwenden müssen.

Tipps zum Freischalten anderer benutzerdefinierter JavaScript-Funktionen in WordPress

Wie ich bereits erwähnt habe, kann JavaScript in WordPress eine Menge Dinge tun. Je tiefer Sie in die Materie eintauchen, desto mehr werden Sie feststellen, dass viele Ihrer Lieblings-Plugins stark auf JavaScript angewiesen sind, um das zu tun, was sie tun. Wenn ein Plugin zum Beispiel Funktionen wie Live-Updates, Animationen, Formularvalidierungen oder jede Art von Interaktivität ohne Neuladen der Seite bietet, ist in der Regel JavaScript am Werk.

Das heißt aber nicht, dass Sie plötzlich alles vergessen können (oder sollten) Wordpress-Plugins. Es bedeutet jedoch, dass Sie für viele einfachere Anwendungsfälle die Installation eines weiteren Plugins vermeiden und sich stattdessen auf JavaScript verlassen können, um die Aufgabe zu erledigen.

Ich habe Ihnen in diesem Artikel nur fünf Beispiele genannt, aber es gibt noch viele mehr.

Während die genauen Schritte für jeden dieser Effekte einige nuancierte Unterschiede aufweisen, sollten Sie bei einfacheren Effekten wie denen, die ich in diesem Artikel behandelt habe, in der Lage sein, sie nur mit dem Snippet und einigen geringfügigen Bearbeitungen zum Laufen zu bringen. Höchstens ein oder zwei zusätzliche Schritte sind nötig, wie Sie es bei dem Beispiel mit dem Play-on-Click-Audio gesehen haben.

Im Folgenden finden Sie drei Tipps, um die besten Ergebnisse zu erzielen:

Tipp #1: Verwenden Sie eine gute Eingabeaufforderung, um Ihre Idee zu überprüfen und einen ersten Schnipsel zu erstellen

Das ist ganz einfach. JavaScript kann eine Menge, aber nicht alles. Stellen Sie zunächst sicher, dass das, was Sie tun wollen, auch wirklich möglich ist. Der Schlüssel dazu ist, Claude-3 (oder einem ähnlichen Tool, das Sie verwenden) eine gute Eingabeaufforderung zu geben, damit es zwei Dinge kommuniziert:

• Was genau soll das JavaScript-Snippet tun?
• dass Sie ein Anfänger ohne Programmierkenntnisse sind und eine möglichst einfache Lösung suchen

Wenn das, worum Sie bitten, mit JavaScript nicht möglich ist, wird Claude Sie darüber informieren. Wenn es möglich ist, wird er höchstwahrscheinlich ein erstes Snippet erzeugen. Aus diesem Grund ist auch der zweite Punkt von großer Bedeutung.

In vielen Fällen kann JavaScript auf mehr als eine Weise verwendet werden, um das Gleiche zu erreichen (mehr dazu in Kürze). Das bedeutet, dass Sie, wenn Sie Ihre Anweisungen nicht direkt genug formulieren, möglicherweise eine Lösung erhalten, die Ihr Programmierverständnis übersteigt (vorausgesetzt, Ihr Niveau ist gleich null) oder die zwar funktioniert, aber nicht unbedingt die beste Lösung ist.

Tipp #2: Akzeptieren Sie nicht die erste Antwort

Der schwierige Aspekt bei der Generierung von benutzerdefiniertem JavaScript, wenn Sie nicht aus dem Bereich der Programmierung kommen, ist, dass Sie nicht wirklich wissen, ob das, was Ihnen präsentiert wird, der beste Ansatz ist.

Ich möchte Ihnen ein Beispiel geben.

Ich habe Claude-3 gebeten, mir ein JavaScript-Snippet zu generieren, wie Sie es im fünften Beispiel gesehen haben, das ich vorhin behandelt habe - der Play-on-Click-Audiotext. Ich habe die Anfrage so formuliert, dass sie identisch mit dem realen Snippet ist, das ich bereits für meinen Artikel über Gated Content in WordPress erstellt habe.

Sie erfüllte meinen Wunsch. Ich habe es getestet, und es hat einwandfrei funktioniert.

Aber dann ist mir etwas aufgefallen. Der Code, der mir angezeigt wurde, unterschied sich von dem Code, der in dem eigentlichen Artikel steht. Obwohl beide Schnipsel funktionieren, war ich neugierig, warum sie sich unterschieden. Ich habe Claude gefragt, und das war seine Antwort:

Auch wenn Sie die technischen Einzelheiten der Erklärung nicht verstehen, können Sie die Gründe dafür nachvollziehen.

Aber es gibt noch eine weitere Lektion, die wir hier lernen können.

Die Lektion ist, dass Sie immer mit Claude (oder dem von Ihnen verwendeten KI-Tool) nachfragen können, ob das bereitgestellte benutzerdefinierte Snippet die einzige Möglichkeit ist, die gewünschte JavaScript-Funktion auszuführen.

Alternativ können Sie auch zwei KI-Tools gleichzeitig verwenden, um zu sehen, was jedes von ihnen Ihnen liefert. Wenn die Ergebnisse unterschiedlich sind, können Sie jedes Tool mit dem Code des anderen testen.

Kurz gesagt, seien Sie ein Detektiv. Suchen Sie so lange, bis Sie die bestmögliche Lösung für Ihr Anwendungsszenario gefunden haben.

Tipp #3: Haben Sie keine Angst, sich anzupassen und mit dem Strom zu schwimmen

Angenommen, Sie beschließen, Ihr erstes benutzerdefiniertes JavaScript-Snippet zu erstellen, und es gelingt Ihnen, eine wirklich gute Eingabeaufforderung zu entwerfen. Die Eingabeaufforderung funktioniert und Sie haben ein solides erstes Snippet. Also beschließen Sie, ihn erneut zu verwenden. Aber dann passiert etwas - die Antwort ist nicht das, was Sie erwartet haben.

Kein Grund zur Panik. Das ist ganz normal. Ich werde Ihnen ein weiteres Beispiel geben. Nachfolgend sehen Sie eine erste Aufforderung, die ich Claude bei der Erstellung eines der fünf Schnipsel für den vorherigen Abschnitt dieses Artikels gegeben habe. Beachten Sie die Antwort von Claude:

Ich habe genau dieselbe Aufforderung kopiert und als Ausgangspunkt für eines der anderen fünf Beispiele eingefügt, aber stattdessen habe ich das hier als Antwort erhalten:

Dieses Mal hat Claude beschlossen, mir einige Fragen zu stellen. Unabhängig davon, welche Fragen er Ihnen stellt (oder nicht stellt), können Sie sie nach bestem Wissen und Gewissen beantworten. Wenn Sie die Antworten wissen, ist das großartig. Wenn Sie sie nicht wissen, ist das auch nicht weiter schlimm. Sie können das einfach offen ansprechen und mit Claude ein Gespräch führen. Er wird sich anpassen und schließlich herausfinden, was du von ihm verlangst.

Abschiedsgedanken

KI-Tools haben das Internet in relativ kurzer Zeit in vielerlei Hinsicht verändert. Obwohl ich viele Vorbehalte gegen die Art und Weise habe, in der sie missbraucht werden, um minderwertige Inhalte zu produzieren, haben sie es auf der anderen Seite viel einfacher gemacht zugänglich für WordPress Benutzer ohne technischen Hintergrund können interaktive JavaScript-Elemente zu ihrer Website hinzufügen. Es gibt zwar viele Möglichkeiten, dies zu tun, aber wir haben die folgenden fünf behandelt (Sie können mit ihnen interagieren, genau wie zuvor):

• Text unscharf machen und beim Anklicken sichtbar machen
• baUscdo alnwblorrsmmeodwrd rr aec s
• Tipp: JavaScript macht Spaß! (ändert sich alle 3 Minuten)
• Hinzufügen eines Tooltips, der beim Hovern erscheint
• Fügen Sie Ihrem Text ein Audio-Snippet hinzu, das per Mausklick abgespielt wird.

Für weitere Ideen können Sie entweder Claude-3, ChatGPT oder Ihr bevorzugtes KI-Tool verwenden, um Ihre eigenen benutzerdefinierten Snippets zu erstellen. Stellen Sie sicher, dass Sie eine klare Aufforderung mit spezifischen Anweisungen verwenden, akzeptieren Sie nicht die erste Antwort, die das Tool Ihnen gibt, ohne zu fragen, ob es noch andere Optionen gibt, und passen Sie sich schließlich den Antworten des Tools an, wie Sie es in einem Gespräch mit einem Menschen tun würden.