特定のテキストを簡単にコピーさせたい
「右クリックを禁止にしているサイト」を運営している方に質問です。
特定の文字列をユーザーにコピーして貰いたいと思ったことありませんか？
私も右クリックを禁止にしているけどユーザに文字列をコピーしてもらいたい時が多々あります。
（プラグイン名、検索してほしい文字列、お店の住所などなど）
そんなときに役立つ「テキストをコピーするだけ」のボタンの作り方をご紹介します。
まず最初に以下の記事を参考に「style.css」と「footer.php」を同じように修正しておいてください。
-
WordPressで「タイトルとURLをコピーする」ボタンの作り方｜ブログ、SNS
目次タイトルとURLだけをコピーするボタン手順１．functions.phpに記載手順２．style.cssに記載手順３．footer.phpに記載手順４．記事にボタンを配置 タイトルとURLだけをコ ...
続きを見る
修正が終わりましたら、本文にタグを埋め込みます。
本文に下記のタグを埋め込む
本文に以下を記載してください。
「コピーするだけのボタン」部分はコピーさせたい文字列に変更してください。
<div class="copy_main">
<div class="copy_btn" data-clipboard-text="コピーするだけのボタン">
<i class="fa"></i>「コピーするだけのボタン」をコピー
</div>
</div>
実際の挙動を確認
以下が実際のボタンになります。
クリックして、どこかにペーストしてみてください。
「コピーするだけのボタン」という文字列が貼り付けられたと思います。
これでユーザに指定の文字列をコピーしてもらうことができますね。
是非参考にしてください。
※お気づきの方もいらっしゃると思いますが、各記事下部の「記事タイトルとURLをコピー」ボタンも上記ボタンを押下すると反応しております。
こちらは同じclassを利用しているためです。併用する場合はclass名を分けることをお勧めします。
以上、ワーカホリックダイアリーでした。