【プラグイン不要！】WordPressで「コードコピーボタン」実装 | AIプログラミングハブ
本記事は広告が含まれる場合があります

【プラグイン不要！】WordPressで「コードコピーボタン」実装

Web開発
2023.10.21

WordPressは多くのプラグインで手軽にサイトをカスタマイズできることが魅力の一つです。しかし、その反面ページが遅くなったり、古いプラグインは脆弱性のリスクがあるなどのデメリットもあります。今回は、プラグインを使用せずに「コードコピーボタン」を実装する方法を紹介します。この方法を取ることで、ウェブサイトのパフォーマンスを維持しつつ、必要な機能のみを追加することができます。プラグインを使わないカスタマイズ方法に興味がある方は、ぜひこの記事をお読みください。

うまくいかない場合や、不明点があればコメントにてお願いします。

作りたいもの

今回は、WordPressでコードを埋め込んだ時に右上に表示される「コピーボタン」をプラグインを使用せずに作成します！！

この↓↓右上に表示されている「Copy」と記されている部分です。

<?php
$numbers = array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
$evens = array_filter($numbers, function($number) {
    return $number % 2 == 0;
});

foreach ($evens as $even) {
    echo $even . ' ';
}
?>

プラグインを使わないメリット

ウェブサイトのパフォーマンス向上

プラグインはJavaScriptやCSS、そして追加のデータベースクエリを含むため、サイトの読み込みが遅くなる可能性が高まります。特に不要なプラグインや不適切に最適化されていないプラグインをインストールしていると、このリスクは高まります。プラグインを使わずに必要な機能をカスタムコードで実装することで、余分なリソースのロードを避け、パフォーマンスの向上を図ることができます。

カスタマイズの自由度

プラグインは一般的に特定の目的や機能を果たすために設計されていますが、それに伴い、カスタマイズの自由度が制限されることがよくあります。独自の要件やデザインの調整を行いたい場合、プラグインの制約に挟まれることがあります。一方カスタムコードは、完全なコントロールと柔軟性を手に入れることができます。

カスタムコードで「コードコピーボタン」を実装

実装の準備

※編集は必ず子テーマ内のファイルで行ってください。
子テーマでないと、テーマがアップデートした時などに消えてしまう可能性があります。
子テーマを作成する方法は、コチラのサイトに詳しくまとめられています。

これから記述していくコードを“コピペするだけ”で基本的に同じものが作成できます。細かい修正はCSSを変更してください。

今回作成するにあたっての条件は、編集ページの「コード」で作成されたHTMLに、

下記のような “wp-block-code”というクラスがあることです(どのテーマでも、デフォルトであれば存在するはずです)。このクラスを読み取って、JavaScriptから「Copy」ボタンを追加していきます。

<pre class="wp-block-code hljs properties">
    <code><span class="hljs-attr">docker</span></code>
</pre>

functions.phpの変更

それでは実装を行なっていきます。

まずは、子テーマ内のfunctions.phpへ下記のコードを追加します(投稿ページにのみ有効となるコードです)。

function add_custom_scripts() {
    // 投稿ページでのみこのスクリプトを追加
    if (is_single()) {
    ?>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        var codeBlocks = document.querySelectorAll('.wp-block-code');

        codeBlocks.forEach(function(block) {
            var copyBtn = document.createElement('button');
            copyBtn.innerText = 'Copy';
            copyBtn.className = 'copy-btn';

            copyBtn.addEventListener('click', function() {
                var range = document.createRange();
                range.selectNodeContents(block.querySelector('code'));
                var selection = window.getSelection();
                selection.removeAllRanges();
                selection.addRange(range);

                try {
                    document.execCommand('copy');
                    copyBtn.innerText = 'Copied'; // テキストを「Copied」に変更
                    setTimeout(function() { // 3秒後に「Copy」に戻す
                        copyBtn.innerText = 'Copy';
                    }, 3000);
                } catch (err) {
                    console.error('Sorry, unable to copy');
                }

                selection.removeAllRanges();
            });

            block.style.position = 'relative';
            block.appendChild(copyBtn);

            // スクロールの挙動を監視して、Copyボタンの位置を調整
            block.addEventListener('scroll', function() {
                copyBtn.style.right = -block.scrollLeft + "px";
            });
        });
    });
    </script>
    <?php
    }
}
add_action('wp_footer', 'add_custom_scripts');

これで、コードエディタへ「Copy」と表示されるようになりました。また、「Copy」をクリックしたら「Copied」に切り替わり、3秒後に「Copy」に戻ります。

このままではコピーボタンの配置場所が悪いので、CSSで整形を行います。

CSSの変更

子テーマのstyle.cssもしくは、カスタムCSSへ下記コードを追加します。

/*コードのコピーボタン整形*/
.copy-btn {
    position: absolute;
    top: 0px;
    right: 0px;
    cursor: pointer;
    background-color: #333;
    color: white;
    border: none;
    padding: 0px 4px;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.copy-btn:hover {
    opacity: 1;
}

これで、コードエディタの右上へ「Copy」が移動しました！

細かい位置調整を行いたい場合は、CSSの”padding” “top” “right”などを変更してください。

まとめ

思ったよりも簡単にコピーボタンが実装できたのではないでしょうか？
今回のような比較的シンプルな機能については、コードでの実装がオススメです。今回の例を通して、少ないコードで簡単に実装できることがわかったと思います。
サイトのニーズに応じた最適な選択で、WordPressサイトを運用してみてください！

コメント