【WordPress】ブログにスクリプトコードのコピーボタンを設置する！テキストボックスから簡単にコピー【jQuery】

こんにちは！今回はブログにコピーボタンを設置する方法を紹介していこうと思います！

本サイトのようなスクリプトやコマンドを紹介するブログでは、簡単にコピーできたほうがユーザーにとっては楽なのでは？と思いまして、実装してみようと久々にjQueryを触ってみました。

しばらく触れていなかったので色々忘れていましたが、インターネットの力を借りて完成させてみました。

ブログを書くときになるべく作業量を減らして作業できるように意識して書いた見たので、よかったら使ってみてくださいね♪

やりたいこと

スクリプトコードを書いたブロックから、テキスト部分を抜き出してコピーするボタンを設置したい。

実装例

グレー背景に書かれているのがコピーしたいテキストになります。
その下に配置されているボタンを押すとコピーができます。

@echo off
cd %~dp0
echo これはテストです！
pause
exit

↓↓↓コピーができているか下のテキストボックスに張り付けてみてください↓↓↓

シンプルですが、機能的に十分ですね♪

スクリプト例

今回はコピーを行う処理が記述されている「メインスクリプト」と、クリックされたときに、メインスクリプトへコピーするテキストボックス名を送信する「ボタン用スクリプト」に分かれています。

メインスクリプト

<script>

//テキストをコピーする関数定義
$('.copytxt').click(function(){

    //ボタンからvalueの値を取得
    var strName = $(this).attr('value');

    //valueの値を名前に持つブロックからテキストを取得
    let strtxt = $('.' + strName).text();

    //テキストエリアを作成
    let $objtxtarea = $('<textarea></textarea>');

    //テキストエリアにテキストを貼り付け
    $objtxtarea.text(strtxt);

    //現在の要素にテキストエリアを展開
    $(this).append($objtxtarea);

    //テキストエリアの中身を選択
    $objtxtarea.select();

    //選択部分をコピー
    document.execCommand('copy');

    //コピー後のテキストエリアを削除
    $objtxtarea.remove();

    //完了メッセージ
    alert("コピーしました");

});

</script>

ボタン用コード

<div class="wp-block-button is-style-outline copytxt" value="code-area">
   <a class="wp-block-button__link">コードをコピー！</a>
</div>

使い方

メインスクリプトの設置

まずはメインスクリプトを設置していきます。

ブロックの追加ボタンをクリックして、カスタムHTMLブロックを追加します。
検索バーに「カスタム」と入れればたいていのWordPressでは見つけることができるでしょう。

すると、HTMLを直接入力するブロックが挿入されますので「HTML を入力...」と書かれているところに先ほどのメインスクリプトをコピーして貼り付けます。

貼り付けると↓のようになります。

これでメインスクリプトの設置は完了です。

このスクリプト自体はユーザーには見えません。また、記事の末尾にいることが望ましいです。そのため、公開前に記事の最後にくるように移動してください。

ブロックのメニューにある「6つの点」の部分をドラッグするとブロックの順番を入れ替えることができます。もしくは「∧」か「∨」をおしてブロックを移動できます。

表示されない場合は別のブロックをクリックしてから、移動したいブロックをクリックすると表示されることがあります。

コピーしたいコードのあるブロックの用意

次のコピー元のテキストを用意します。
今回は「整形済みテキスト」ブロックでやっていますが、他のテキストブロックでもOKです。

まずはブロックにコピーしたいテキストを設置します。

その後、右メニューから「ブロック」タブ内の「高度な設定」をクリックし、追加CSSクラスにこのテキストボックスの名前を適当に付けます。

これでテキストの設置はOKです。
ここでつけた名前をボタンにも設定するので覚えておいてください。

ボタン用コードの設置

今度はボタン用のコードを設置していきます。
今回はワードプレス用のボタンをカスタマイズしたものを使っています。

先ほどと同様にカスタムHTMLブロックを挿入します。

コピーしたボタン用コードを貼り付けます。

この後に、コピーしたいテキストが含まれているブロックにつけた名前を「value」の部分に書き込みます。

コピーしたままだと「value="code-area"」になっている部分を「value="copybox"」と、先ほどコピーしたいテキストを配置したブロックにつけた名前に変えます。

これで準備完了です。
ページを更新してプレビューすれば、ボタンをクリックしてコピーすることができます。

解説

全体の説明を細かくやると記事が大変長くなってしまうので、基本的な部分は省略して重要な部分のみ解説します。
※どうしても初心者には難しく感じると思うので、不要な人は読み飛ばしてください。

ボタンをクリックしてスクリプトに引数を渡す

クリック時の動作について

今回、ボタンにはすべて「copytxt」という名前が付けられています。

これは、メインスクリプト内の関数を呼び出すための記述です。

$('.copytxt').click(function()

このコードは「copytxt」という名前のついているブロックがクリックされた時動作するという内容です。そのため、ボタンには「copytxt」という名前が与えられています。

複数ボタンを設置しても、同じく「copytxt」とつけておけば、すべてのボタンがメインスクリプトを起動することができます。

valueで設定した値を「this」で受け取る

次にコピーするブロックの指定についてです。
すべてのボタンで同じようにスクリプトが起動できますが、そのままでは同じテキストボックスしかコピーすることができません。

ですが、ブロックの名前をスクリプトに渡してあげればそれをコントロールすることができます。その引き渡す値を「value」で設定していました。

このように「value」の値をブロック名にしておくと、クリックしたときにその情報をもったままスクリプトを起動することができます。

そのとき、一時的に値が格納されるのが「this」という変数です。

var strName = $(this).attr('value');

このように記述すると、「this」から「value」の値を引き出して、「strName」に格納してくれます。
※attrは値を引き出すコマンドだと思ってもらえればOKです。

これによって、同じ処理をするスクリプトでも、クリックしたボタンによって処理を変えることができました。

テキストを改行込みでコピーする

今回地味に苦労した点です。
普通にテキスト部分をコピーすると、改行がない状態でコピーされてしまいます。

そのため、一度「textarea」を作成し、そこに流し込んでからコピーすることで回避しています。

let strtxt = $('.' + strName).text();         //ブロックからテキスト部分をコピー
/*このままコピーすると改行が消えてしまう*/

/*そのため、テキストボックスを生成して一旦貼り付ける*/
let $objtxtarea = $('<textarea></textarea>'); //貼り付け用にテキストボックスを作成
$objtxtarea.text(strtxt);                     //貼り付け
$(this).append($objtxtarea);                  //ボタンの直下にテキストボックスを追加

/*張り付けたテキストボックスからコピーする*/
$objtxtarea.select();                         //テキストボックスの中身を選択
document.execCommand('copy');                 //コピー実行

/*使い終わったら消してお片付け*/
$objtxtarea.remove();                         //使い終わったテキストボックスを削除

このようにすることで、コピペで使えるコードにすることができたと思います。

あとがき

今回はWordPressでスクリプトコードをコピーするボタンを設置する方法を紹介させていただきました。

専門的な内容なため、うまく説明できたか疑問です・・・が、ちゃんと動作するスクリプトまで完成できたので個人的には満足です。

ブログを編集していると、一つ一つの作業を簡略化していかないと、積み重ねによって多大な時間を消費してしまいます。

私のスクリプトはそういった部分を意識して作ってます。

・メインスクリプトを一度設置してしまえば、あとから手を加えることない
・ボタンの「value」と、コピーしたいブロックに名前をつけるだけの2手順のみ

そのため、使い方さえわかれば、それほど手をかけずとも編集が可能になると思います。

また、ボタンのベースはWordPressのボタンをもとに作っていますので、こういったものに明るい方は、ボタンのクラスに関数名を追加してもらえばボタンのデザインも変更できると思います。

少しざっくりとした形になってしまい申し訳ないです。
質問等があればTwitterやお問い合わせフォーム、もちろんコメントでも構いませんのでご連絡くださいね♪

何かのお役に立てれば幸いです。

参考にさせていただいたサイト様

要素をクリックで処理開始! JavaScriptのonclickでイベントを指定 | 侍エンジニアブログ

この記事では「 要素をクリックで処理開始! JavaScriptのonclickでイベントを指定 」といった内容について、誰でも理解できるように解説します。この記事を読めば、あなたの悩みが解決するだけじゃなく、新たな気付きも発見できることでしょう。お悩みの方はぜひご一読ください。

www.sejuku.net

ブログにコピーをボタンを置く

スクリプトやサンプルHTML、CSSなどを記事で書く場合にコピーボタンを置いて利便性を上げるための方法です。WordPressでも使える内容です。

deve-cat.com

JavaScript : テキストのコピーボタンを実装。

〽️ ボタンがあればユーザに優しい。

fuuno.net

ありがとうございました！