WordPressの優良テーマ「Cocoon」のクリップボードコピー機能カスタム

WordPressの優良テーマ「Cocoon」をめちゃくちゃ便利に利用させていただいているわけですが、ソースコードなんかを記述する際に使うブロック「コード」をコピペしやすくしてみます。

コードをクリックすると、クリップボードにコピーできるようにする感じです。
本サイトにも実装してあります。

少し自分がWordPressを触れるもんだから、機能などをしっかり調べないで利用させていただいているので、標準でできたらごめんなさい、他のテーマなどで使えるようならヒントとして・・・。

概要

JavaScriptを使ってクリップボードにコピーする処理を行い、コピー完了時にツールチップのようなメッセージを表示させることをイメージしています。

子テーマの「functions.php」ファイルの編集と、テンプレートにJavaScriptファイルを追加する感じで進めます。

JavaScriptファイルの追加

JavaScriptのコードを子テーマの「functions.php」ファイルに登録。
この後の手順で作るJavaScriptコード（js/copy-to-clipboard.js）を読み込む。

function enqueue_copy_script() {
    wp_enqueue_script('copy-to-clipboard', get_stylesheet_directory_uri() . '/js/copy-to-clipboard.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_copy_script');

JavaScriptのコード

子テーマ内に「js/copy-to-clipboard.js」というファイルで以下のコードを作成。

ツールチップを「wp-block-code」の外に動的に挿入。
ツールチップはコードブロックをクリックしたときにのみ表示されるようにする。

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

    codeBlocks.forEach(function (codeBlock) {
        // ツールチップを body に追加（コードブロックの外に配置）
        const tooltip = document.createElement('span');
        tooltip.className = 'copy-tooltip';
        tooltip.style.opacity = '0';
        tooltip.style.position = 'absolute';
        tooltip.style.backgroundColor = '#333';
        tooltip.style.color = '#fff';
        tooltip.style.padding = '5px 10px';
        tooltip.style.borderRadius = '5px';
        tooltip.style.fontSize = '14px';
        tooltip.style.transition = 'opacity 0.3s, transform 0.3s';
        tooltip.style.pointerEvents = 'none';
        tooltip.style.zIndex = '99999';
        tooltip.textContent = 'コピーしました！';
        document.body.appendChild(tooltip); // ツールチップをbodyに追加

        codeBlock.addEventListener('click', function (event) {
            const codeContent = codeBlock.querySelector('code').innerText;

            navigator.clipboard.writeText(codeContent).then(function () {
                // ツールチップの位置をクリック位置に設定
                const rect = codeBlock.getBoundingClientRect();
                tooltip.style.top = `${window.scrollY + rect.top - 40}px`;
                tooltip.style.left = `${window.scrollX + rect.left + rect.width / 2}px`;
                tooltip.style.transform = 'translateX(-50%)';

                // ツールチップを表示
                tooltip.style.opacity = 1;

                // 3秒後にツールチップを非表示にする
                setTimeout(function () {
                    tooltip.style.opacity = 0;
                }, 3000);
            }, function () {
                // コピー失敗時の処理
                tooltip.textContent = 'コピーに失敗しました';
                tooltip.style.opacity = 1;

                setTimeout(function () {
                    tooltip.style.opacity = 0;
                }, 3000);
            });
        });
    });
});

子テーマ用のスタイルに記載

子テーマ用のスタイルを記述できるファイル「style.css」に以下を追加。

pre.wp-block-code {
  position: relative; /* ツールチップの位置を制御するための設定 */
  cursor: pointer;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  padding: 10px;
  white-space: pre-wrap; /* 長い行を自動的に折り返す */
}

.copy-tooltip {
  position: absolute; /* 親要素（preタグ）に対して絶対配置 */
  top: -40px; /* ツールチップの位置を調整 */
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 14px;
  white-space: nowrap; /* テキストが改行しないようにする */
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none; /* ツールチップがクリックされないようにする */
  z-index: 99999; /* 他の要素よりも前面に表示されるように設定 */
}

これでコードをクリックすると、クリップボードにコピーされるはずかな。