<pre><code></code></pre>内にコピーボタンを設置する方法

今回は、<pre><code> で囲まれたコードにコピー用ボタンを設置する方法を解説します。右上・左上・下など、ボタンの位置も CSS で自由に変更可能です。

実装のポイント

• functions.php にコピー用の JavaScript を追加
• CSS でボタン位置を指定
• 記事内の <pre><code> が自動的に対象になる

functions.php にコードを追加

 function add_copy_code_and_top_scroll_script() {
    ?>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('pre > code').forEach(function(codeBlock) {
            const pre = codeBlock.parentNode;

            // コピー用ボタン
            const button = document.createElement('button');
            button.className = 'copy-code-button';
            button.type = 'button';
            button.innerText = 'コピーする';
            button.addEventListener('click', function() {
                navigator.clipboard.writeText(codeBlock.innerText).then(() => {
                    button.innerText = 'コピーしました';
                    setTimeout(() => button.innerText = 'コピーする', 2000);
                }).catch(() => button.innerText = 'コピー失敗');
            });

            pre.style.position = 'relative';
            pre.appendChild(button);
        });
    });
    </script>
    <?php
}
add_action('wp_footer', 'add_copy_code_and_top_scroll_script');

    

汎用CSS

.copy-code-button {
    position: absolute;
    top: 5px;    /* 上位置 */
    right: 5px;  /* 右位置 */
    padding: 3px 6px;
    font-size: 12px;
    cursor: pointer;
    background-color: #0073aa;
    color: #fff;
    border: none;
    border-radius: 3px;
}
.copy-code-button:hover {
    background-color: #005177;
}
pre {
    position: relative; /* ボタン表示用 */
    overflow-x: auto;   /* 横スクロール */
}
    

テーマ別サンプルCSS

Lightning用

/* Lightning用 コピーボタンを設置 */
.copy-code-button {
    position: absolute;
    top: 5px;    /* 上位置 */
    right: 5px;  /* 右位置 */
    padding: 3px 6px;
    font-size: 12px;
    cursor: pointer;
    background-color: #0073aa;
    color: #fff;
    border: none;
    border-radius: 3px;
}
.copy-code-button:hover {
    background-color: #005177;
}
pre {
    position: relative; /* ボタン表示用 */
    overflow-x: auto;   /* 横スクロール */
}
.blog-post pre {
    max-width: 100%;
}
    

Cocoon用

/* Cocoon用 コピーボタンを設置 */
.copy-code-button {
    position: absolute;
    top: 5px;    /* 上位置 */
    right: 5px;  /* 右位置 */
    padding: 3px 6px;
    font-size: 12px;
    cursor: pointer;
    background-color: #0073aa;
    color: #fff;
    border: none;
    border-radius: 3px;
}
.copy-code-button:hover {
    background-color: #005177;
}
pre {
    position: relative; /* ボタン表示用 */
    overflow-x: auto;   /* 横スクロール */
}
.entry-content pre {
    max-width: 100%;
}
    

コピー用ボタンの位置例

左上にしたい場合：

.copy-code-button {
    top: 5px;
    left: 5px;
}
    

下右にしたい場合：

.copy-code-button {
    bottom: 5px;
    right: 5px;
}
    

代用プラグイン

もしプラグインで簡単に実装したい場合、Code Snippets や Enlighter などがあります。

まとめ

• functions.php に追加するだけでコピー用ボタンが自動で表示されます。
• CSS でボタンの位置やデザインを自由に変更可能です。
• Lightning と Cocoon 両方で簡単に対応できます。