【jQuery】ワンクリックでコピーするボタンを作る【WordPress】

ワンクリック(タップ)でテキストをコピーするボタンを作ります。

デモはこちら！

このテキストをコピーします。

何行あってもコピーします。

一瞬でコピーできます。

Copy

リストでも問題なくコピーできます。

リスト1
リスト2
リスト3

Copy

WordPressユーザー対象の記事です。

知識がなくてもできるようになっていますが既存のテキストやボックスでコピーボタンを設置する場合は少しだけHTMLの知識が必要になります。

JavaScriptを使ってるので基本的にAMPでは使えません。コードはPisukeCode – Web開発まとめを参考にしています。

クリックでジャンプ

コピーボタンをWordPressで実装するための手順
既存のテキストにコピーボタンを設置するには？

コピーボタンをWordPressで実装するための手順

手順は以下の通りです。

手順

STEP1
CSSコピペ
style.cssにコードをコピペ
この手順を見る
STEP2
PHPコピペ
JavaScript用にfunction.phpにコピペ
この手順を見る
STEP3
HTMLコピペ
投稿画面でHTMLコピペ
この手順を見る

STEP1:CSSをコピペ

下記CSSをコピペしていきます。

メモ

「外観→テーマエディター→style.css(子テーマ)」。もしくは、「外観→カスタマイズ→追加CSS」に貼り付けてください。

CSSが反映されない場合はスーパーリロード(Ctrl+F5orShift+F5)してください。

/************************************
** コピーボタン
************************************/
.copy-box{
    background:#fff9e3;
    padding:2em;
    width: 90%;
    margin:0 auto;
    font-size:0.9em;
}
.copy-box p:first-child{
    margin-top:0;
}
.copy-box p:last-child{
    margin-bottom:0;
    padding-bottom:0;
}
.copy-box ul{
    border:none;
    margin:0;
    padding:0;
}
.copy-box ul li{
    margin-left:20px; /* 左に隙間があく場合は消してください */
}
.btn-copy {
    display: block;
    margin: 1em auto 2em;
    width: 120px;
    padding: 0.3em 1em;
    text-decoration: none;
    background: #888; /* ボタン背景色 */
    color: #fff;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 0px 5px rgba(0,0,0,0.2);
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing:1px;
    line-height: 1.8;
    overflow: hidden;
    position: relative;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.btn-copy:hover {
    color:#fff;
}
.btn-copy:before {
    left: -100%;
    position: absolute;
    height: 100%;
    width: 100%;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    content: "Copied!";
}
.btn-copy .btn-copy-text {
    display: inline-block;
    -webkit-transition: all 0.3s;
    -webkit-backface-visibility: hidden;
    -moz-transition: all 0.3s;
}
.btn-copy-active{
    background:#bbb;/* ボタンクリック時 背景色 */
}
.btn-copy-active:before {
    left: 0;
}
.btn-copy-active .btn-copy-text {
    -webkit-transform: translateX(250%);
    -moz-transform: translateX(250%);
    -ms-transform: translateX(250%);
    transform: translateX(250%);
}

Copy

ボタンはカラーコードを変更すれば色を変えられます。

STEP2:function.phpにコピペ

JavaScriptを入力するために下記コードをfunction.phpにコピペします。

function.phpは少しでも誤るとサイトにアクセスできなくなるので必ずバックアップを取ってから行ってください。

//コピーボタン
function p_copy_btn() {
echo <<< EOM
<script>
window.addEventListener('DOMContentLoaded', function(){
 jQuery("body").on("click",".btn-copy",function(e){
    var textElem = jQuery(this).parent().find(".copy-text");
    window.getSelection().selectAllChildren(textElem[0]);
    document.execCommand("copy");
  jQuery(this).addClass("btn-copy-active");
  jQuery(this).delay(2000).queue(function() {
  jQuery(this).removeClass("btn-copy-active").dequeue();
  });
 });
});
</script>
EOM;
}
add_action( 'wp_footer', 'p_copy_btn' );

Copy

STEP3:HTMLコピペ

これで準備はできたのであとはHTMLをコピペするだけです。

クラシックエディタの方はAddQuicktag。グーテンベルクの方は「カスタムHTML+再利用ブロック」を使えばいつでも呼び出せます。

<div>
<div class="copy-box copy-text">
<p>ここにテキスト</p>
<p>ここにテキスト</p>
</div>
<div class="btn-copy"><span class="btn-copy-text">Copy</span></div>
</div>

Copy

リストはこちら

<div>
<div class="copy-box copy-text">
<ul>
<li>リスト<li>
<li>リスト<li>
<li>リスト<li>
</ul>
</div>
<div class="btn-copy"><span class="btn-copy-text">Copy</span></div>
</div>

Copy

以上です！

既存のテキストにコピーボタンを設置するには？

テーマにあるボックスなど、デモ用のボックス以外で使うにはHTMLを編集する必要があります。

ルール通りにHTMLを組めば、どんなものでもコピーボタンを設置できます。

手順1：コピーしたいテキストをdivタグで囲む

例えば…

<div class=”box-name”>
<p>このテキストにコピーボタンをつけたい。</p>
</div>

のようなHTMLを例に考えます。

まずは全体をdivタグで囲います。

<div>
<div class=”box-name”>
<p>このテキストにコピーボタンをつけたい。</p>
</div>
</div>

手順2：ボタン用のHTMLを入れる

先ほどのコードの下から2行目(</div>の上)に下記コードを入れます。

<div class="btn-copy"><span class="btn-copy-text">Copy</span></div>

Copy

<div>
<div class=”box-name”>
<p>このテキストにコピーボタンをつけたい。</p>
</div>
<div class=”btn-copy”><span class=”btn-copy-text”>Copy</span></div>
</div>

ここのコードはコピーしないでください

手順3：classを追加する

最後です。

コピーしたいテキストを囲ってるdivタグにclass(copy-text)を追加します。

<div>
<div class=”box-name copy-text“>
<p>このテキストにコピーボタンをつけたい。</p>
</div>
<div class=”btn-copy”><span class=”btn-copy-text”>Copy</span></div>
</div>

ここのコードはコピーしないでください

これで使えるようになりますが場合によってはさらに工夫する必要があります。

その際はコメント欄、もしくは問い合わせよりURL付きでご連絡ください。