워드프레스에서 코드 복사 버튼 쉽게 만들기: WPCode로 뚝딱!

こんにちは！今日はコーディング側のブログを運営する方に本当に便利なヒントを持ってきました。もちろん、その方以外にも便利です。それは WordPress コードブロックコピーボタンを追加する方法です。コードコピー機能は、プログラミング関連のブログで本当に重要です。読者が簡単にコードをコピー＆ペーストすることができるようにするからです。

あなたのワードプレスのコードブロックにきれいなコピーボタンをつけると、読者がワンクリックでコードをコピーすることができます。素敵じゃないですか？しかも WPCodeプラグインを使うと、この機能を追加するのはとても簡単です。さあ、一緒に見てみましょう！

なぜコードコピーボタンが必要なのでしょうか？

코드 복사 버튼이 없는 코드블럭 형식 참고 이미지 — ( 基本コードブロック形式参考画像 )

実は上の画像のように、基本コードブロックには淡い水色の背景にテキストだけ入力するようになっています。そのブロック内のテキストをスクラッチするためには、マウスでドラッグする手間がありますよね！しかし、ブログに「コピーボタン」を追加すると、次のようにいろいろと便利です。

読者がコードを簡単にコピー＆ペーストすることができます。
長いコードも一度にコピーできるので便利です。
コードを間違えて移動するミスを減らすことができます。
WordPress コードブロックの使いやすさが大幅に向上します。

さあ、これから本格的にコードコピーボタン実装のために出発しましょう。

WPCodeプラグインをインストールする

まず、プラグインをインストールする必要があります。このプラグインを使用すると、コードブロックコピーボタンを簡単に実装することができますよ。 WordPress 管理者ページで「プラグイン>新しいプラグインの追加」に行き、「WPCode」を検索し、インストール後に有効にしてください。

ワープ管理者ページに行くと上部メニューに'WPCode'が出来てそのメニューをクリックすると'スニペットの追加'サブメニューを確認することができます。これを利用してCSSとジャバスクリプトコードを適用して簡単にコードのコピー＆ペーストができるコードブロックコピーボタンを実装してみます。

( 플러그인 설치 후 워프 관리자 페이지 화면 ) — ( プラグインインストール後のワープ管理者ページ画面 )

CSSでコードコピーボタンを装飾する

では、CSSを使ってこのコピーボタンの形を作ってみます。まず、プラグインを使ってサイト全体のヘッダーにこのスタイルを追加します。

WordPress 管理者メニューから左側のメニューから Code Snippets> Add Snippetあるいは上部の WPCode> Add Snippetをクリックしてください。
カスタムコードの追加（新しいスニペット）もしくは Add Custom SnippetをクリックしてCSS Snippetを選択します。
スニペットの名前を'Copy Button Style'に指定してください。名前は自分が他のスニペットと区別できるように指定してください。そして、下記のコードを貼り付けてください。

pre { pre
  position: relative；
}

.copy-button {
  position: absolute；
  top: 5px；
  right: 5px；
  パディング：5px 10px；
  background-color: #f1f1f1；
  border: none；
  border-radius: 3px；
  cursor: ポインタ；
  color: #000000；
  font-size: 14px；
}

.copy-button:hover {
  background-color: #ddd；
}

場所を「サイト全体のヘッダー」に選択し、スニペットを保存 > アクティブ化をクリップします。

これにより、サイト全体の WordPress コードブロックに「コピーボタンスタイル」が適用されますよ！

JavaScriptでコードコピー機能を追加する

次は、コピーボタンが実際に動作するようにJavaScriptを追加する番です。このコードでコードブロックのコピーボタンの機能を実装します。上の段階でJavaScript関連でスニペットを選択してスニペットのタイトルを指定します。位置だけサイト全体のフッター(フッター)にしてください。

document.addEventListener('DOMContentLoaded', function () {
  const codeBlocks = document.querySelectorAll('pre')；

  codeBlocks.forEach(function (ブロック) { const codeBlocks.forEach(function (block) {
    const copyButton = document.createElement('button')；
    copyButton.className = 'copy-button'；

    const icon = document.createElement('i')；
    icon.className = 'copy-icon'；
    icon.textContent = '🗐'；

    const text = document.createElement('span')；
    text.textContent = 'コピー'；

    copyButton.appendChild(icon)；
    copyButton.appendChild(text)；

    block.appendChild(copyButton)；

    copyButton.addEventListener('click', function () {
      const code = block.querySelector('code').innerText；

      navigator.clipboard.writeText(code).then(function () { const
        icon.textContent = '✔'；
        text.textContent = 'コピー済み'；
        copyButton.disabled = true；

        setTimeout(function () {
          icon.textContent = '🗐'；
          text.textContent = 'コピー済み'；
          copyButton.disabled = false；
        }, 2000)；
      }); }); }); }); }); }); }); })；
    }); }); }); }); }); }); }); })；
  }); }); }); }); }); }); }); })；
}); }); }); }); }); }); }); })；

今、既存の皆さんがコードブロックを利用して作成したポストを開いて、以下のようにコピーするボタンが見えるか確認してください！ WordPress コードブロックごとに素敵なコードのコピーボタンができたでしょう！下の画像で、上記のコードブロックでは、すでにコードのコピーをしたため、「✔Copied」表示が表示されています。

코드 복사 붙혀넣기 기능 사용 결과 이미지 — ( コードコピー＆ペースト機能を使用した結果 )

仕上げ

どうですか？思ったより難しくないですよね？いくつかのコードとプラグインを使えば、複雑なコード修正なしでこのような素敵な機能を実装することができます。これであなたのブログの読者は、コードやテキストをワンクリックで簡単にコピーすることができるでしょう。あなたのブログにもこの機能を追加してみてください。

参考までに、テキストサイズを小さくするとか、絵文字を変更するとか、変更することがあれば、下記のコードの詳細解説を見れば、どのようにすればいいのかが分かるはずです。

そして、ワープで使用するボタンを少しおしゃれにするにはどうすればいいのでしょうか？みんな注目！目立つボタンアニメーションの秘訣を公開（feat.WordPress) ポストでその秘訣を確認してみてください！

# 用語解説

WPCodeプラグイン: WordPressにコードスニペットを簡単に追加できるようにしてくれるツールです。
スニペット(Snippet): 再利用可能な小さなコードの断片を指します。
CSS: ウェブページのデザインを飾るスタイル言語です。
ジャバスクリプト: ウェブページに動的な機能を追加するプログラミング言語です。
コードブロック：ブログ記事でプログラミングコードを表示する特別な領域です。
クリップボード: コピーした内容を一時的に保存するコンピュータの仮想空間です。

#コード詳細解説

CSSコード解説

pre { position: relative; }を指定します：コードブロックの位置を相対的に設定します。
.copy-button{ ... }。:コピーボタンの基本スタイルを定義します。
ポジション：絶対；: ボタンをコードブロック内の絶対位置に配置します。
上：5px、右：5px；ボタンを右上に配置します。
パディング：5px 10px；ボタン内部の余白を設定します。
background-color: #f1f1f1；: ボタンの背景色を設定します。
border: none; border-radius: 3px；：縁取りをなくし、角を丸くします。
cursor: ポインタ；をクリックします：マウスを置いたときのカーソルの形状を変更します。
color: #000000; font-size: 14px；: テキストの色とサイズを設定します。
.copy-button:hover{ ... }。:ボタンにマウスを置いたときのスタイルを定義します。

JavaScriptコード解説

document.addEventListener('DOMContentLoaded', function () { ... })；を実行します：ページの読み込みが完了した後、スクリプトを実行します。
const codeBlocks = document.querySelectorAll('pre')；を選択します：ページ内の全てのコードブロックを選択します。
codeBlocks.forEach(function (block) { ... })；: 各コードブロックに対して反復作業を行います。
const copyButton = document.createElement('button')；:コピーボタン要素を生成します。
copyButton.className = 'copy-button'；: ボタンにCSSクラスを適用します。
const icon = document.createElement('i')；:アイコン要素を生成します。
const text = document.createElement('span')；:テキスト要素を生成します。
copyButton.appendChild(icon); copyButton.appendChild(text)；ボタンにアイコンとテキストを追加します。
block.appendChild(copyButton)；を追加します：コードブロックにボタンを追加します。
copyButton.addEventListener('click', function () { ... })；: ボタンクリックイベントを処理します。
const code = block.querySelector('code').innerText；を指定します：コードブロック内のテキストを取得します。
navigator.clipboard.writeText(code).then(function () { ... })；をクリックします：クリップボードにコードをコピーします。
icon.textContent = '✔'; text.textContent = 'コピー済み'；: コピー完了後、ボタンの状態を変更します。
setTimeout(function () { ... }, 2000)；を押します：2秒後にボタンの状態を元に戻します。

WordPressでコードのコピーボタンを簡単に作成：WPCodeでポチッと！

なぜコードコピーボタンが必要なのでしょうか？

WPCodeプラグインをインストールする

CSSでコードコピーボタンを装飾する

JavaScriptでコードコピー機能を追加する