今回はWordPressのテーマ「AFFINGER5」で、 jQueryを利用しコピーボタンを設置する方法を紹介したいと思います。
記事を書くキッカケは、沢山のサイトで紹介されている方法では、コピーボタンの設置が出来なかった為に苦労している方も多いかと思いメモも兼ねて記事にしておく事にしました。
クーポンコードの設置にも役立つかと思います。
設置方法は難しくなく、非常に簡単です。
困っている方は、是非、本記事を参考にしてコピーボタンを設置して見て下さい(*'▽'*)
jQueryを利用してコピーボタンを設置
他のサイトと同様で「jQuery」を利用するところは変更ありませんが、Scriptを少し変更しています。
SANGOなどでも正常に動作する事を確認していますので、他のWordPressのテーマでも利用可能です。
それでは詳細を解説していきます。
jQueryを設置する
設置するScriptは以下の通りです。
最初に「jQuery」を宣言し、($)で置き換えしています。
command
<script>
jQuery(document).ready(function($){
var clipboard=new ClipboardJS('.copy-button');
clipboard.on('success',function(e){
$('.copy-button').hide().fadeIn(1000).addClass('success').text('コピーしました');
});
clipboard.on('error',function(e){
$('.copy-button').hide().fadeIn(1000).addClass('error').text('コピーに失敗しました');
});
});
</script>
こちらのコードをfooter.phpの「/body」タグの直前に貼り付けます。
少しだけ解説すると、テキストをクリックすると「コピーしました」の文言へ変更となります。
また、失敗した際には「コピーに失敗しました」と表示する事が出来ます。
もし、phpを触りたく無いという方は「Insert Headers and Footers」のプラグイン を利用すると簡単です。
注意ポイント
phpを変更する前に、必ずバックアップを取得して下さい。
また、function.phpの修正は必要となりますので、「Insert Headers and Footers」だけではコピーボタンは設置出来ません。
clipboard.jsを設置する
clipboard.jsはfunction.phpに設定しますが、クリップボードにコピーする為に利用します。
command
wp_enqueue_script('clipboard');
場所はどこでも大丈夫ですが、子テーマを利用すればテーマをアップデートの際に上書きされないのでおすすめです。
これで準備は完了です。
コピーボタンを利用してみる
それでは実際にコピーボタンを利用して見ましょう。
command
<div class="copy-button" data-clipboard-text="コピーするテキスト">表示するテキスト</div>
CSSなどを利用する事で、文字を装飾する事も出来ますので、用途に応じて使って見て下さい。
メモ
当サイトではコピーボタンは設置していませんので、サンプルがなくってごめんなさい。
まとめ：クーポンコードの設置などでも活用できる
記事のリンクURLのコピーに利用される事が多いかと思いますが、商品のクーポンコードの設置などにも活用可能です。
文字列をコピーするのは手間も掛かりますし、スマホでは長押しをしなければならないなどの問題もあります。
コピーボタンを設置する事でクーポンの使用率、つまり商品を購入する機会向上に繋がる可能性があるので、気になる方はお試しして下さい。