WordPress Kopier-Funktion beim Code-Block einfügen

Vielleicht ist es euch in einem vorherigen Beitrag aufgefallen: Es gibt die Möglichkeit, Code in einem Code-Block per Button zu kopieren. Diese Funktion ist jedoch standardmäßig nicht im Core-Code-Block von WordPress enthalten. Kein Grund zur Sorge! Mit einem kleinen Snippet könnt ihr diese Funktionalität ganz einfach zu euren Beiträgen hinzufügen.

So geht’s:

1. Erstellt einen HTML-Block in eurem Beitrag oder fügt das Snippet direkt in eure Theme-Dateien ein, falls es global gelten soll.
2. Fügt den folgenden Code ein:

<script>
document.addEventListener('DOMContentLoaded', function () {
    // Alle Code-Blöcke im Beitrag finden
    var codeBlocks = document.querySelectorAll('.wp-block-code');

    codeBlocks.forEach(function (block) {
        var code = block.querySelector('code');
        if (!code) return; // Überspringen, falls kein <code> im Block ist

        // Button erstellen
        var button = document.createElement('button');
        button.textContent = 'Copy Code';
        button.style.cssText = `
            position: absolute; 
            top: 0; 
            right: 0; 
            margin: 4px; 
            padding: 4px 8px; 
            font-size: 12px; 
            background-color: rgba(200, 200, 200, 0.2); 
            color: #fff; 
            border: none; 
            border-radius: 4px; 
            cursor: pointer; 
            transition: all 0.2s ease-in-out;
        `;

        // Button Hover-Effekte
        button.addEventListener('mouseenter', function () {
            button.style.backgroundColor = 'rgba(0, 0, 0, 0.1)';
        });

        button.addEventListener('mouseleave', function () {
            button.style.backgroundColor = 'rgba(200, 200, 200, 0.2)';
        });

        // Klick-Event zum Kopieren
        button.addEventListener('click', function () {
            // Codeinhalt kopieren
            var range = document.createRange();
            range.selectNodeContents(code);
            var selection = window.getSelection();
            selection.removeAllRanges();
            selection.addRange(range);

            try {
                document.execCommand('copy');
                button.textContent = 'Copied!';
                button.style.backgroundColor = '#333';
                button.style.color = '#fff';
            } catch (err) {
                console.error('Copy failed', err);
                button.textContent = 'Failed!';
            }

            // Auswahl zurücksetzen
            selection.removeAllRanges();

            // Button nach 3 Sekunden zurücksetzen
            setTimeout(function () {
                button.textContent = 'Copy Code';
                button.style.backgroundColor = 'rgba(200, 200, 200, 0.2)';
                button.style.color = '#fff';
            }, 3000);
        });

        // Block-Style anpassen
        block.style.position = 'relative';
        block.insertBefore(button, code);
    });

    // Farbe für den Text in Code-Blöcken setzen
    document.querySelectorAll('.wp-block-code pre').forEach(function (text) {
        text.style.color = '#fff'; // Optional: Kann entfernt oder angepasst werden
    });
});
</script>

Nun schreibt ein Beitrag und veröffentlicht es. Ihr werdet sehen, dass nun der Button bei jedem Code Block vorhanden ist.

Anleitung zur Anpassung des Stils

Der Button wird durch Inline-Styles direkt im Script gestaltet. Wenn ihr das Design anpassen möchtet, könnt ihr die CSS-Eigenschaften im JavaScript ändern. Die Anpassung ist ganz einfach!

Stil anpassen

Hier ist der Abschnitt des Codes, der den Button-Style definiert:

button.style.cssText = `
    position: absolute; 
    top: 0; 
    right: 0; 
    margin: 4px; 
    padding: 4px 8px; 
    font-size: 12px; 
    background-color: rgba(200, 200, 200, 0.2); 
    color: #fff; 
    border: none; 
    border-radius: 4px; 
    cursor: pointer; 
    transition: all 0.2s ease-in-out;
`;

So könnt ihr den Stil ändern

Position:

Möchtet ihr den Button an einer anderen Stelle platzieren, könnt ihr die Werte von top, right, bottom, oder left anpassen.
Beispiel:

button.style.cssText = 'position: absolute; bottom: 10px; left: 10px;';

Hintergrundfarbe

Die Eigenschaft background-color legt die Hintergrundfarbe fest. Hier könnt ihr Farbwerte in rgba, Hexadezimal (#333) oder als Farbnamen (z. B. red) verwenden.
Beispiel:

button.style.backgroundColor = '#0073aa'; // WordPress-Blau

Größe

Über padding und font-size könnt ihr die Größe des Buttons anpassen.
Beispiel:

button.style.padding = '8px 16px';
button.style.fontSize = '14px';

Ecken abrunden

Mit border-radius könnt ihr runde oder eckige Buttons erstellen.
Beispiel:

button.style.borderRadius = '0'; // Keine Abrundung

Schriftfarbe

Die Textfarbe wird mit color definiert.
Beispiel:

button.style.color = '#000'; // Schwarzer Text

Übergangseffekte

Der Button hat bereits einen Hover-Effekt (mouseenter und mouseleave), bei dem die Hintergrundfarbe geändert wird. Möchtet ihr weitere Effekte hinzufügen, könnt ihr das transition-Property anpassen.
Beispiel:

button.style.transition = 'transform 0.3s ease-in-out';
button.addEventListener('mouseenter', function () {
    button.style.transform = 'scale(1.1)'; // Button wird leicht größer
});
button.addEventListener('mouseleave', function () {
    button.style.transform = 'scale(1)';
});

Fazit

Das Inline-Styling im Script macht den Button flexibel und leicht anpassbar. Ihr könnt durch kleine Änderungen an den Eigenschaften den Button an euer Design anpassen – egal ob ihr minimalistisch, farbenfroh oder modern arbeiten möchtet.

Falls ihr ein konsistentes Design in eurem gesamten Blog haben möchtet, könnt ihr das Styling auch in eine separate CSS-Datei auslagern. Dafür müsst ihr die Inline-Styles durch CSS-Klassen ersetzen.