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

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

1 実装のポイント

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

2 functions.php にコードを追加

// ------------------------------
// コピー用ボタン（右上＋左下）
// ------------------------------
function add_copy_code_script_with_footer_and_header() {
    ?>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('pre > code').forEach(function(codeBlock) {
            const pre = codeBlock.parentNode;

            // 既にラップ済みならスキップ
            if (pre.parentNode.classList.contains('code-box')) return;

            // ラッパー作成
            const wrapper = document.createElement('div');
            wrapper.className = 'code-box';

            // ヘッダー（右上ボタン）
            const header = document.createElement('div');
            header.className = 'code-header';
            const btnHeader = document.createElement('button');
            btnHeader.className = 'copy-code-button';
            btnHeader.type = 'button';
            btnHeader.innerText = 'コピーする';
            btnHeader.addEventListener('click', function() {
                navigator.clipboard.writeText(codeBlock.innerText).then(() => {
                    btnHeader.innerText = 'コピーしました';
                    setTimeout(() => btnHeader.innerText = 'コピーする', 2000);
                }).catch(() => btnHeader.innerText = 'コピー失敗');
            });
            header.appendChild(btnHeader);

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

            // pre をラップ
            const parent = pre.parentNode;
            parent.insertBefore(wrapper, pre);
            wrapper.appendChild(header);
            wrapper.appendChild(pre);
            wrapper.appendChild(footer);
        });
    });
    </script>
    <?php
}
add_action('wp_footer', 'add_copy_code_script_with_footer_and_header');

  

3 汎用CSS

/* ------------------------- 
 * コピー用ボタン設置
 * ------------------------- */

/* コード全体を囲むボックス */
.code-box {
    border: 1px solid #ccc;          /* 薄いグレーの枠線 */
    border-radius: 5px;              /* 角を丸くする */
    margin: 1em 0;                   /* 上下に余白を設定 */
    background-color: #f9f9f9;       /* 薄いグレー背景 */
    overflow: hidden;                /* はみ出した部分を隠す */
}

/* コード上部のヘッダー部分（ボタンなど配置用） */
.code-header {
    background-color: #fff;          /* 白背景 */
    padding: 5px 10px;               /* 上下5px、左右10pxの余白 */
    display: flex;                    /* フレックスで配置 */
    justify-content: flex-end;        /* 右端に配置 */
    align-items: center;              /* 縦方向中央揃え */
    border-bottom: 1px solid #ddd;    /* 下境界線 */
}

/* コード下部のフッター部分（補足や左端に配置用） */
.code-footer {
    background-color: #fff;          /* 白背景 */
    padding: 5px 10px;               /* 上下5px、左右10pxの余白 */
    display: flex;                    /* フレックスで配置 */
    justify-content: flex-start;      /* 左端に配置 */
    border-top: 1px solid #ddd;       /* 上境界線 */
}

/* コピー用ボタン */
.copy-code-button {
    padding: 3px 6px;                /* 上下3px、左右6pxの余白 */
    font-size: 12px;                 /* 文字サイズ12px */
    cursor: pointer;                 /* ホバー時は手の形カーソル */
    background-color: #0073aa;       /* 青系背景色 */
    color: #fff;                     /* 文字色は白 */
    border: none;                    /* 枠線なし */
    border-radius: 3px;              /* 角丸 */
}

/* コピー用ボタン ホバー時 */
.copy-code-button:hover {
    background-color: #005177;       /* 濃い青に変更 */
}

/* コード部分（preタグ）のスタイル */
.code-box pre {
    margin: 0;                        /* 外側余白を消す */
    padding: 10px;                    /* 内側余白 */
    overflow-x: auto;                 /* 横スクロールはコード部分のみ */
    background: #f9f9f9;              /* 薄いグレー背景 */
}
  

4 代用プラグイン

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

5 まとめ

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