Copy Button für Code Field in Gutenberg

In diesem Beitrag erfahren Sie, wie Sie mithilfe von JavaScript und CSS einen „Copy“-Button zu Ihren Code-Blöcken im Gutenberg-Editor von WordPress hinzufügen können. Dies ist besonders nützlich, wenn Sie technische Inhalte oder Programmier-Tutorials veröffentlichen und Ihren Lesern eine schnelle Möglichkeit bieten möchten, Code-Ausschnitte zu kopieren.

1. Vorbereitung

Bevor Sie mit dem Hinzufügen von Codes beginnen, sollten Sie einige Vorbereitungen treffen:

• Stellen Sie sicher, dass Sie Zugriff auf die Dateien Ihres WordPress-Themes haben.
• Sie sollten wissen, wie man JavaScript und CSS in WordPress hinzufügt.

Nun, hier sind die detaillierten Schritte:

JavaScript in functions.php hinzufügen:

• Öffnen Sie über ein FTP-Programm oder den Dateimanager Ihres Webhosts das Hauptverzeichnis Ihrer WordPress-Installation.
• Navigieren Sie zu wp-content/themes/[Ihr-Child-Theme-Name]/.
• Öffnen Sie die Datei „functions.php“.
• Fügen Sie am Ende der Datei Ihren JavaScript-Code hinzu.
• Speichern Sie die Datei und schließen Sie sie.

CSS über den Customizer hinzufügen:

• Melden Sie sich in Ihrem WordPress-Dashboard an.
• Navigieren Sie zu Design > Customizer.
• Suchen Sie nach „Zusätzliches CSS“ oder einem ähnlichen Menüpunkt.
• Fügen Sie in das bereitgestellte Textfeld Ihren CSS-Code ein.
• Klicken Sie auf „Veröffentlichen“, um die Änderungen zu speichern.

2. JavaScript-Code hinzufügen

document.addEventListener('DOMContentLoaded', function() {
    let codeBlocks = document.querySelectorAll('.wp-block-code');

    codeBlocks.forEach(function(block) {
        let button = document.createElement('button');
        button.className = 'copy-code-button';
        button.textContent = 'Copy';

        button.addEventListener('click', function() {
            let code = block.querySelector('code').innerText;
            let textarea = document.createElement('textarea');
            textarea.value = code;
            document.body.appendChild(textarea);
            textarea.select();
            document.execCommand('copy');
            textarea.remove();

            button.textContent = 'Copied!';
            setTimeout(function() {
                button.textContent = 'Copy';
            }, 2000);
        });

        block.style.position = 'relative';
        block.appendChild(button);
    });
});

3. CSS-Code hinzufügen

.copy-code-button {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: #333;
    color: #fff;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s;
}

.copy-code-button:hover {
    opacity: 1;
}

Schlusswort

Das Hinzufügen eines „Copy“-Buttons zu Ihren Gutenberg Code-Blöcken kann die Interaktion und Zufriedenheit Ihrer Nutzer erheblich steigern. Es ist ein einfacher Schritt, der einen großen Unterschied in der Benutzererfahrung machen kann, besonders auf technischen oder Entwickler-zentrierten Blogs.