【WordPress】コードブロックにコピーボタン追加（プラグイン無し）

2024.07.29

https://www.wppagebuilders.com/add-copy-to-clipboard-button-code-block-wordpress
の記事を参考に、コードブロックにコピーボタンを追加しました。

ざっくり言うと、

JavaScriptの処理でコピーボタンを実装
↓
function.phpでそのファイルを登録
(すべての記事のヘッダで読み込まれる)

という感じです。

基本の部分は参考元の通りですが、非推奨のコピー関数とWordPress側からの呼び出しについてを変更しています。

細かい部分はコード見た方が早いので↓のコードサンプルをご確認ください。
(コピペで動くはずです。2024/7/28動作確認済み・テーマはCocoonを使用)

コードサンプル

ここでは下記のようなフォルダ構成を想定しています。
お使いの環境に合わせて適宜読み替えてください。

wp-content/themes/<子テーマのフォルダ>/
    │
    ├─js
    │  └─add_copy_code_button.js
    ├─function.php
    │
    ...

function.php

お使いのfunction.phpに下記のコードを追加してください。

// ----------------------------------------------------------------------------
// codeブロックにコピーボタンを追加
// ----------------------------------------------------------------------------
function add_copy_code_button() {
  wp_enqueue_script('add-copy-code-button-js', get_stylesheet_directory_uri() . '/js/add_copy_code_button.js');
}
add_action('wp_enqueue_scripts', 'add_copy_code_button');

add_copy_code_button.js

add_copy_code_button.jsを以下の通り新規作成してください。

const COPY_BUTTON_TEXT = 'Copy';

document.addEventListener('DOMContentLoaded', function() {
    // WorddPressのコードブロックにコピーボタンを設定　※対象を変更したい場合はここをpre等に変更
    let codeBlocks = document.querySelectorAll('.wp-block-code');
    codeBlocks.forEach(function(block) {
        let code = block.querySelector('code');
        let copyButton = document.createElement('button');
        copyButton.appendChild(document.createTextNode(COPY_BUTTON_TEXT));
        copyButton.style.cssText = 'position: absolute; top: 0; right: 0; margin: 8px; padding: 4px 8px; font-size: 12px; background-color: #1d8ab3; color: #fff; border: none; border-radius: 4px; cursor: pointer; transition: all 0.2s ease-in-out;';

        // マウスホバー時にボタンの色を変える
        copyButton.addEventListener('mouseenter', function() {
            copyButton.style.backgroundColor = '#cce7e8';
        });
        copyButton.addEventListener('mouseleave', function() {
            copyButton.style.backgroundColor = '#1d8ab3';
        });

        // クリック時のコピー動作
        copyButton.addEventListener('click', function() {
            // コピー対象のテキストを取得
            let range = document.createRange();
            range.selectNode(code);
            let sel = window.getSelection();
            sel.addRange(range);

            try {
                // コピー実行
                navigator.clipboard.writeText(sel).then(() => {
                    sel.removeAllRanges();
                });
                // コピーボタンの表示切替
                copyButton.innerText = 'Copied!';
                copyButton.style.backgroundColor = '#333';
                copyButton.style.color = '#fff';
                setTimeout(function() {
                    copyButton.innerText = COPY_BUTTON_TEXT;
                    copyButton.style.backgroundColor = '#1d8ab3';
                    copyButton.style.color = '#fff';
                }, 3000);
            } catch (err) {
                sel.removeAllRanges();
                alert('Failed to copy text: ', err);
            }
        });

        block.style.cssText = 'position: relative;';
        block.insertBefore(copyButton, code);
    });
});