Hast du jemals auf deiner Webseite einen großartigen Code geteilt und gewünscht, dass deine Besucher diesen Code einfach mit einem Klick kopieren können? Heute zeige ich dir, wie du genau das in deinem WordPress-Gutenberg-Editor machen kannst – und das Beste daran, es ist einfacher als du denkst!
Schritt 1: Füge einen Code-Block hinzu
Gehe zu dem Beitrag oder der Seite, auf der du deinen Code einfügen möchtest. Füge einen neuen Block hinzu und wähle den „Code“-Block. Gib deinen Code in den Block ein. So weit, so gut!
Schritt 2: Füge einen benutzerdefinierten HTML-Block hinzu
Nun kommt der spaßige Teil. Füge einen neuen Block hinzu und wähle den „Benutzerdefinierter HTML“-Block. Kopiere und füge den folgenden magischen HTML- und JavaScript-Code ein:
<pre>
<code id="codeBlock">
# Dein beeindruckender Code hier
</code>
</pre>
<button onclick="copyCode()">Kopieren</button>
<script>
function copyCode() {
var code = document.getElementById("codeBlock").innerText;
navigator.clipboard.writeText(code).then(function() {
alert("Code wurde kopiert!");
}, function(err) {
alert("Fehler beim Kopieren des Codes.");
});
}
</script>
Schritt 3: Passe den Code an
Jetzt ersetze # Dein beeindruckender Code hier durch den tatsächlichen Code, den du deinen Lesern zeigen möchtest. Mach dich bereit, sie zu beeindrucken!
Schritt 4: Veröffentliche oder aktualisiere deine Seite
Sobald du den HTML-Code eingefügt und angepasst hast, kannst du die Seite oder den Beitrag veröffentlichen oder aktualisieren. Und tadaaa! Jetzt haben deine Besucher einen praktischen „Kopieren mit einem Klick“-Button, der ihnen das Leben erleichtert.