ブログに掲載されたプログラムのソースコードを利用したい時、「これ、ワンクリックでコピーできたら便利なのに…」と感じたことはありませんか？
特に横に長いコードだとスクロールが必要で、コピーが少し面倒に感じますよね。
この記事では、WordPressの標準的なコードブロック（<pre>タグ）に、シンプルで使いやすい「コピー」ボタンを自動で追加するスクリプト（JavaScript）をご紹介します。
コードのすべて選択やコピーといった手間が省けて、読者にとって格段に便利になります。
完成イメージ
以下のような形で、コードブロックの右上に「コピーする」ボタンが表示されます。
ボタンをクリックするとテキストがクリップボードにコピーされ、「コピーしました」と表示が切り替わります。
/* コピーボタンのスタイル */
.copy-code-btn {
position: absolute;
top: 5px;
right: 65px; /* 右からの位置を調整 */
padding: 4px 8px;
font-size: 12px;
background-color: transparent;
color: #4caf50;
border: 1px solid #4caf50;
border-radius: 4px;
cursor: pointer;
opacity: 0.8;
transition: opacity 0.2s, background-color 0.2s, color 0.2s;
z-index: 10;
}コピーボタンを追加するスクリプト
今回導入するJavaScript（コピーボタン・スクリプト）は以下の通りです。このコードをコピーして使ってください。
<script>
/* コピーボタン・スクリプト */
document.addEventListener('DOMContentLoaded', () => {
/* 動的なスタイル定義 */
const style = document.createElement('style');
style.textContent = `
/* 各コードブロックを包むラッパーのスタイル */
.code-block-wrapper {
position: relative;
padding-right: 50px; /* ボタンの右端からの位置 */
margin-bottom: 1em;
}
/* pre要素のスタイル調整 */
.code-block-wrapper pre {
position: static;
padding-top: 0;
margin-bottom: 0;
}
/* コピーボタンのスタイル */
.copy-code-btn {
position: absolute;
top: 5px;
right: 8px; /* ラッパーの右端からの位置 */
padding: 4px 8px;
font-size: 12px;
background-color: transparent;
color: #4caf50;
border: 1px solid #4caf50;
border-radius: 4px;
cursor: pointer;
opacity: 0.8;
transition: opacity 0.2s, background-color 0.2s, color 0.2s;
z-index: 10;
}
.copy-code-btn:hover {
opacity: 1;
}
/* コピー成功時のアニメーション */
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.15); }
100% { transform: scale(1); }
}
.copy-code-btn.copied {
background: #4caf50;
color: #fff;
animation: pulse 0.4s ease;
}
`;
document.head.appendChild(style);
/* 各'pre > code'ブロックにボタンを追加 */
document.querySelectorAll('pre > code').forEach(codeBlock => {
const preElement = codeBlock.parentNode;
/* ラッパーを作成し、pre要素を包む */
const wrapper = document.createElement('div');
wrapper.className = 'code-block-wrapper';
preElement.parentNode.insertBefore(wrapper, preElement);
wrapper.appendChild(preElement);
/* コピーボタンを作成 */
const copyButton = document.createElement('button');
copyButton.textContent = 'コピーする';
copyButton.className = 'copy-code-btn';
/* クリックイベントを設定 */
copyButton.onclick = async () => {
try {
await navigator.clipboard.writeText(codeBlock.textContent);
copyButton.textContent = 'コピーしました';
copyButton.classList.add('copied');
setTimeout(() => {
copyButton.textContent = 'コピーする';
copyButton.classList.remove('copied');
}, 2000);
} catch (err) {
console.error('コピーに失敗しました: ', err);
copyButton.textContent = 'コピーエラー';
setTimeout(() => copyButton.textContent = 'コピーする', 2000);
}
};
/* ボタンをラッパーに追加 */
wrapper.appendChild(copyButton);
});
});
</script>WordPressへの導入方法
このスクリプトをあなたのサイトに導入すれば、WordPress記事のすべてのコードブロックに自動的にコピーボタンが表示されるようになります。
導入方法は以下の3つがあります。
まずは「方法2」でテストしてみて、問題なければ「方法1」か「方法3」を本番運用に使われるといいでしょう。個人的には、プラグインを使った「方法3」を強くおすすめします。
1️⃣「方法1」 テーマのfunctions.phpを使う（サイト全体に適用する場合）
この方法は、サイト全体で常にスクリプトを読み込みたい場合に、一般的には最も推奨されています。WordPressの標準的な方法で、他のスクリプトとの競合を避けやすく、PHPへの理解があれば管理もしやすいです。
注意点: テーマを直接編集すると、テーマのアップデート時に変更が上書きされてしまう可能性があります。必ず子テーマを使用し、子テーマのfunctions.phpを編集するようにしてください。
functions.phpにコードを追加:
- WordPressの管理画面から「外観」>「テーマファイルエディター」に進みます。
- 右側のファイル一覧から、使用している子テーマを選択し、「Theme Functions (functions.php)」を開きます。
- ファイルの末尾に、以下のPHPコードを追加し、このコード内に掲載のコピーボタン・スクリプトを貼り付けます。
<?php
// functions.php の既存のコードの下に追記
//
function copy_btn_js() {
?>
//
// ここにスクリプト（コピーボタン・スクリプト）を貼り付けてください。（<script>から</script>まで）
//
<?php
}
// スクリプトをフッター（</body>タグの直前）に出力する。
add_action( 'wp_footer', 'copy_btn_js' );
?>2️⃣「方法2」 各記事のカスタムHTMLブロックを使う（特定の記事のみに適用）
この方法は、特定の記事にだけスクリプトを適用したい場合に使用します。サイト全体には影響がないため、テストしたいときに最適です。
たとえば、まずこの方法でスクリプトの効果を確認してから、安心してfunctions.phpなどに登録するとよいでしょう。
- 投稿やページの編集画面を開きます。
- 新しいブロックを追加し、「カスタムHTML」ブロックを選択します。
- 掲載のコピーボタン・スクリプトを<script></script>タグを含めてそのまま貼り付けます。
- 記事を更新または公開します。
3️⃣「方法3」プラグイン『Simple Custom CSS and JS』を使う（サイト全体、指定したページに適用）
『Simple Custom CSS and JS』プラグインを使うと、WordPressの管理画面から簡単にJavaScriptコードを挿入できます。テーマファイルを直接編集するよりも安全です。
テーマファイルを直接編集したくない場合や、複数のカスタムスクリプトを一元管理したい場合に非常に便利です。
1. プラグインのインストールと有効化:
- WordPress 管理画面から「プラグイン」>「プラグインを追加」へ進みます。
- 検索窓に「Simple Custom CSS and JS」と入力して検索します。
- プラグインを見つけたら、「今すぐインストール」をクリックし、その後「有効化」します。
2. スクリプトコードの貼り付けと設定:
- プラグインを有効化すると、管理画面の左メニューに「カスタム CSS & JS」という項目が追加されます。
- 「カスタム CSS & JS」>「カスタム JSの追加」をクリックします。
- 新しいJS コードの編集画面が開きます。
- タイトルを追加します
- 例えば「コードブロックコピーボタン」など、わかりやすい名前にします。
- 掲載のコピーボタン・スクリプトを<script></script>タグを除いて、エディターに貼り付けます。
- 右側の設定項目（オプション）を変更します。
- 「表示位置」＞「<footer>要素内」
- 設定後、「公開」ボタンをクリックします。
動作確認
スクリプトを導入したら、実際にコードブロックを挿入した記事を開き、コピーボタンが表示され、正しく機能するかを確認してください。
これで、あなたのWordPressサイトのコードブロックが、より使いやすく、読者フレンドリーになったはずです。
これで、あなたのWordPressサイトのコードブロックが、より使いやすく、読者フレンドリーになったはずです。おわりに
企業のウェブサイトなどで、サンプルコードの隣に「コピー」ボタンが付いているのを見て、「これ、便利だな」と感じていました。
私自身もブログでプログラムコードを掲載する際、利用者の立場になって、コードの端にコピーボタンを設置したいと度々考えてはいました。
その当時、10年近く前になりますが、ネット上のサンプルを参考に、コードブロックにコピーボタンを追加するスクリプトの作成に取りかかりはしました。
シンプルなボタンの設置はすぐに実現できたものの、いくつかの問題に躓きました。
特に頭を悩ませたのは、横スクロール時にボタンの位置がずれてしまう問題や、画面の拡大・縮小でボタンが不自然に動いてしまうことでした。これを解決しようと試行錯誤しましたが、どうしてもうまくいきませんでした。
さらに、ボタンクリック時のアクションにアニメーション（当時は斬新でした）を加えたくて、良さそうなサンプルを見つけて組み込もうとしたのですが、これも思うように動作せず、結局諦めて長らく放置していました。
最近ですが、ふとそのスクリプトの存在を思い出し、試しにAIにチェックしてもらったところ、驚くことにあっという間に全ての問題が解決され、ほぼ思い描いた通りのスクリプトが完成してしまいました。
正直、これには言葉を失いました。出来上がったコードは、もはや私には思いつかないような構造に修正されて、理解するのに苦労するほどでした。
しばらくは、スクリプトが完成した嬉しさよりも、虚しさを感じてしまいましたね。
これも時代の流れなのでしょうか。AIという優秀なプログラマーをただで雇えていると考えて、お願いすれば一瞬でデバッグしてくれるのは、夢のようなことなのですが…。
IT時代の変化に取り残されたような現実を、改めて痛感させられた出来事でした。
まだ途中まで作って放置してしまったプログラムがいくつか残っていますが、それらもAIが簡単に解決してしまうかと思うと、なんだか恐ろしさすら感じます。
今後もAIの発展によって、プログラマーの仕事の内容がどれほど変化していくのか、私には想像もつきませんね。
ですが、プログラマーの王道の知識と経験は、普遍的だと信じています。
コメント