WordPress コードブロック：コードコピーボタンを追加する

WordPress ブロックエディタのコードブロックを使用してコードを表示する場合は、ユーザーがコードを簡単にコピーして使用できるようにコードコピーボタンを表示することを検討することができます。 プラグインを使用するか、JavaScriptコードを使用してコードブロックにコピーボタンを表示できます。

[この記事は、2026年2月14日に最後に更新されました。 ]

WordPress コードブロック：コードコピーボタンを追加する

この WordPress ブログには、 WordPress サイトで使用できるさまざまなPHP/CSSなどのコードが紹介されています。

ユーザーがコードをコピーして使用するには、コードをドラッグして Ctrlキー+ C ショートカットを使用するか、右クリックして[コピー]メニューをクリックする必要があるため、少し面倒です。

プラグインを使用すると、「コードのコピー」ボタンを簡単に表示できます。 別の方法でJavaScriptまたはjQueryを使用してコピーボタンを追加することも可能です。

Copy Anything to Clipboardプラグインを使用してコードコピーボタンを表示する

Copy Anything to Clipboard プラグインをインストールすると、コードブロックにコピーボタンが表示され、ユーザーがコードをクリップボードに簡単にコピーできます。

このプラグインを使用して、ほぼすべての要素にコピーボタンを追加できます。 たとえば、引用符（Blockquote）にもコピーボタンを表示できます。

Copy Anything to Clipboard が有効な場合 設定 » Copy to Clipboard メニューが作成されます。

基本的には プレ セレクタにコピーボタンが表示されるように、preというタイトルの項目がXNUMXつ追加されています。 編集をタップ Copy, Copied, Copy to Clipboard などのフレーズを変更したり、韓国語などに翻訳することができます。 例：

• コピー：コピーまたはコードのコピー（引用の場合は、引用のコピー、名言のコピー...）
• コピーされた：コピー完了、コピーしました、コピー済みなど
• クリップボードにコピー：クリップボードにコピー

新規追加 ボタンをクリックして新しいセレクタ項目を追加できます。

新規画面が表示されたら Selector에 BLOCKQUOTEと入力するとHTMLタグ内のテキストをクリップボードにコピーするボタンが表示されます。

同様に、ボタンテキストをカスタマイズできます。

kontur Copy Code Button プラグイン

このような機能をする別のプラグインとして kontur Copy Code Buttonがあります。 このプラグインをインストールして有効にすると、ブロックエディタのコードブロックにコピーボタンが追加されます。

このボタンを使って GeneratePress テーマ와 Astra テーマ などでテストしてみると、アクティブなテーマによってボタンの形が違って表示されました。 テーマ設定でボタンの色、テキストの色などを指定できますが、より洗練された調整を行うにはCSSを使用することを検討できます。

このプラグインは100個が少しダメなサイトにインストールされて使用されていて3年以上放置されており、使用しないことが望ましいようです。

カスタムコードを使用してコードコピーボタンを表示する

プラグインの使用方法を好まない場合は、JavaScriptコードを使用してコードコピーボタンを追加できます。

たとえば、次のようなJavaScriptコードを追加しました。 （👉以下の「改善されたコード」を参照）

<script>
/**
 * This script enhances WordPress code blocks by adding a "Copy Code" button.
 * When the page loads, the script iterates over all code blocks (elements with the class '.wp-block-code').
 * For each code block, it appends a button that allows users to easily copy the code content.
 * When a user clicks the "Copy Code" button:
 *   - The code content is temporarily placed in a textarea element.
 *   - The content of the textarea is then copied to the clipboard.
 *   - The textarea is removed from the DOM.
 *   - The button's text changes to "Copied!" for 2 seconds, then reverts back to "Copy Code".
 */

document.addEventListener('DOMContentLoaded', function() {
    const codeBlocks = document.querySelectorAll('.wp-block-code');

    codeBlocks.forEach(function(block) {
        const button = document.createElement('button');
        button.className = 'copy-code-button';
        button.textContent = 'Copy Code';
        block.appendChild(button);

        button.addEventListener('click', function() {
            const code = block.querySelector('code').innerText;
            const textarea = document.createElement('textarea');
            textarea.value = code;
            document.body.appendChild(textarea);
            textarea.select();
            document.execCommand('copy');
            textarea.remove();

            button.textContent = 'Copied!';
            setTimeout(() => {
                button.textContent = 'Copy Code';
            }, 2000);
        });
    });
});
</script>

現在のテストでこのブログにこのコードを適用しました。 引き続き使用するかどうかは、実際にこの機能が多用されているかどうかを確認して決定します。

JavaScriptコードは WPコードなどのプラグインをインストールし、フッターセクションにこのコードを追加できます。 JSコードを正しくロードする静的な方法については、次の記事を参照してください。

• WordPressでjsスクリプトファイルとスタイルシートを正しくロードする方法

スタイルはCSSコードを使用して制御できます。 例：

/* Copy Code 버튼 스타일 */

.copy-code-button {
    display: block;
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: #333;
    color: #fff;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 3px;
    font-size: 12px;
    z-index: 10;
}

.wp-block-code {
    position: relative;
}

上記のCSSコードを適切に修正する ルックス » カスタマイズ » 追加 CSSに追加したり、 チャイルドテーマ 内のスタイルシート（style.css）に入力してください。

上記のコードにエラーがある場合、または改善することがある場合は、お知らせください。

クラシックエディタ（クラシックエディタ）では動作しませんが、コードを少し変更して、難しく動作しないようにすることができます。

WordPress 5.0 バージョンからデフォルトエディタでブロックエディタ（Gutenberg）が導入されました。 クラシックエディタは過渡的なプラグインとして一時的に提供されるものなので、まだクラシックエディタを使用している場合は、ブロックエディタの使用を検討してください。 初期に比べて機能と安定性が大幅に向上しました。

改善されたコード

上記のコードの中で、document.execCommand（ 'copy'）は以前に書かれた方法であり、現在Web標準では使用を推奨していない（Deprecated）文法です。最新の標準であるClipboard APIを使用すると、一時的にテキストウィンドウを作成して消去する複雑なプロセスを必要とせずに非常にきれいに処理できます。

SEO、セキュリティ、スピードなどで大幅に改善されたコード：

<script>
(function() {
    'use strict';
    
    // 이미 실행되었는지 확인 (중복 실행 방지)
    if (window.codeBlockCopyInitialized) return;
    window.codeBlockCopyInitialized = true;

    // Clipboard API 지원 확인
    if (!navigator.clipboard) {
        console.warn('Clipboard API not supported');
        return;
    }

    function initCodeBlocks() {
        const codeBlocks = document.querySelectorAll('.wp-block-code:not([data-copy-initialized])');
        
        // 코드 블록이 없으면 조기 종료
        if (codeBlocks.length === 0) return;

        // DocumentFragment 사용으로 reflow 최소화
        codeBlocks.forEach(function(block) {
            const codeElement = block.querySelector('code');
            if (!codeElement) return;

            // 이미 처리된 블록 표시
            block.setAttribute('data-copy-initialized', 'true');
            
            // 버튼 생성
            const button = document.createElement('button');
            button.className = 'copy-code-button';
            button.textContent = 'Copy Code';
            button.type = 'button'; // 명시적 타입 지정
            button.setAttribute('aria-label', 'Copy code to clipboard');
            
            // 이벤트 위임 대신 직접 바인딩 (코드 블록 수가 적을 경우 효율적)
            button.addEventListener('click', handleCopy, { passive: true });
            
            block.appendChild(button);
        });
    }

    function handleCopy(event) {
        const button = event.currentTarget;
        const block = button.closest('.wp-block-code');
        const codeElement = block.querySelector('code');
        
        if (!codeElement) return;

        // textContent 사용 (innerText보다 빠름)
        const code = codeElement.textContent;
        
        // 버튼 비활성화로 중복 클릭 방지
        button.disabled = true;
        
        navigator.clipboard.writeText(code)
            .then(function() {
                button.textContent = 'Copied!';
                button.classList.add('copied');
                
                // setTimeout 대신 명확한 변수 저장
                const timeoutId = setTimeout(function() {
                    button.textContent = 'Copy Code';
                    button.classList.remove('copied');
                    button.disabled = false;
                }, 2000);
                
                // 메모리 누수 방지
                button.dataset.timeoutId = timeoutId;
            })
            .catch(function(err) {
                console.error('Copy failed:', err);
                button.textContent = 'Failed';
                button.classList.add('failed');
                
                setTimeout(function() {
                    button.textContent = 'Copy Code';
                    button.classList.remove('failed');
                    button.disabled = false;
                }, 2000);
            });
    }

    // DOM 로드 완료 후 실행
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initCodeBlocks, { once: true });
    } else {
        // 이미 로드된 경우 즉시 실행
        initCodeBlocks();
    }

    // 동적 콘텐츠 대응 (옵션 - 필요시 활성화)
    // const observer = new MutationObserver(initCodeBlocks);
    // observer.observe(document.body, { childList: true, subtree: true });
})();
</script>

ボタンスタイルCSS：

/* 코드 블록을 기준으로 버튼을 배치하기 위한 설정 */
.wp-block-code {
    position: relative; 
}

/* 복사 버튼 디자인 및 우측 상단 고정 */
.copy-code-button {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px 10px;
    background-color: #333; /* 버튼 배경색 */
    color: #fff; /* 버튼 글자색 */
    border: none;
    border-radius: 4px; /* 버튼 모서리 둥글게 */
    font-size: 12px;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.3s ease;
    z-index: 10;
}

/* 마우스를 올렸을 때 버튼 효과 */
.copy-code-button:hover {
    opacity: 1;
    background-color: #555;
}

上記のコードを適用すると、次の図に示すように、コードブロックにコピーボタンが追加されます。

コンテンツコピー防止プラグインで使用する

本文のすべてのコンテンツをコピーすることはできませんが、コード部分のみをコピーしたい場合は...

1. WP Content Copy Protection＆No Right Clickのようなプラグインをインストールしてコンテンツのコピーを防ぎます（画像のダウンロードもできません）
2. 上記の「改善されたコード」部分のJSコードとCSSコードを適用できます。

これにより、本文のすべてのコンテンツをコピーできないように保護されますが、コードブロックには「コピー」ボタンが追加され、ユーザーはコードをコピーできます。

ただし、右クリック防止クリックを利用したコピー防止方法は容易に無力化されるため、大きな効果がないわけではありません。 SEOのために、コピー防止プラグインをインストールしないことを検討することができます。このブログは、10年前に始める当時のコンテンツのコピーができないようにしたことがあり、当時訪問者が不便であるという不満が多く、コピー防止コードを削除しました。

前のスペース/末尾のスペースを削除する

CSSコードをコピーして 外観 » カスタム » 追加 CSSに追加すると、時々エラーが発生することがあります。 そのような場合 先行スペース/末尾スペース除去ツールを使用してコードから先行スペースと末尾スペースを削除し、コードを貼り付けるとエラーが発生しない可能性があります。

参照

• Gutenberg エディタ：詳細情報/要約ブロック（トグル/アコーディオン機能）
• WordPressで画像をXNUMX枚並べる方法
• エレメンタプロプラグインとクラウドウェブサイト商品の違い
• クラウドウェイへ WordPress はじめにとドメインを接続する