当サイトには広告が含まれております

クリップボードにコピーするボタンを作るプラグイン Copy To Clipboard

この記事は最終更新日から9年経過しています。内容が古い可能性があります。

ブラウザでボタンを押したらクリップボードにコピーする、という機能を実現したくて色々紆余曲折しました。JQueryのライブラリーやjavascriptで行う方法を試しましたが色々あって(^_^;、WordPressのプラグインでなんとか思った感じに作ることができました。
その経緯と使ったプラグイン 「Copy To Clipboard – mobile + web」 の使い方を書いてみます。

記事をざっと見る

JQueryとjavascriptでできないか検証したのですが

まず最初に見つけたのが、zClip というJQueryのライブラリーでした。情報も多くかなりの実績があるようだったのでこちらをダウンロードして、WordPressで動かそうとしたのですが色々エラーが出て(これは自分の力不足かも…)、うまく動かすことができませんでした。

また、ちょっと気になったのはAdobe Flashswfを使っているということでした。iPhoneだとFlashは動かないのでこれをうまく導入できてもiPhoneでは動かないのかなぁと。サンプルサイトをiPhoneで見てみたのですがうまくコピーできませんでした。

次にjavascriptで単純にできないかなと色々検索したのですが、過去にはできたらしいですが現在は…

クリップボードにコピーする方法 スタックオーバーフロー

こちらに書いてあるように、

Javascript からのコピー&ペーストの機能は用意されてはいますが、全てのブラウザで一貫して動くことがない手法になっています。

セキュリティが厳しく、ブラウザによって機能が安定しないため、コピー&ペーストを行うために、 Javascript ではなく Flash のコピー&ペースト機能を使うことが主流になりました。

という感じなのだなとかなり納得して、無理かなーと思いました。

WordPressで実現したかったのでプラグインを検索してみる

WordPressで実現したかったので、プラグインがあれば!と検索してみました。

クリップボードにコピーするボタンを作りたかったので

ダッシュボード プラグイン>新規追加 の検索窓で copy clipboard と入力してリターン

「 Copy To Clipboard – mobile + web 」を見つけました。というか、他には見当たりません(>_<)。

インストール数がそれほど多くなかったり、現在のバージョンのWordPressではテストされてなかったりという不安な情報ですがこれしかないのでとにかく試してみます。

いますぐインストール をクリック

プラグインを有効化 をクリック

インストールが終了しました。

ボタンを押したらコピーしたいところにショートコードを書く

このプラグインはショートコードでボタンを表示してくれます。形式は、
 

[pw-clippy caption="ボタンに表示する文字"]クリップボードにコピーさせたい文字[/pw-clippy]

こんな感じです。実際に コワーキングスペース八王子 8Beat でこのプラグインを使ってみました。

Webサイトの右側一番下に住所などを表示しています。サイトを見ていて8Beatに行きたいな~と思った人はこの辺の住所や電話番号とかをコピーしたいと思うのです。なのでここにボタンを押したらコピーできるボタンを付けます。

ダッシュボード 外観>ウィジェット でこのウィジェットを開きます。

先ほどのショートコードの形式で、COPYというボタンをクリックしたらコピーさせたい文字を入力して 保存 をクリック

サイトを見ると COPY ボタンが表示されていました。このボタンをクリックして、ペーストすると

こんな感じにコピー&ペーストが実現できました(^^)/。最後の方の via のあとにurlが入っています。これはダッシュボードの設定で変更することが可能です。

ダッシュボード 設定>Copy To Clipboard をクリック

デフォルトでは post となっているようです。homepageにチェックを入れてみます。するとコピーペーストした文章は

 

コワーキングスペース八王子 8Beat
〒192-0084
東京都八王子市三崎町4-11 トーネンビル5F
 TEL:042-649-6681
 FAX:042-649-6687
 info@8beat.tokyo
 via http://8beat.tokyo

となりました。この形が分かりやすくていいかなーと思います(^^)/。noneを選択すれば

コワーキングスペース八王子 8Beat
〒192-0084
東京都八王子市三崎町4-11 トーネンビル5F
 TEL:042-649-6681
 FAX:042-649-6687
 info@8beat.tokyo

このようにviaは表示されません。用途によってこのviaなしも色々使えそうです。

iPhoneでの使い勝手を確認してみる

このプラグインもFlashのファイルを使ってコピーペーストを実現しています。なのに、「Copy To Clipboard – mobile + web」と、モバイルでも使えることを強調しています。

一体どうやって?ということで動きを確認してみました。

このように、iPhoneで見たときもコピーボタンが出ています

ボタンをタップするとこのようにポップアップで コピーペーストしやすい 形で表示されました。な、なるほどー

全選択 して コピーをタップ

メモ帳に貼り付けてみました。ちゃんとコピーペーストできました。うんうん。

iPhoneだとFlashが動きませんが、このようにコピーペーストしやすい形で表示されるので良いな~と思いました。

まとめ:機能としてはこれが今時点では良いのではないかなと思います

「Copy To Clipboard – mobile + web」はPCではボタンをクリックしただけでクリップボードにコピーできるし、iPhoneではコピーペーストしやすい形の表示をしてくれるので、今時点ではベストチョイスかなと思います。

ちょっと気になったのがボタンの形を変えようとしたのですが、CSSではなくswf(Flashのファイル)でこのボタンの形も指定してるらしくカスタマイズすることができませんでした。ボタンの大きさはwidth、heightで指定できるので

[pw-clippy caption="この情報をコピー" width="130" height="30"]
コワーキングスペース八王子 8Beat
〒192-0084
東京都八王子市三崎町4-11 トーネンビル5F
 TEL:042-649-6681
 FAX:042-649-6687
 info@8beat.tokyo
[/pw-clippy]

大きくして、ボタンに表示する文字を多くしてみると、

こんな感じになります。ちょっと縁を細くしたいな、と思ってもswfファイルなのでいじることができません。

この辺は文字を短めにするなどで対応していくしかないかなと思います。

おまけ:twentyfifteenの子テーマのウィジェットにショートコードを書くとき

twentyfifteenの子テーマのウィジェットでショートコードを使うときに、うまくショートコードを認識してくれませんでした(ショートコードがそのまま表示されてしまう)。

そんなときはお使いの子テーマのfunctions.php

add_filter('widget_text', 'do_shortcode' );

を追加します。twentyfifteenだけでなく他にもそのような状態になった場合は上記のようにコードを追加してみてください。

この記事が気に入ったら
いいね または フォローしてね!

あなたのシェアが励みになります!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

記事をざっと見る