Zur Übersicht

Kopierbaren Code im WordPress-Editor

Vorbereitung

1. PHP für Codeblöcke


<?php
add_filter( 'the_content', function ( $content ) {

    if ( ! is_singular( 'dev_wiki' ) ) {
        return $content;
    }

    return preg_replace_callback(
        '#<pre><code>(.*?)</code></pre>#s',
        function ( $matches ) {
            return
                '<div class="wiki-code">'
                . '<button class="wiki-copy" type="button">Kopieren</button>'
                . '<pre><code>' . $matches[1] . '</code></pre>'
                . '</div>';
        },
        $content
    );

}, 20 );

2. JavaScript im Footer laden


<script>
document.addEventListener('click', function (e) {

    if (!e.target.classList.contains('wiki-copy')) return;

    const code = e.target.nextElementSibling.innerText;

    navigator.clipboard.writeText(code).then(() => {
        e.target.textContent = 'Kopiert ✓';
        setTimeout(() => {
            e.target.textContent = 'Kopieren';
        }, 1500);
    });

});
<script>

html-Tags für Code im Editor


<pre><code>
DEIN CODE HIER
</code></pre>