Copy-paste zdrojového kódu na blogu

Máte na blogu kousky zdrojových kódů a chcete umožnit uživatelům je na kliknutí zkopírovat do schránky? Stačí použít child theme a kod níže – a je to.

• kód dáte do snippetu nebo child theme
• v kódu můžete určit, pro jaké post types se může pouštět (aby nebyl např. na normálních stránkách, kde takové věci moc nejsou)

//enable to copy on click source code in blog
add_action('wp_footer', function () {

    $allowed_post_types = ['post'];

    if (!is_singular($allowed_post_types)) {
        return; 
    }
    ?>
    <style>
        pre.wp-block-code { position: relative; }
        pre.wp-block-code .copy-btn {
            position: absolute;
            top: 8px;
            right: 8px;
            padding: 4px 8px;
            font-size: 12px;
            cursor: pointer;
            background: #eee;
            border: 1px solid #ccc;
            border-radius: 4px;
            z-index: 10;
        }
        pre.wp-block-code .copy-btn:hover { background: #ddd; }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            document.querySelectorAll('pre.wp-block-code').forEach(function (block) {

                var btn = document.createElement('button');
                btn.className = 'copy-btn';
                btn.innerText = 'Copy';
                block.appendChild(btn);

                btn.addEventListener('click', function () {
                    var code = block.querySelector('code').innerText;
                    navigator.clipboard.writeText(code).then(function () {
                        btn.innerText = 'Copied!';
                        setTimeout(function () { btn.innerText = 'Copy'; }, 2000);
                    });
                });

            });
        });
    </script>
    <?php
});